爱站程序员基地CSS基础3
- 盒子模型
- 定位
盒子模型
- 外边距
- 边框
- 内边距
外边距 margin
margin-top: 元素 距离父元素或者兄弟元素 上面的距离margin-right: 元素 距离父元素或者兄弟元素 右边的距离margin-left: 元素 距离父元素或者兄弟元素 左边的距离margin-bottom: 元素 距离父元素或者兄弟元素 下边的距离margin:10px;上下左右都是10pxmargin:10px 20px;上下 10px 左右20pxmargin:10px 20px 30px; 上 10 左右 20 下 30pxmargin:10px 20px 30px 40px;顺时针 上右下左
边框 border
- border-width 边框宽度
- border-top 正方形 上边的边框
- border-left 左边边框
- border-right 右边的边框
- border-bottom 底部的边框
- border-styledashed 虚线
- solid 实线
- dotted 点线
- none 无样式
- 水平偏移 垂直偏移 阴影模糊度 阴影颜色
div{width: 300px;height: 300px;background: pink;border-width: 10px;border-style: dashed;border-color: seagreen;border-radius: 50%;box-shadow:10px 20px 30px orange;}
简写
border:2px dotted yellow; 边框宽度、实线虚线、边框颜色
内边距 padding
内容到边框的距离
padding-top: 10px;padding-left: 20px;padding-right: 30px;padding-bottom: 40px;padding:10px;上下左右都是10pxpadding:10px 20px;上下 10px 左右20pxpadding:10px 20px 30px; 上 10 左右 20 下 30pxpadding:10px 20px 30px 40px;顺时针 上右下左
定位 position
- absolute相对于body
- 如果定义绝对定位 那么 行内元素就会变成 块元素
- 完全脱离文档流
- top
- left
- 相对于自己原来的位置
- 相对于当前可视区域
z-index
当position是绝对定位 absolute 或者fixed时候 值越大 排在越前面 不用加单位 像素
绝对定位 和 fixed 定位 才有效 相对定位 z-index无效
子元素在父元素内垂直水平都居中
.c1{height: 450px;width: 100%;background: blue;position: relative;/* margin-top: 500px; */}.child {width: 200px;height: 200px;background:red;position: absolute;top: 50%;left: 50%;margin-top: -100px; -height/2margin-left: -100px; -width/2}
