Yuying Wu

moon indicating dark mode
sun indicating light mode

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

February 07, 2017

Tags:css

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

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

一、那些CSS布局的事儿

一列固定宽度

.box-1{
width: 300px;
}

一列宽度自适应

宽度随着视窗宽度而改变

.box-1{
width: 80%;
}

一列固定宽度居中

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

两列固定宽度

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

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

.box-1{
width: 100px;
float: left;
}
.box-2{
width: 100px;
float: left;
}

两列宽度自适应

.box-1{
width: 30%;
float: left;
}
.box-2{
width: 60%;
float: left;
}

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

两列右列宽度自适应

左列宽度自适应同理。

.box-1{
width: 100px;
float: left;
}
.box-2{
// 自适应:不设宽度,不设定浮动属性
}

两列固定宽度居中

<section class="layout">
<div class="box-1"></div>
<div class="box-2"></div>
</section>
.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来缩进左列和右列的宽度,达到自适应的效果。

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

.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%;有时候会无效。原来,根据浏览器解析规则,子元素的高度是否能按百分比显示,取决于父元素的高度

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

// 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效果:首字下沉

.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布局