引入CSS

内联样式

<h1 style="text-align: center; color: red"></h1>

style标签

<style>
    body {background-color: grey;}
</style>

外部样式

a.css

body {background-color: grey;}

index.html

<link rel="stylesheet" href="./a.css">

CSS之间引入（不常用）

a.css

@import url(./b.css);
div {background-color: red;}

调整样式的技巧

取色、量尺寸、预览字体

• 使用截图、取色工具：QQ、ColorPix；
• 字体可能有多种颜色，此时需要查看网页源代码：Chrome开发者工具下选择Elements的Computed属性（计算出来的属性值）；
• 设置属性值：直接在开发者工具上测试修改，或查看MDN；
• 测量某些条件下的尺寸时（如hover）启用截图工具可能使效果消失，此时可以在开发者工具中找到该元素、把触发条件固定再测量；

添加border

添加样式无明显效果时，可以给添加样式的元素添加带颜色和宽度的边框观察变化。

知识点

伪元素

• 只能展示（默认以span的形式展示，display: block则为div），不能被选中（不是真实的元素）；
• 必须添加content才可见（content可以为''）；
• 可以代替一层div（before/after后面不能再继续加）。

div::before{
    content: '['
}
div::after{
    content: ']'
}

属性继承

• 把父元素下的子元素的公共属性样式提取出来，写为父元素的样式属性；
• 部分属性可修改值为inhert，表示继承祖先元素属性。

默认边距

很多标签都存在默认边距（如body标签默认外边距8px），应该修改为0，再根据实际情况调整。

* {
    margin: 0;
    padding: 0;
}

伪类

如包含尺寸相关的样式（如border），伪类属性（如鼠标经过）引起改变时可能会造成“抖动”，此时应设置样式默认存在、颜色为透明，如设置边框：

a {
    border-bottom: 1px solid transparent;
}
a:hover {
    border-bottom: 1px solid red;
}

其他常用的伪类还有：nth-child(2)、first-child、:lang等。

a标签

• a标签作为子标签时，父标签可能不能完全包住a标签（a是内联元素），此时修改a标签的display属性为block即可；
• 设置a标签的边界与文字之间的边距（内边距），可以使用padding属性；
• a标签默认为蓝色、有下划线，应该修改全局a标签属性color: inherit继承祖先元素的颜色、text-decoration: none去除下划线。

span标签

span与span之间无论相隔多少空的内容（空格、换行等），都会被认为是一个空格，而在某些span之间不需要空或空格宽度不合要求的的场合应该把span同行靠在一起，再通过margin调整间距。

元素的高度

文档流

文档流即文档内元素的流动方向：

• 内联元素从左往右，受到阻挡时换行继续向右流动，其中：
  • span元素会被截断成两部分出现在两行；
  • 一连串的英文字符会被认为是一个单词，因此不会换行（由word-break属性控制）；
• 块级元素（独占一行）从上往下流动。

块级元素（div）的高度：文档流

• 块级元素的高度由其内部文档流元素的高度总和决定（不是相加）；
• 可以使用display属性修改其文档流展示特性（不建议）；
• 可以使用height属性固定高度（不建议）。

内联元素（span）的高度

• 同行元素依基线（单词本的第三线）对齐；
• 换行元素相隔“建议行高”：如span中包含文字，则建议行高约为字体像素大小的1.4倍高（可以由height、line-height属性控制，因字体而异，前端无法准确决定）；
• 字体的像素大小：把所有文字排成一行，最顶端到最低端的距离；
• 多个元素同行排放：取行高最大值；
• 注意内联元素只有左右padding有效果，上下padding没有。

内联元素无法准确确定高度，字体较小时可以通过line-height控制（当line-height与height一致时会在外层元素中自动居中），也可以通过padding调节。

背景图

• 自适应（宽高、位置）：

banner {
    background-image: url(xxx);
    background-position: center center;
    background-size: cover;
}

• 遮罩层：放在背景图div的内层，宽高与背景图相等（注意自适应时不需要指定），设置为黑色、调整透明度即可（如background-color: rgba(0, 0, 0, 0.8)）

自适应

• div动态宽度：使用max-width属性表示最宽不会超过该值，而窗口较小时会随窗口缩小；
• div居中：margin: auto;;
• span居中：计算宽度、高度差，调整height = padding + line-height、text-align控制；
• 同行元素对齐：调整同行不同元素的border、padding（修改padding时注意上下都要同时修改，否则不对称）；
• 列表两边对齐：如要使dl > dt, dd占满一行且占据在两边：

