CSS 基础总结

引入CSS

内联样式

style标签

外部样式

a.css

body {background-color: grey;}

index.html

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;
}

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

双列布局

标签定义如下：


    left
    right

两列自适应：

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

三列布局

标签定义如下：


    left
    right
    middle

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

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

居中

水平居中

元素	属性
inline	父元素text-align: center
block	定宽：margin-left: auto; margin-right: auto 不定宽：子元素display: inline，再以内联元素的方法设置
flex	父元素display: flex; justify-content: center;

垂直居中

元素	属性
inline	单行：父元素height=line-height 多行：父元素display:table-cell或inline-block; vertical-align:middle;
block	子元素position: absolute; top: 0; bottom: 0 父元素position: relative; margin: auto;
flex	父元素display: flex; min-height: 100vh; 子元素margin:auto;

定位

固定定位

使用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