盒模型-回头看看基本功（盒子）

盒模型的二次理解。

1定义

所谓盒模型，就是浏览器为页面中的每一个HTML元素生成的矩形盒子。

1.1排布

这些盒子们都要按照可见版式模型在页面上排布，版式模型由position,display,float这三个属性来控制，position属性控制页面上元素间的位置关系，用于定位；display属性控制元素显示的本质（inline:默认值，显示为内联元素；block：块级元素；inline-block:行内块级；table:做为块级表格来显示；none:不会被显示......）这些值能够令元素轻松拥有其余属性的特色~float属性也是做用于元素的位置关系，不过和position相比貌似调皮了一些，浮动是彻底脱离文档流，定位的值中只有absolute,fixed彻底脱离了文档流，默认值static即在常规文档流中，相对定位relative是相对于它原来在文档流中的位置（或者默认位置）。

1.2属性

默认状况下每一个盒子的边框不可见，背景也是透明的，属性可分为三组：边框（border）,内边框(padding)，外边框(margin)。

CSS为边框，内边框和外边框分别规定了简写属性，这样对不一样边框样式相同的就能够一条声明设定了。可是不一样样式的最好单独声明，利于后期的单独更改和语义化表达，如{margin:1px 2px 3px 4px;}最好用{margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;}，也能够将二者混合使用，这样只须要把不一样的那一个属性单独拿出来写就能够了，能够很大程度上减少工做量，注意css文件的读取顺序。

2 盒子边距

2.1  The  basic

盒子的内边距（padding）指盒子内容区与盒子边框之间的距离，盒子的外边距相对来讲就复杂一些了，由于盒子之间的距离会出现“垂直方向上叠加”的状况，eg:有3个段落咱们设置 p{margin-top:10px;margin-bottom:20px;}，那么第一个段落和第二段落，以及第二个和第三段落之间的距离是多少？（10+20=30）吗？实际距离是20px,也就是说值较大的外边距决定两个元素最终的距离，垂直外边距叠加，直到一个元素的外边距碰到令一个元素的边框为止。不过要注意的是叠加只是用于垂直方向的哦，水平的相邻的元素他们之间的距离是相邻外边距之和。

2.2 The extend

为文本元素设置外边距时一般须要混合使用不一样的单位，eg:一个段落的左右外边距可使用像素，这样该段文本始终与包含元素边界保持固定间距，不受字号变化的影响。然而对于上下边距，以em,rem(rem是相对与body字体的相对字体，em是相对与父级字体的相对字体，因此使用rem更好控制一些)当字体变大时，段间距也会相应变大，就比较和谐了。

3盒子有多大

3.1不一样盒子模型

盒子模型有两种，分别是 IE 盒子模型和标准 W3C盒子模型。他们对盒子模型的解释各不相同。标准盒子模型的宽度只是内容的宽度，IE的盒子模型宽度包括内容，内边距(padding),边框(border)。因此在占据位置相同的状况下，盒子的大小是不一样的。so~咱们须要在网页的顶部加上doctype声明，这样就能避免不一样浏览器按本身想法理解盒子模型进而出现不一样浏览效果的状况了。

3.2盒子的宽度

若是不设置块级元素的width属性，那么这个属性的默认值就是auto,结果会让元素的宽度扩展到与父元素同宽。添加水平边框，内边距和外边距，会致使内容宽度减小，减小的量为添加的水平边框，内边距和外边距的和。设定宽度值后，添加内边距元素的width值不变，可是元素占的地方比以前宽了2倍内边距。说明width属性只是盒子内容区的宽度，而非盒子所占的宽度。