css盒模型

相关概念

所有的HTML标签都可以看成矩形盒子，由width、height、padding和border构成，称为“盒模型”

所以盒子的总宽度：width+左右padding+左右border；盒子的总高度：height+上下padding+上下border；

width

盒子中内容的宽度，而不是盒子的宽度

height

盒子中内容的高度，而不是盒子的高

border

边框 

border: 1px solid #000;（宽度、实线、颜色）

padding

内边距：盒子边框内壁到文字的距离。

四个方向的padding可以分别用小属性进行设置：padding-top、padding-right、padding-bottom、padding-left

padding的四数值写法：四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

padding的三数值写法：三个数值以空格隔开进行设置，分别表示上、左右、下的padding

padding的二数值写法：二个数值以空格隔开进行设置，分别表示上下、左右的padding

灵活设置padding属性：可以用小属性层叠大属性，如下：

padding: 20px;

padding-bottom: 50px;

margin

外边距，即盒子和其他盒子之间的距离

margin也有四个方向，可以分别用小属性进行设置：margin-top、margin-right、margin-bottom、margin-left

margin的塌陷：竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。注意左右方向没有塌陷现象，是叠加的。

一些元素有默认的margin，比如：body、ul、p等，在开始制作网页的时候，要将它们清除

如何清除？如下

 *{

            margin: 0;

            padding: 0;

        }

“*”表示通配符选择器，表示选择所有元素

通配符有效率问题，工作时一般使用并集选择器，如下

body,ul,p{

            margin: 0;

            padding: 0;

        }

盒子的水平居中：将盒子左右两边的margin都设置为auto，盒子将水平居中

margin: 0 auto;

文本居中是：text-align：center；和盒子水平居中是两个概念

盒子的垂直居中，需要使用绝对定位技术实现

盒模型计算

父盒子给子盒子实际可用面积是由width和height决定

box-sizing属性

将盒子添加了box-sizing：border-box；之后，盒子的width、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为内缩的，不再外扩。

该属性大量应用于移动网页制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面开发中使用较少。

兼容到IE9

display属性

行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举列
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i等

 

行内块

img和表单元素是特殊的行内块，它们既可以设置宽高，也能够并排显示

 

行内元素和块级元素的相互转换

使用display：block；即可将元素转为块级元素

使用display：inline；即可将元素转为行内元素，将元素转为行内元素的应用不多见

使用display：inline-block；即可将元素转为行内块元素

 

元素的隐藏

使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样

使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置