盒模型:
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
元素不放弃自己的位置