在CSS中,line-height被用来控制行与行之间垂直距离。也可以使用letter-spacing:*px来控制文字间距,*px是指间距像素。
不过,行间距与半行间距,还是取决于CSS中的line-height。
默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。可以定义line-height属性来覆盖初始值:p{line-height:140%}。
那5种line-height写法,可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开,如:<font-size>/<line-height>。
实例:body{font:100%/normal arial} , body{font:100%/120% arial} ,body{font:100%/1.2 arial} ,body{font:100%/25px arial}
两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式,欢迎大家补充。
修改 css 就可实现 位置调换 ,如下:
优点 : 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div>顺序 ,实现主要内容优先加载渲染。
缺点 :absolute 定位,脱离文档流,当 sidebar 列的高度,超过 main 列的高度,会遮住下面的元素。需要给父盒子设置 overflow 属性。
也支持位置调换:
缺点 :不能实现主要内容优先加载渲染。
位置调换:
这里有一点需要注意: .sidebar 没有设置高度,会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的,也就是和 .main 高度一样。
位置调换:
这里 .main 和 .sidebar 高度不单独设置的话,也是同样的高度。
位置调换:
位置调换:
这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响,只要能让 .main 成为 BFC 就行。
此外留给大家一个思考题,还有没有其他方式呢?