前言:
在敲牛腩的时候老师讲到了盒子模型,当时并不是很明白,通过查阅资料,以及自己亲自敲代码实践,这里对盒子模型做一个总结。
网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性,而这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
1、 属性值的简写形式
1.如果给出2个属性值,前者表示上下的属性,后者表示左右的属性;
2.如果给出3个属性值,前者表示上的属性,中间的数值表示左右的属性,后者表示下的属性;
3.如果给出4个属性值,依次表示上、右、下、左的属性,即顺时针排序。
eg:
<span style="font-size:18px;">border-color:red green;
border-width:1px 2px 3px;
border-style:dotted dashed solid double;</span>
2、 标准流
所谓“标准流”,就是指在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。
3、元素的分类
1)块级元素(block):占一行
块级元素div1和div2之间的垂直margin=MAX(div1的margin-bottom , div2的margin-top)。
2)行内元素(inline)
行内元素span1和span2之间的水平margin=span1的margin-right + span2的margin-left。
3、 盒子在标准流中的定位原则
1) 行内元素之间的水平margin
2)块级元素之间的竖直margin
特殊的现象,叫做塌陷
3)嵌套盒子之间的margin
没有对父盒子做明确的高度设置
对父盒子做了明确的高度设置。
4、如何计算一个盒子?
首先来看看IE的盒子模型
例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解释,那么这个盒子模型占用的
宽度为:20*2+10*2+10*2+200=280px;
高度:20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度:10*2+10*2+50=90px;
用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;
盒子的实际大小为:宽度:200px, 高度:50px;
那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
学习心得:
不管遇到什么样的小问题,只要肯查,就会发现原来小知识里面还蕴藏着好多知识。