整体介绍
盒模型基本概念 1)认识盒模型 2)width和height属性详解 3)padding属性详解 4)margin属性详解 5)盒模型计算 6)box-sizing属性 行内元素和块级元素 1)display属性 2)行内元素和块级元素的相互转换 3)元素的隐藏
认识盒模型
所有HTML标签都可以看成矩形盒子，由width、height、 padding、border构成，称为”盒模型
width、height是指文字宽度和高度
什么是盒模型
可以认为整张网页是由盒模型组成的
盒子的总宽度=width+左右padding+左右border
<style>
.box1{
width:200px;
height:200px;
background-color:gold;
/*边框，快捷键bd*/
border:10px solid red;
/*内边距*/
padding:10px;
</style>//边框，快捷键bd//
border:10px solid #000； 10px 代表边框宽为10px，solid代表边框为实线 000代表黑色
现在盒子总宽高都为200+102+102=240px 所以width、height并不能决定盒子总宽高，因为边框可以加上去
padding属性详解
padding:是盒子的内边距，即盒子边框内壁到文字的距离
padding是四个方向的
四个方向的padding,可以分别用小属性进行设置
padding的四数值写法
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
padding的三数值写法
padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding
同理， padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding
灵活设置padding属性
0不可以省略，但可以不用写单位
margin属性详解
margin是盒子的外边距，即盒子和其他盒子之间的距离
margin也有四个方向
margin的塌陷
竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
盒子(div)之间天生竖排，若要实现并排，需要使用浮动技术 而span标签天生并排显示并有一个空格(空白折叠现象)，相关知识涉及到块内元素和行内元素 空白折叠现象：
有空格：
<body>
<span>我是一个span</span>
<span>我是一个span</span>
<body>无空格：
<body>
<span>我是一个span</span><span>我是一个span</span>
<body>一些元素有默认margin
一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候，要将他们清除
盒子的水平居中
将盒子左右两边的margin都设置为auto,盒子将水平居中
注：
文本居中是text-align:center;和盒子水平居中是两个概念
盒子的垂直居中，需要使用绝对定位技术实现
行高=盒子高实现文字垂直居中
盒模型计算
通过父盒子可知剩下的内容为weight、height
388 + 26 = 400px 为父盒子的内容宽度
188 + 48 + 46 + 20 + 2*10 = 300px 为父盒子高度
注意，老二里加了padding
box-sizing属性
将盒子添加了 box-sizing:border-box; 之后，盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了，即padding、border3变为“内缩”的，不再“外扩”
- box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少
- box-sizing属性兼容到lE9
display属性
行内元素和块级元素
行内块
img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示
行内元素和块级元素相互转换
- 使用display:block;即可将元素转为块级元素
- 使用display:inline;即可将元素转为行内元素，将元素转 为行内元素的应用不多见
- 使用display:inline-block;即可将元素转为行内块
元素的隐藏
- 使用display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
- 使用visibility:hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置