css复习——选择器、padding、margin day4

0630

选择器

标签选择器
div(标签的名字)
ID选择器
ID名称（ID不能重复）
类选择器
.class名字（可以重复使用）

div{
    width:100px;
    height:200px;
    border:1px solid #0b9380;
   }
#box{
    width:500px;
    height:700px;
    border:3px solid #0b9380;
    }
.box{
    width:100px;
    height:100px;
    border:3px solid #0b9380;
    background-color: #f22e00;
    }

padding

padding 内边距 内填充
占位宽 border padding width margin
内容宽 width
padding-top:;
padding-right:;
padding-bottom;
padding-left:;
padding:一个值
四个方向
padding:两个值
第一个值 上下
第二个值 左右
padding:三个值
第一个值 上
第二个值 左右
第三个值 下
padding:四个值
上，右，下，左
如果不给盒子写宽度
那么padding不会影响盒子的占位宽（在padding的值不超过父级的宽度的情况下）

margin

margin 外边距
默认样式
padding-top:;
padding-right:;
padding-bottom;
padding-left:;
margin:一个值
四个方向
margin:两个值
第一个值 上下
第二个值 左右
margin:三个值
第一个值 上
第二个值 左右
第三个值 下
margin:四个值
上，右，下，左

margin的问题
1.两个相邻的同级别元素上下margin会叠压
同级别的两个元素上下相邻，上面元素有margin-bottom，下面元素有margin-top，则margin只会显示像素大的那个margin
2.margin的上下传递
子元素有margin-top，可能使父元素出现margin-top
解决办法：
如果父元素有border，则不会产生margin的上下传递