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