这一篇主要说一下网页布局。

网页布局的本质，其实就是用CSS来摆放盒子。

CSS提供了三种传统布局方式：普通流（标准流）、浮动、定位。

普通流就是标签按照规定好的默认方式顺序排列。

 

浮动（float）

浮动可以改变标签的默认排列方式，最典型的应用就是让多个块级元素在一行中排列显示。

div {
    float: left;
}

可取值为none（不浮动）、left（左浮动）、right（右浮动）。

浮动元素会脱离标准流，不再保留原先位置，后方标准流元素会占用此位置（只影响后方元素的位置）。

浮动元素会一行内显示并且元素顶部对齐（一行放不开会自动换行）。

任何元素都可以浮动，浮动元素会具有类似行内块元素的特性。

 

清除浮动

当父元素不设置height，并且子元素全部float，则由于浮动元素不占用位置，会导致父元素height为0，影响后面元素的布局。

这种时候需要清除浮动，或者说闭合浮动，即只让浮动在父盒子内部影响，主要有以下四种方法。

 
1.额外标签法

也称为隔墙法，具体原理就是在浮动元素后加一个空的块级元素赋予clear: both。

<head>
    <script>
        .float {
            ...
            float: left;
        }
        .clear {
            clear: both;
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="float">float1</div>
        <div class="float">float2</div>
        <div class="clear"></div>
    </div>
</body>
 
2.父盒子添加overflow
.box {
    overflow: hidden;
}

设置为auto、scroll也可以，缺点是元素溢出布局的部分可能被切掉。

 
3.给父盒子添加:after伪元素（推荐使用）
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* 为了兼容IE6、7 */
    *zoom:1;
}

是额外标签法的升级版，相当于通过CSS在父盒子内部末尾新增了一个盒子，盒子内就不用再写空标签了。

 
4.给父盒子添加双伪元素
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    /* 为了兼容IE6、7 */
    *zoom:1;
}

与第三种方式类似，前后都生成盒子。

 

定位

定位可以让元素自由在某个盒子内移动位置或者固定在屏幕某个位置，并且可以悬浮在其他元素上方。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。

div {
    position: absolute;
    top: 20px;
    left: 100px;
}

position可取值有static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）四种。

边偏移有top（相对父元素上边线距离）、bottom（相对父元素下边线距离）、left（相对父元素左边线距离）、right（相对父元素右边线距离）四个属性。

 
static（静态定位）

元素默认的标准流定位方式，也称作无定位。

 
relative（相对定位）

相对元素原来的位置移动，原来位置依然保留。

 
absolute（绝对定位）

相对祖先元素的位置移动，不再保留原来位置（脱标）。

如果没有父元素或者父元素没有定位，则以浏览器（Document）为准偏移。

如果祖先元素有除static以外的三种定位，则以最近一级的有定位的祖先元素位置为准偏移。

因此当子级使用绝对定位时，父级需要使用相对定位（因为如果父级也使用绝对定位，则脱标导致后方盒子占用父级位置）。

 
fixed（固定定位）

固定于浏览器可视区的某个位置，滚动页面时元素位置不动。

以浏览器（Document）为准偏移，不再保留原来位置（脱标）。

 
sticky（粘性定位）

可以认为是相对定位和固定定位的混合，效果是在滑动滚动条时跟着移动，直到偏移值达到所设置的值时固定。

以浏览器可视窗口为准偏移，但依然占有原来位置。必须添加至少一个偏移量。

由于兼容性较差，这种效果还是用JavaScript实现比较好。

 
元素堆叠问题

有时会出现多个元素叠放在一起，这时可以通过定位来解决遮挡问题。

相对定位可以压住下方普通流元素，所以当普通流元素重合时，可以添加相对定位属性让选择元素悬浮不被普通元素遮挡。

当使用定位的元素互相遮挡时，可以使用z-index属性（开启定位才有这一属性）控制元素的前后次序，数值越大，盒子越靠上，数值相同则后者靠上。

 
定位与浮动

绝对定位和固定定位与浮动有类似的特性，行内元素定位后可直接设置高度和宽度，块级元素定位后如果不给宽高则默认大小是内容大小。

但定位会压住下方标准流的所有元素，而浮动只压住下面标准流的盒子，不会压住下面标准流的文字和图片（文字标签被压住一部分，但文字环绕）。

 

元素显示与隐藏

display

设置一个元素是否存在

前面元素显示模式使用display可以转换元素的显示模式，除此之外还有很多其他用处，例如最常用的display: none;将元素隐藏（不再占用位置），而display: block除了转换元素为块级元素外，也有显示元素的含义。

 

visibility

设置一个元素是否显示

默认为inherit（继承父元素），可设置为visible（显示）、hidden（隐藏）。

隐藏后依然占用原来位置。

 

overflow

设置盒子内溢出的部分如何显示

默认为visible（显示溢出），可设置为auto（溢出则显示滚动条）、hidden（剪切掉溢出内容）、scroll（一直显示滚动条）。

 

CSS3新增特性

filter（滤镜）

将模糊或者颜色偏移等图形效果应用于元素。

之前在WordPress技巧这篇文章中介绍了网站一键变灰的代码，其实就是通过filter属性实现的，除了变灰以外还有以下的用法等。

/* 模糊 */
filter: blur(5px);

/* 灰度 */
filter: grayscale(80%);

/* 对比度 */
filter: contrast(200%);
...

 

transform（转换）

可以实现元素的位移、旋转、缩放等效果

/* 位移 */
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

