1. Font
- px
- 优点: 稳定和精确.
- 缺陷: 在浏览器放大或缩小时,会打破原有的web 布局.
- em
- 定义: 相对于
父元素的字体的单位数.
- 定义: 相对于
- rem
- 定义: 相对于
根元素<html>的单位数.
- 定义: 相对于
2. Float
- float 的本意是让文字环绕图片.
- 前端使用float 是为了实现 left, middle, right 的效果.
- float:left 的效果等同于 display:inline-block.
- float:right 的效果是从右向左排列.
- 只有左右浮动.
-
浮动不会对该元素的上一个元素有任何影响.- 其下一个元素会紧贴其上一个元素排布.
-
文字围绕图片的效果: 如果其一个元素中有内联元素(文字), 则会围绕该元素显式.
- 浮动破坏了正常的line boxes.
3. �Layout
- inline-block 与inline 的区别是能够设置width.
- 实现
水平居中的效果:- display:block
- margin: 0 auto
- width=!100%
- 实现
子元素水平居中的效果:- text-align:center.
- 前提是子元素为inline 元素.
- 实现
垂直居中的效果:- line-height 与height 相同.
- 实现
居于底部的效果:- position:absolute
- bottom:0.
- 绝对定位absolute, 可以固定上下左右位置.
-
清除父元素上的浮动:- overflow:hidden.
-
清除子元素/左边元素的浮动:- clear:both.
- 如果要指定元素的 position:absolute.
- 则其父元素必须为 position:relative �或者 position:absolute.
- 指定
相邻元素的对齐方式:- vertical-align : ....
