HTML盒模型

什么是盒模型

• 所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”
• 盒子的总宽度 = width + 左右padding + 左右border
• 盒子的总高度 = height + 上下padding + 上下border

width属性

• width属性表示盒子内容的宽度
• width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
  -当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

height属性

• height属性表示盒子内容的高度
• height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
• 盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0

margin属性详解

• margin是盒子的外边距，即盒子和其他盒子之间的距离
• margin也有四个方向

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“向下踹”
margin-left	左margin，“向左踹”

• 竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
• 一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除

* { /*通配符选择器*/
	margin: 0;
	padding: 0;
}

body, ul, p { /*表示选择所有元素*/
	margin: 0;
	padding: 0;
}

盒子的水平居中

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

.box {
margin: 0 auto;
}

• 文本居中是text-align: center; 和盒子水平居中是两个概念
• 盒子的垂直居中，需要使用绝对定位技术实现

padding属性详解

• padding是盒子的内边距，即盒子边框内壁到文字的距离
• 四个方向的padding，可以分别用小属性进行设置

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

• padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
• padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding
• padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding

行内元素和块级元素

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;可以也可以将元素隐藏，但是元素不放弃自己的位置

box-sizing属性

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

.box {
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	padding: 10px;
}

• box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少
• box-sizing属性兼容到IE9