设定溢出方向可以用float,position:absolute这类脱离文档流的方式。
float:left,float:right, postion:absolute后设置left/top/bottom/right,的一项为0;
对,CSS解析跟DOM解析正好相反,是从右向左的。这么设计的原因是单向树检索速度理论上更快。
所以要尽量:
不要在ID选择器或类选择器前使用标签名;
尽量少使用层级关系;
使用类选择器代替层级关系;
最右端的选择器不要出现 *。
但这不是优化的主要方向,甚至可以说是很少有人去专门优化CSS的层级结构。因为在现在的主流浏览器中,CSS渲染速度从来都不是瓶颈。反倒是大型网站中CSS的管理是需要考虑的,更丰富的层级结构有助于开发效率的提升。
<style>.arbox{position: relative}
.arr{
width: 0
height: 0
overflow: hidden
border-width: 10px
border-style:dashed dashed dashed solid
border-color:transparent transparent transparent #b2c1db
position: absolute
left: 15px
}
.block {
background-color: #b2c1db
height: 12px
left: 3px
overflow: hidden
position: absolute
top: 4px
width: 12px
}
</style>
<div class="arbox">
<div class="arr"></div>
<div class="block"></div>
</div>