outline, box-shadow,border 三者顺序
#box {
width: 200px;
height: 100px;
background: yellowgreen;
margin: 50px auto;
box-shadow: 0 0 0 10px #665;
outline: 4px solid pink;
border: 27px solid blue;
}
如代码演示:
- outline,box-shadow都是用来‘装饰’border的,包裹border用的。
- outline,box-shadow本身不占用页面空间。两个人是平级的。
多层边框
box-shadow: 0 0 0 10px #665,
0 0 0 20px blue,
0 0 0 30px red;
外边距合并
发生特点:
1. 块级元素(不包括浮动元素和绝对定位元素)
2. 只发生在和当前文档流垂直的方向上(默认情况下文档流是水平的,writing-mode可以修改流方向)。
修复边距合并问题:
1. margin-top合并
1.1. 父元素设置为块状格式化上下文元素(overflow:hidden;float:left;position:absolute;)
1.2. 父元素设置border-top值
1.3. 父元素设置padding-top值
1.4. 父元素和第一个子元素之间添加内联元素进行分割。(对第一个元素添加display:inline-block/inline-flex/inline-table;)
2. margin-bottom合并
2.1. 父元素设置为块状格式化上下文元素
2.2. 父元素设置border-bottom值
2.3. 父元素设置padding-bottom值
2.4. 父元素设置height/min-height/max-height
最后记住边距合并其实对于排版来说其实是有一定的好处的。并不完全不可取。
雪碧图使用
.spite-bg {
width: 54px;
height: 54px;
border-radius: 100%;
background: url("../assets/img/index_spirit.png") no-repeat;
background-size: 54px 216px;
display: inline-block;
margin-bottom: 5px;
}
- 指定background-size为雪碧图的等比例缩放后的大小,
- 通过background-positon:x y;来调整图片的显示位置,默认情况下坐标原点(图片左上角是 0% 0%。右下角是 100% 100%)
eg: background-position: 0% 0%;
background-position: 0px 0px;
background-position: top/center/bottom left/center/right;