第四天前端div盒子模型及布局

七div布局

1.盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rhiGZ1e-1602597903148)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1602597255718.png)]

margin属性 外边距

margin-left/right/top/bottom

margin:上下 左右

margin:上 右 下 左（中间不要加逗号）

margin：0px auto 水平居中

margin：auto 0px 上下居中

padding属性 内边距

padding-left/right/top/bottom

padding:上下 左右

padding:上 右 下 左（中间不要加逗号）

padding：0px auto 水平居中

padding：auto 0px 上下居中

2.绝对布局

默认相对于父盒子 position:absolute

left/right/top/bottom 相对于父div的距离位置

3.相对布局

浮动的div脱离标准流，不占用空间并触碰边框的边框

浮动框的父边框会被缩短，给浮动边框留出空间，父边框围绕浮动框

浮动框需视觉显示，则设置一个空div清除两边浮动

line-height 行高，常用于容器内文字上下居中

display:block 常用于<a><span>/<div>,使a标签的widht和height等长度的css属性完全生效

例：
<li><a href="#">超链接</a></li>
当你鼠标移过到文字的时候，超链接有效果！
而当我把样式这样设置：
li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}
鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*100做为一块来的超链接！