CSS 知识总结

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合并到一起了

如何阻止合并

  • 父子合并
  • 兄弟合并是符合预期的，但是也可以用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 浏览器的渲染原理

  1. 根据HTML构建DOM树
  2. 根据CSS构建CSSOM
  3. 合并DOM和CSSOM成render tree
  4. Layout布局(文档流，盒模型，计算大小和位置)
  5. Paint绘制（边框颜色、文字颜色、阴影……）
  6. 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

方块向右再向下移动示例

  • 关键帧
  • 过渡
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,123评论 0赞 26
  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,893评论 0赞 6
  • CSS知识总结
    一、CSS简介 CSS，全拼Cascading Style Sheets，层叠样式表，是由Tim Berners ...
    浪味仙儿啊阅读 3,034评论 0赞 1
  • H5移动端知识点总结
    阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 5,468评论 0赞 1
  • [谈谈情]第二年七夕
    “人的一生总会遇到两个人，一个惊艳了时光，一个温柔了岁月”，四哥对我来说是哪种呢？好像两种都有，又好像两种都没有。...
    我是hua仙子阅读 1,339评论 0赞 0