读书笔记 - CSS网站布局实录

有些书籍，就算内容赶不上潮流，经典始终是经典，无论什么时候看，总会觉得有些新的感受新的收获。

《CSS网站布局实录》，这本书不厚，关于布局、文件流、盒模型等等的基础知识，却讲得非常清晰明白。

一、那些CSS布局的事儿

一列固定宽度

1
2
3
.box-1{
    width: 300px;
}

一列宽度自适应

宽度随着视窗宽度而改变

1
2
3
.box-1{
    width: 80%;
}

一列固定宽度居中

1
2
3
4
.box-1{
    width: 300px;
    margin: 0 auto;
}

两列固定宽度

使用浮动，使文件流下两个块级元素流到同一行

文件流：body下的任意元素，根据其前后顺序和元素类型（块级、行内），组成一个个上下关系

1
2
3
4
5
6
7
8
.box-1{
    width: 100px;
    float: left;
}
.box-2{
    width: 100px;
    float: left;
}

两列宽度自适应

1
2
3
4
5
6
7
8
.box-1{
    width: 30%;
    float: left;
}
.box-2{
    width: 60%;
    float: left;
}

注意不要打满100%，会有两列之间的margin、padding、border等宽度影响

两列右列宽度自适应

左列宽度自适应同理。

1
2
3
4
5
6
7
.box-1{
    width: 100px;
    float: left;
}
.box-2{
    // 自适应：不设宽度，不设定浮动属性
}

两列固定宽度居中

1
2
3
4
<section class="layout">
    <div class="box-1"></div>
    <div class="box-2"></div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.layout{
    width: width1 + width2 (+ margin/borderWidth)
    margin: 0 auto;
    &:after{
        clear: both; // 清除浮动，不影响后面的文件流
    }
}
.box-1{
    width: width1;
    float: left;
}
.box-2{
    width: width2;
    float: left;
}

三列中间列宽度自适应

左右列使用绝对定位，脱离文件流；
中间列默认宽度100%，使用左右的margin来缩进左列和右列的宽度，达到自适应的效果。

如果定位不是针对整个视窗，父容器也用绝对定位，保证左右列绝对定位的参照元素是父元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box-left{
    position: absolute;
    top: 0;
    left: 0; // 左对齐
    width: width1;
}
.box-right{
    position: absolute;
    top: 0;
    right: 0; // 右对齐
    width: width2;
}
.box-middle{
    margin: 0 width2 0 width1; // margin: 上 右 下 左
}

高度自适应

单独设置某个元素的height: 100%;有时候会无效。原来，根据浏览器解析规则，子元素的高度是否能按百分比显示，取决于父元素的高度。

假设我们要实现一个自适应视窗高度的效果：

1
2
3
4
5
6
7
8
// IE下，html元素默认高100%，但body不是
// Firefox下，html没有默认高100%
html, body{
    height: 100%;
}
.target{
    height: 100%;
}

二、一些经典问题

1. 上下margin叠加问题

表现
当上下对象均有margin属性时，外边距会出现叠加问题，取较大值。

原因
CSS原始设计问题。作者考虑到段落的样式控制，假如多个p之间形成段落，每个p都具有margin属性，为解决排版距离不一致问题，设计出外边距叠加规则。

例外情况，margin叠加只针对块级元素，对inline、浮动、绝对定位的元素无效。

2. IE6下，float元素margin加倍

可通过设定目标元素的display: inline;解决。

3. CSS效果：首字下沉

1
2
3
4
5
6
7
8
.first-character{
    line-height: 1.5;
    vertical-align: top;
    &:first-letter{
        font-size: 2em;
        float: left;
    }
}

4. 图像裁剪问题

  1. CSS的clip属性（对象需使用绝对定位）
  2. 父元素定宽高，使用overflow:hidden，局部展示子元素的图片内容
  3. computed，通过计算，使图片自动水平、垂直居中
  4. flex布局
暂无数据