DIV+CSS
一、盒子模型css
- height
- width
- padding 内边距
- margin 外边距
- border
1.margin 外边距
margin-top:15px;
margin-right:50px;
margin-bottom:100px;
margin-left:150px;
或者：margin:10px 50px 100px 200px;
一个值代表四个边
二个值代表 上下 左右
三个值代表 上 左右 下
四个值代表 上 右 下 左 （每个数值之间需要使用空格隔开）
2. padding 内边距
padding-top:10px;
padding-right:50px;
padding-bottom:100px;
padding-left:200px;
或者：padding：10px 50px 100px 200px;
一个值代表四个边
二个值代表 上下 左右
三个值代表 上 左右 下
四个值代表 上 右 下 左 （每个值之间都需要使用空格隔开）
3.通用选择器
* 选择的是所有元素
*{margin:0px;padding:0px}
最常用的属性作用：是去除div和浏览器之间的小缝隙。
4.div或者table居中显示
margin:0px auto;
5.字体居中
需要使用text-align 和line-height 配合将文本垂直居中显示
text-align:center; （水平）
line-height:50px; （垂直） 注：height=设置的高度 两行：设置一半
二、参与布局的常用属性
1.position 定位
a）absolute 绝对定位
absolute 绝对定位 如果只使用position:absolute没有任何意义的 只是脱离文档流 绝对定位是相对于浏览器的0,0点进行定位 需要使用 left top right bottom这几个方向属性来配置
如果你有父级元素 会根据父级元素的左上角定位
b) relative 相对定位
是相对于当前位置进行定位
c) fixed 固定定位 需要使用top left 配合
d) static 默认值
2. z-index 设置显示层级
auto 自动
number 数字
数字越大就会在最上面显示
3. display 显示属性 还有块级和行内级元素互换功能
none 隐藏 ，文档不保留位置 不占位隐藏
block 转换为块级
inline 转换为行内级
inline-block 转换为行块级
4. visibility 是否可见
visible 可见
hidden 隐藏 占位隐藏
5. overflow 超出部分处理
visible 总是可见(默认值)
hidden 超出部分隐藏处理
scroll 滚动条 声明时候都有滚动条
auto 自动 如果超出出现滚动条 否则没有
参考资料：https://www.w3cschool.cn/css/