css3 盒模型记
css3 盒模型
css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区。这个内容区周围有可选的内边距，边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这样就从元素框去除了这些项。
在W3C传统css2.1盒模型中，通过声明width和height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，这通常称为内容盒模型。
在css中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，不同之处是两者的计算方式不一样。
W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距
element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度 + 内边距 + 边框
element 宽度 = 内容宽度 + 内边距 + 边框
IE传统盒模型(IE6以下，不包括IE6)
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距
element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
内盒尺寸计算(元素大小)
element 高度 = 内容高度(包括了height+padding+border)
element 宽度 = 内容宽度(包括了height+padding+border)
换句话说，IE6以下版本其内容真正的宽度是width，padding，border。用内外盒来说，W3C标准浏览器的内容宽度等于IE6以下版本浏览器的内盒宽度。
box-sizing
前面讲到在IE传统盒模型下，边框和内边距都包含在宽度和高度内。而在标准的浏览器中，宽度和高度仅仅包含了内容宽度，除去了边框和内边距，这样就为web设计处理增添了很多麻烦。比如我们需要一个100px的元素，元素有10px的内边距，1px的边框，在W3C标准盒模型下就必须要做一番加减了，最后得出内容宽度为100-20-2=78px,而在IE传统盒模型下却只需要声明盒子内容等于100px，内边距与边框自动算在里面。为了解决这个问题，css3增添了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
box-sizing:content-box | border-box | inherit
content-box:默认值，让元素维持W3C的标准盒模型。
border-box:此值会让元素维持IE传统盒模型。
inherit:此值使元素继承父元素的盒模型模式。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:content-box;
}
</style>
</head>
<body>
<div>胸无大志者，必受制于人</div>
</body>
</html>
在默认值(content-box)标准盒模型下，盒子被内边距与边框撑大了。
div{
width:100px;
height:100px;
background:hsla(360,50%,30%,0.5);
padding:10px;
border:10px solid red;
box-sizing:border-box;
}
在IE传统盒模型(border-box)下，盒子大小不变。
IE6以下版本对盒模型的解析模式虽然不符合W3C的标准规范，但这种方式并不是一无是处，它也有好的一面：不管如果修改元素的边框或者内边距大小，都不会影响元素盒子的总尺寸，也就不会打乱页面的整体布局。而在标准浏览器下，按照W3C规范对盒模型的解析，一旦修改了元素的边框或者内边距，就会影响元素的盒子尺寸，也就不得不重新计算元素的盒子尺寸，从而影响到整个页面的布局。
overflow-x和overflow-y
overflow属性是css2.1规范中的特性，而在css3中增加了overflow-x和overflow-y属性。
overflow-x与overflow-y主要用来定义水平或垂直方向内容溢出的效果。
overflow-x:visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
visible:默认值。不裁剪内容，可能会显示在内容框之外。
hidden:裁剪内容，不提供滚动机制。
scroll:裁剪内容，提供滚动机制。
auto:如果溢出框，则提供滚动机制。
no-display:如果内容不适合内容框，则删除整个框。
no-content: 如果内容不适合内容框，则隐藏整个内容。
div{
width:200px;
white-space:nowrap;
overflow-x:scroll;
}
overflow-x:scorll,使x轴添加了滚动机制。
div{
width:100px;
height:100px;
overflow-y:scroll;
}
overflow-y:scorll,使y轴添加了滚动机制。
resize
用来改变元素尺寸大小，主要目的是增强用户体验。
resize:none | both | horizontal | vertical | inherit
none:用户不能拖动元素修改尺寸大小。
both:用户可以拖动元素，同时修改元素的宽度和高度。
horizontal:用户可以拖动元素，仅可以修改元素的宽度。
vertical:用户可以拖动元素，仅可以修改元素的高度。
inherit:继承父元素的resize属性值。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
overflow-y:scroll;
resize:none;
}
</style>
</head>
<body>
<div>胸无大志者，必受制于人胸无大志者，必受制于人</div>
</body>
</html>
resize为默认值时,不能拖动元素改变大小。
div{
width:100px;
height:100px;
overflow-y:scroll;
resize:both;
}
resize为both时，在元素右下角出现了特殊符号，拖动它就可以改变元素宽和高了。如下为拖动后的效果：
div{
width:100px;
height:100px;
overflow:scroll;
resize:horizontal;
}
resize为horizontal时，也出现了特殊符号，但是只能拖动水平方向，也就是宽度的大小，如下为拖动后的效果。
div{
width:100px;
height:100px;
overflow:scroll;
resize:vertical;
}
riseze为vertical时也一样，但是只能拖动垂直的方向，也就是高度大小，如下是拖动后的效果。
outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和border不同，外轮廓线不占用网页布局的空间，不一定是矩形。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color:定义轮廓线的颜色。
outline-style:定义轮廓线的样式。
outline-width:定义轮廓线的宽度。
outline-offset:定义轮廓线离边框的偏移值。
inherit:元素继承父元素的outline效果。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
border:10px solid;
outline:10px solid red;
}
</style>
</head>
<body>
<div>胸无大志者，必受制于人胸无大志者，必受制于人</div>
<span>胸无大志者，必受制于人</span>
</body>
</html>
outline的效果与border的效果类似，但却不占据文档流，所以能够覆盖住后边的文本。
css3盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。
css3 盒模型记的更多相关文章
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 盒模型
0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...
- 第94天：CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- css3盒模型
css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...
- CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...
- CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...
随机推荐
- Excel DNA学习笔记一
由于各种原因,被迫学习Excel DNA这个开源项目的使用方法,最后希望可以在其中,调用xll进行编码. 由此整理一下,这期间使用到的一些资料. 1.下载Excel DNA,目前最新的是0.30版 h ...
- Caused by: Cannot locate the chosen ObjectFactory implementation: spring - [unknown location] 的解决方式
1.添加网上所说的struts2 plugin jar包 2. <!-- Struts2配置 --> <filter> <filter-name>struts2&l ...
- CodeForces 732A Buy a Shovel (水题)
题意:你手中有10元的钱,还有一个r元的零钱,要买一个价格为k的物品,但是你要求不找零钱,求最少要买多少物品. 析:直接暴力,最多买10个物品就够了1-10. 代码如下: #pragma commen ...
- C++常用容器
vector 顺序容器,和数组类似,可从尾部快速的插入和删除,可随机访问. vector的常用成员函数: #include<vector> std::vector<type> ...
- MVC神韵---你想在哪解脱！（十五）
在模型中添加验证规则 本节介绍如何在我们的Movie(电影)模型中添加一些验证规则,同时确认当用户使用我们的应用程序创建或编辑电影信息时将使用这些验证规则对用户输入的信息进行检查.首先,让我们在Mov ...
- LinkedList类
LinkedList类 LinkedList类和ArrayList,Vector基本相同,都有增.删.改.查等方法.LinkedList是继承List接口. import java.util.*; p ...
- 一，彻底理解第一个C语言程序 Hello World
对于初学者来说,第一个程序一般都是hello world,而且是照着书上一点一点敲的.所以,在初学者眼中,敲出来的第一个程序代码不过是一堆看不懂的英语.而事实上,C语言作为一门语言,是有语法的.所以这 ...
- 进入名企必读的.NET面试题
1. 罗列ASP.NET服务器控件的运行的生命周期. 一般服务器控件的生命周期包含11个阶段: /// <summary> /// 1. 初始化 /// </summary> ...
- stl lower_bound upper_bound binary_search equal_range
自己按照stl实现了一个: http://www.cplusplus.com/reference/algorithm/binary_search/ 这里有个注释,如何判断两个元素相同: Two e ...
- 我所经历的SAP选型
这是一个失败的选型项目,而且在可遇见的未来公司也不会再经历SAP选型,甚至不会再启动erp项目,个中原因很难一言道尽,在此简要的说说我们的选型过程以及在选型过程中对各种因素的考虑. 一.重启选型工作七 ...