开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
15.CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性 : display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)
- 自身属性: width / height / margin / padding / border / background
- 文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word
- 其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient .
16. 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路∶
- 必须确定页面的版心(可视区），我们测量可得知。
- 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
- 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
- 所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累.
17.定位
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏墓中某个位置，并目可以压住其他盒子.
定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式＋边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
17.1 定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
17.2 边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离。 | |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离。 | |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
