CSS知识点学习四

盒模型：

Width,height,padding,border

width和height是内容的宽高

padding内边距，文字到边框的距离

四个方向

上，右，下，左的顺序

上，左右，下

上下，左右

灵活设置padding

Padding:30px 0; 0代表左右没有padding

margin外边距，盒子之间的距离

四个方向上下左右

竖直方向有塌陷现象，取盒子外边距的最大值

水平方向是叠加

清除默认的margin

*{
margin:0;

Padding:0;

}

盒子的水平居中：

Margin:0 auto; 上下为0，左右自动

垂直居中：绝对定位技术

盒模型计算：

Box-sizing属性值为box-box,使得width,height的宽度为盒子的宽高，即padding,border变为内缩，不是外扩了，大量应用于移动网页制作中

display属性：

行内元素：

并排显示，不能设置宽高，width自动收缩 div,section,header,h,li,ul

块级元素：

竖直显示，能设置宽高，width 自动撑满 span,a,em,b,u,I

行内块：

可并排，可设置宽高，图片和文本框是行内块

display属性：block,inline,inline-block

实现行内和块级元素的转换

比如span标签设置padding 属性时，转为行内块，不会压到其他盒子 

元素的隐藏：display:none

元素将彻底放弃位置

Visibility:hidden

元素不放弃自己的位置