dl dt,
dl dd{
    float: left;
    width: 50%;
}

重叠

• 可以调整margin外边距使元素与其他同级元素重叠，只需要设置margin为负数；
• 另一个方法是使用相对定位（父）-绝对定位（子），不建议。

形状

搜素：CSS Tricks Shape

三角形

• 首先让边框与宽度和高度相等
• 使宽度和高度等于0，即得到一个正方形；
• 取需要的指定方向的三角形、使其他三个边框颜色为透明即可得到一个等腰直角三角形；
• 调节边框宽度，可以得到不同角度、不同大小的三角形。

div {
    border: 10px solid red;
    width: 10px;
    height: 10px;
    border-top-color: black;
    border-top-color: blue;
    border-top-color: greed;
}

最后把透明的边框属性删去，得到：

div {
    border: 100px solid transparent;
    width: 0px;
    border-left-color: #E6686A;
    border-top-width: 0px;
}

圆形

• div加上border-radius属性可得到弧形的边框，其中50%即为圆；
• 注意div必须指定width和height。

其他特殊效果

• 渐变（linear gradient generator）
• 动画（CSS Animation）
• 阴影（Shadow generator）
• 过渡：transition: xxx 1s;

图标

使用SVG：

svg {
    width: 100px;
    height: 100px;
    fill: 100%;
    vertical-align: top;
}

关于布局的总结

一些设计原则

• 不混用行布局和列布局（比如当一行多个div、且下一个div位于另一行时：在同行的div们外层套一个div，再与下一行的div组成列布局）；
• 使用max-width能根据窗口大小自动调节div宽度，比width更灵活；
• 使用display属性可以改变标签的展示方式，而不是为了方便再内容外面先套上一个div；
• 上一行的div与当前行div没有关系，如无必要不应该用一个div把两者包在一起，而是根据内容划分层次。

多列

单列、多行排放的元素可通过float修改为横向、多列布局：

.child {
    float: left
}

在其父元素清除浮动带来的副作用：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

另外也可以使用绝对定位-相对定位做多列布局，不建议。

双列布局

标签定义如下：

<div class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

两列自适应：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 50%;
    float: left
}
.right {
    background-color: blue;
    width: 50%;
    float: left
}
</style>

固定一列，另一列自适应：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 300px;
    float: left;
}
.right {
    background-color: blue;
    margin-left: 300px;
}
</style>

三列布局

标签定义如下：

<div class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</div>

固定两边，中间自适应（注意要把页面上需要自适应的元素代码写在最后，因此固定中间和左/右、另一边自适应同理）：

<style>
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.left {
    background-color: red;
    width: 300px;
    float: left;
}
.middle {
    background-color: yellow;
    margin-left: 300px;
    margin-right: 100px;
}
.right {
    background-color: blue;
    width: 100px;
    float: right;
}
</style>

三列自适应与两列自适应类似，不作赘述。

居中

水平居中

垂直居中

定位

固定定位

使用position属性可以脱离文档流（“浮”在上层），如position: fixed属性定位的元素：

• 不再受其父元素控制，其位置是相对于屏幕而言的；
• 其宽不会向两边扩展（而是向一边缩），可通过width: 100%控制（不建议，可能会越出其父元素）；
• 在fixed定位的元素中套一层div，通过修改该div的padding属性达到控制边距的效果。

相对定位、绝对定位

绝对定位必为block，使用绝对定位不会影响父元素、可以避免页面元素改变时影响布局（比如div挤压）。

使用浮动元素/绝对定位时没有指定宽度会默认自动换行，需要同行展示可以设置white-space: nowrap。

• 父元素：position: relative;
• 子元素：position: absolute;（相对于祖先中的第一个relative素定位）
• 子元素中通过top、bottom、left、right属性调节定位（表示到该边的距离）。

更多高级的布局方法见：CSS布局十八般武艺都在这里了

周边工具

• LESS CSS：一种简化、功能更多的CSS语言；
• SASS：一种简化、功能更多的CSS 语言（请自行搜索中英文官网）；
• PostCSS：一种 CSS 处理程序。

学习资源

• MDN
• CSS Tricks
• 阮一峰CSS
• 张鑫旭的CSS博客
• Codrops炫酷CSS效果
• CSS揭秘
• CSS 2.1中文spec
• Magic of CSS
• codepen
• CDN源：cdnjs
• 图片资源：wallhaven
• 图标资源：iconfont