CSS 知识总结

2019-11-04 本文已影响0人苏wisdom

1 CSS的简介与历史

CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。

为什么叫“层叠”呢？
层叠提供了极大的灵活性

样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一元素进行样式声明
文件层叠：可以用多个文件进行层叠

版本历史

1994年，哈肯·维姆·莱提出了CSS的最初建议。
CSS1：1996年哈肯·维姆·莱与伯特·波斯发布
CSS2：1998年发表
CSS2.1：2004～2011，使用最广泛
CSS3：1999年开始起草，分成了不同类别，称为“modules”
CSS4：不存在，从CSS3开始，所有子模块分开制定标准

2 常用工具网站

2.1 caniuse.com

Can I use提供了PC浏览器和手机端浏览器兼容情况的信息，如果你不确定某CSS特性在各个浏览器上的兼容情况，可以直接上这个网站查。

2.2 MDN

MDN是社区维护的前端开发技术文档，内容很新，有问题也会及时修改。我在学CSS的时候就给MDN CSS里的代码demo提过bug，很快就修复了

遇到不熟悉的东西，在搜索引擎搜索keyword MDN

2.3 css-tricks.com

专门收集CSS小技巧的网站
讲解flex
讲解grid

遇到不熟悉的东西，在搜索引擎搜索keyword css-tricks

2.4 zhangxinxu.com

遇到不熟悉的东西，在搜索引擎搜索keyword 张鑫旭

2.5 练习素材

dribbble.com是设计作品整体质量非常高的网站，许多摄影师、设计师和其他创意产业人士都喜欢在这里展示其未完成的设计，通过与其他设计师的共同探讨来激发自己的灵感。

freepik.com Free Vectors, Stock Photos, PSD and Icons

365psd.com UI套件

3 CSS 语法

CSS的语法很简单，主要就两种格式

语法一

选择器 {
    属性名:属性值;
    /*注释*/
}

区分大小写
分号建议不省略
注意单位

语法二

