CSS基础3

CSS基础3

• 盒子模型
• 定位

盒子模型

• 外边距
• 边框
• 内边距

外边距 margin

margin-top: 元素 距离父元素或者兄弟元素 上面的距离
margin-right: 元素 距离父元素或者兄弟元素 右边的距离
margin-left: 元素 距离父元素或者兄弟元素 左边的距离
margin-bottom: 元素 距离父元素或者兄弟元素 下边的距离  

margin:10px;上下左右都是10px 
margin:10px 20px;上下 10px 左右20px  
margin:10px 20px 30px; 上 10 左右 20  下 30px
margin:10px 20px 30px 40px;顺时针  上右下左    

边框 border

• border-width 边框宽度
• border-top 正方形 上边的边框
• border-left 左边边框
• border-right 右边的边框
• border-bottom 底部的边框
• border-style
  • dashed 虚线
  • solid 实线
  • dotted 点线
  • none 无样式
• border-color 边框颜色
• border-radius 边框 圆角
• border-shadow 边框阴影
  • 水平偏移 垂直偏移 阴影模糊度 阴影颜色

  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;上下左右都是10px 
padding:10px 20px;上下 10px 左右20px  
padding:10px 20px 30px; 上 10 左右 20  下 30px
padding:10px 20px 30px 40px;顺时针  上右下左    

定位 position

• absolute
  • 相对于body
  • 如果定义绝对定位 那么 行内元素就会变成 块元素
  • 完全脱离文档流
  • top
  • left
• relative
  • 相对于自己原来的位置
  • top
  • left
• static
• fixed
  • 相对于当前可视区域
  • 不动

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/2
            margin-left: -100px;  -width/2
 }