位移不会影响其他元素的位置；如果单位使用百分比，则是相对于自身元素宽高；行内标签无效。

/* 旋转 */
transform: rotate(20deg);

/* 缩放 */
transform: scale(x,y);

缩放可以省略第二个参数。

/* 设置转换中心点 */
transform-origin:x y;

转换中心点默认为50%元素中心，也可以设置为top、center等方位。

/* 复合转换 */
transform: translate(x,y) rotate(z) scale(v,w);

由于旋转会改变坐标轴方向，因此translate应该放在前面。

 

translate3d（3D转换）

/* 移动 */
transform: translate3d(x,y,z);

/* 旋转 */
transform: rotateX(45deg);

/* 透视，需要加在要透视的元素的父元素上 */
perspective: 500px;

/* 控制子元素开启3D立体环境，默认为flat */
transform-style: preserve-3d;

 

calc（计算）

用于进行一些数值计算

/* 计算宽度 */
width: calc(80%-80px);

 

transition（过渡）

用于制作动画，经常和:hover搭配使用。

transition: 动画属性 使用时间 运动曲线 开始时间;

前两个属性必需；如果想要所有属性都过渡，动画属性可以设置为all；使用时间和开始时间单位为s；运动曲线默认为ease，可改为linear、ease-in、ease-out、ease-in-out。

/* 宽度过渡 */
div {
    width: 200px;
    height: 200px;
    transition: width 1s,height 1s;
}
div:hover {
    width: 400px;
    height: 400px;
}

 

animation（动画）

动画效果其实就是由一种样式逐渐改为新样式的效果。

/* 用keyframes定义动画 */
@keyframes widthAnimate {
    0%{
        width: 100px;
    }
    100%{
        width: 200px;
    }
}

/* 元素使用动画 */
div {
    animation-name: widthAnimate;
    animation-duration: 2s;              /* 动画时长 */
    animation-timing-function: linear;   /* 动画曲线，默认为ease */
    animation-delay: 1s;                 /* 动画开始时间，默认0 */
    animation-iteration-count: infinite; /* 动画播放次数，默认1 */
    animation-direction: alternate;      /* 动画在下一周期逆向播放，默认normal */
    animation-play-state: pause;         /* 动画状态，默认running */
    animation-fill-mode: backwards;      /* 动画结束后状态回到起始，默认forward */
}

/* 复合属性，前两个必需 */
div {
    animation: widthAnimate 2s linear 1s infinite alternate backwards;
}

定义动画时百分比用来规定变化的时间，可使用from和to来代表0%和100%。

 

其他常用技巧

精灵图

将常用的多个小背景图片合并放在一张大图片上，在不同元素中显示大图片的不同区域（通过background-position属性），减少向后台请求图片的次数，降低服务器压力。

 

CSS制作三角形

通过边框实现。

.triangle {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: solid 30px transparent;
    border-bottom-color: red;
}

如果想要更钝或者更尖锐的角，可以给各边框设置不同的宽度。

 

更改鼠标样式

cursor样式，可取值为default（默认）、pointer（小手）、move（移动）、text（文本）、not-allowed（禁止）等。

 

去除轮廓线

text等表单元素的输入框在获得焦点时默认会有一个蓝色边框，可以通过outline: 0;或者outline: none;去掉边框。

 

文本域取消拉伸

textarea表单默认右下角可以拖动更改大小，可以通过resize: none;取消拉伸。

 

垂直对齐

用于设置图片或者表单等行内块元素与文字垂直对齐。

img {
    vertical-align: middle;
}

默认情况下，图片底部会和base line（大写字母底边，文字下部）对齐（这就是在盒子里的图片底部有一道缝隙的原因）；可以改为bottom，图片底部和bottom line（字母底线，文字底线）对齐；也可以改为middle，图片中心和middle line（文字中心）对齐；还有top，图片上边缘和top line（文字顶线）对齐。

 

文字溢出显示省略号

单行文本
.title {
    white-space: nowrap; /* 取消换行 */
    overflow: hidden; /* 溢出部分隐藏 */
    text-overflow: ellipsis; /* 用省略号替代溢出部分 */
}
多行文本
.prev {
    overflow: hidden; /* 溢出部分隐藏 */
    text-overflow: ellipsis; /* 用省略号替代溢出部分 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置显示行数 */
    -webkit-box-orient: vertical;
}

兼容性不太好，只适合webkit引擎的浏览器。超出的行其实依然存在，只是通过设置盒子高度隐藏起来。

 

常用CSS初始化代码

/* 去除所有元素的默认边距 */
* {
    margin: 0;
    padding: 0;
}

/* 让斜体文本标签的字体取消斜体 */
em,i {
    font-style: normal;
}

/* 去除列表项前面的小圆点 */
li {
    list-style: none;
}

/* 去除图片边框并垂直居中 */
img {
    border: 0; /* 低版本浏览器如果图片加链接则会有边框 */
    vertical-align: middle; /* 默认基线对齐下方可能有缝隙 */
}

/* 鼠标指示按钮时指针变成小手 */
button {
    cursor: pointer;
}

/* 去除a链接的下划线 */
a {
    text-decoration: none;
}

/* 设置默认背景色和字体*/
body {
    -webkit-font-smoothing: antialiased; /* 文字放大时抗锯齿 */
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    background-color: #fff;
}

/* 清除浮动 */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
/* 为了兼容IE6、7 */
    *zoom:1;
}

人走了以后，

再深的思念也无法把她带回来了，

你应该在人活的时候，

用心对待他们。

——《比海更深》