css——选择器、padding、margin day4

2017-09-13 20:44:36来源:CSDN作者:wangyuanti人点击

分享

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的上下传递

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台