前端自学——盒模型

盒模型

1. 初步认识盒模型

所有的HTML标签都可以看成矩形盒子，其有width、height（是指盒子中内容的宽和高）、padding（内边距）、border(边框)属性构成，称为“盒模型”，盒子的总宽度=width+左右padding+左右border;盒子的总高度=height+上下padding+上下border.下面用图例解释：

2.padding属性详解

padding属性可以分为上下左右四个方向，分别用padding-top、padding-bottom、padding-left、padding-right表示；其还可以使用四数值写法，即用四个数值以空格隔开设置，分别表示上、右、下、左（顺时针方向）的padding；如：padding: 10px（上） 20px（右） 30px（下） 40px（左）;也可以用三数值来进行设置，分别表示上、左右、下的padding，写法和四数值类似；也可以用二数值设置，表示上下、左右padding；当然可以用一个数值来设置，表示全部方位的padding。具体写法由设计图决定。

3.margin属性详解

margin是盒子的外边距，即盒子与其他盒子之间的距离；其也有四个方向，表示方法与padding类似，分别为：

小属性	意义
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;
}

4. 盒子水平居中

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

.box{
	margin:0 auto；/*上下是0，左右自动*/
}

注意：文本居中的text-align:center;和盒子水平居中是两个概念。

5. 盒模型计算

6. box-sizing属性详解

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

7. display属性

dispaly属性类型	是否可以并排显示	是否能设置宽高	当不设置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;也可以将元素隐藏，但是元素不放弃自己的位置。