盒模型:
所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成
width、height:表示内容的宽高
盒模型计算
盒子总宽度:
width + 左右padding + 左右border
盒子总高度:
height + 上下padding + 上下border
padding:
盒子的内边距,即盒子边框内壁到文字的举例 ;上、右、下、左
margin:
盒子的外边距,即盒子和其他盒子之间的距离 ;上、右、下、左;
竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准
body、ul、p等,都有默认margin,在开始制作网页的时候,要将他们清除
/* *为通配符选择器,表示所有元素 */
*{
margin: 0;
padding: 0;
}
盒子水平居中:
.box1{
margin: 0 auto ;
}
box-sizing属性
box-sizing: border-box; 盒子的width、height数字就表示盒子实际占有的高度(不含margin),即,padding、border变为“内缩”,不再“外扩”;大量应用于移动网页制作
/* 宽高变成实际宽高,盒子内容的宽高为160px */
.box{
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid black;
padding: 10px;
}
display属性
行内元素和块级元素
行内:不能独占一行,不能设置宽高;eg:a、span、em、b、u、i
块级:独占一行,可以设置宽高;eg:div、section、header、h系列、li、ul
行内块:既能够设置宽高,又能并排显示; eg:img、表单元素
/* 转为块级元素 */
display: block;
/* 转为行内元素 */
display: inline;
/* 转为行内块元素 */
display: inline-block;
元素的隐藏
visibility: hidden; //元素隐藏,但不会放弃自己的位置
display: none; // 元素将彻底放弃位置,如同没有写它的标签一样