@charset "UTF-8";
@import url(default.css);
@media (min-width:100px) and (max-width:200px){
    * {
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    img{
        max-width:100%
    }
}

@charset必须放在第一行
前两个@一定要加分号

4 CSS 重要概念

4.1 内联，块，内联块

在HTML5的概念里，所有元素都可以是内联元素，所有元素也都可以是块级元素。看样式，比如display:inline;就是内联元素。但是浏览器默认会给span加样式display:inline;

4.2 文档流 Normal Flow

指的是元素正常的流动方向。span等内联元素正常是从左到右流动，div等块元素正常是从上到下。

流动方向

inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行
inline-block元素也是从左到右，但是内部单个元素不会折行

宽度

inline宽度为内部inline元素的和，不能用width指定
block默认自动计算宽度width:auto;，可以用width指定，注意它占满全行时并不意味着width:100%，我们给div加上margin:20px;它也是占满全行
inline-block宽度为内部元素的和，但可以用width指定

高度

inline高度由line-height间接确定，跟height和padding无关;span如果没有内容，高度是line-htight，padding不改变span的真实高度，div无法将padding的部分包进来
block高度由内部文档流元素决定，可以设置height。div如果没有内容，高度是0
inline-block跟block类似，可以设置height

总结一下

inline不能用height和width指定宽高，span既不接受高度，也不接受宽度
永远不要写width:100%
不要在inline元素里加block元素
div脱离文档流时，父元素在算高度时不会算它。脱离文档流的方法：position:absolute;或者float:left;或者position:fixed;
如果div中实际的内容高于div本身设置的高度怎么办？会发生overflow。
- overflow:visible 超出部分放那不用管，用户能看见
- overflow:hidden 超出部分不给用户看见
- overflow:scroll 不要用，不超出也有滚动条
- overflow:auto 没有超出就不现实滚动条，超出现实滚动条

4.3 盒模型

盒模型分两种，一种是content box，一种是border box。

两者的区别是，content box的宽度只包含内容content，而border box的宽度包含到border，即border box的宽度=content+padding+border。

CSS中不做box-sizing设置时，默认是content box

content box 内容盒

内容就是盒子的边界，width=内容宽度
CSS中不做box-sizing设置时，默认是content box

content box

border box 边框盒

边框是盒子的边界 width = 内容宽度 + padding + border
box-sizing:border-box;

border box

4.4 margin合并

margin collapsing

只有上下会重叠，左右从来不重叠

哪些情况会合并

父子margin合并，只有上下重叠，之间什么都没有就合并举例
兄弟margin合并，只有上下重叠，兄弟合并举例中间child1的margin-bottom和child2的margin-top合并到一起了

如何阻止合并

父子合并
- 用padding 挡住举例
- 用border挡住举例
- 用overflow:hidden挡住举例
兄弟合并是符合预期的，但是也可以用inline-block消除,举例

4.5 基本单位

4.5.1 长度单位

MDN font-size

px像素
em相对于自身font-size的倍数
百分数
整数
rem
vw 和vh

4.5.2 颜色

十六进制：淘宝色 #FF6600 或者#F60
RGBA颜色：rgb(0,0,0) or rgba(0,0,0,1)
hsl颜色：hsl(360,100%,100%)

5 CSS 布局

5.1 float布局

需要兼容IE9时考虑用这个布局

5.1.1 步骤

在子元素上加float:left 和 width
在父元素上加.clearfix

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

5.1.2 经验

留一些空间，或者最后一个不设width（或者max-width）
不需要做响应式，因为这个布局方法是为IE准备的，手机没IE，而且在手机上计算像素很麻烦
IE6/7存在双倍margin bug

5.1.3 实践

用float做两栏布局举例
用float做三栏布局
用float做四栏布局
用float做平均布局举例

注意最后一个例子中,图片背景下面多余一部分，用下面的代码去掉

.logo>img {
  height: 26px;
  vertical-align: top;
}

5.2 flex布局

CSStricks上的文章 a-guide-to-flexbox

使用flex布局实现上面的例子

5.2.1 container属性

让元素变成容器

.container {
    display:flex;
}

改变items流动方向(主轴)flex-direction: row|row-reverse|column|column-reverse;
控制折行 flex-wrap: nowrap|wrap;
主轴对齐方式 justify-content: flex-start|flex-end|center|space-between;
次轴对齐align-items: flex-start|flex-end|center|stretch|baseline;
多行内容布局（很少用）

5.2.2 items属性

指定item顺序

item:first-child{
    order:100;
}
item:nth-child(2){
    order:1;
}

让item长胖flex-grow
控制item变瘦flex-shrink
某个特立独行align-self

通关青蛙游戏:
https://flexboxfroggy.com/#zh-cn

5.2.3 经验

永远不要把width和height写死，除非特殊说明
用min-width,max-width,min-height,max-height
flex 可以基本满足需求
和margin-xxx:auto的配合,在后面写一个margin-xxx:auto相当于space-between

5.3 grid布局

尤其适合不规则布局

.container{
    display:grid;
}

通关 Grid Garden 游戏：
https://cssgridgarden.com/#zh-cn

6 CSS 定位

布局是在二维平面上的概念，而定位说的是垂直于屏幕的概念。

可以想像，垂直于屏幕，从上到下依次是举例

z-index > 0
内联元素
浮动元素
块级元素
border
background

6.1 position属性

举例

static默认值，会待在文档流里
relative相对定位，一般用来做爸爸
absolute一般基于祖先中最近的一个非static定位，一般是用relative
fixed固定定位，相对于视口定位，如广告，回到顶部按钮。手机上尽量不要用这个
sticky 粘滞定位，兼容性差

6.2 z-index

z-index和relative配合会自己创建一个层叠上下文，即自己的小世界，注意默认值z-index:auto不会创建
这个小世界里的所有z-index与外界无关
只有同一个小世界里的z-index才能比较
http://js.jirengu.com/gewob/1/edit?html,css,output

哪些元素可以创建层叠上下文

z-index 非auto
flex
opacity 不透明度，会影响里面所有元素
transform

注意：负index有可能逃不出小世界
http://js.jirengu.com/xoyuv/12/edit?html,css,output

6.3 经验

如果写了absolute,一般都得补一个relative
如果写了absolute或者fixed，一定要补too和left,不然有些浏览器会位置错乱
善用left100%
善用50% ,负margin
手机上不要用fixed
父元素若有transform:scale(0.9) ，fixed也会出错

7 浏览器的渲染原理

根据HTML构建DOM树
根据CSS构建CSSOM
合并DOM和CSSOM成render tree
Layout布局(文档流，盒模型，计算大小和位置)
Paint绘制（边框颜色、文字颜色、阴影……）
Composite合成（根据层叠关系展示画面）

三种不同的渲染方式

全走
跳过layout
跳过layout和paint

各个浏览器测试的每个属性怎么触发渲染流程：
https://csstriggers.com/

渲染性能优化：
https://developers.google.com/web/fundamentals/performance/rendering

8 CSS动画

帧
播放速度

将div从左向右移动

8.1 transform

位移translate
缩放scale
旋转roatte,360deg旋转制作loading效果
倾斜skew

注意

inline不支持transform,要先变成block
一般都需要transition过渡属性进行辅助

8.2 transition过渡

用来补充关键帧
红色方块逐渐透明示例

属性名 left
时长 200ms
过渡方式 linear
延迟

不是所有属性都能过渡

display:block => none直接消失了
visibility:visible => hidden最后才不见,还占着位置
background颜色可以过渡
opacity不透明度可以过渡，但不建议使用

8.3 Animation

方块向右再向下移动示例

关键帧
过渡