css盒模型

盒模型：

所有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; // 元素将彻底放弃位置，如同没有写它的标签一样