CSS小结

Jeffrey張
350 阅读8分钟

本文内容：

  1. CSS基础知识
  2. 文档流 Normal Flow
  3. 盒模型
  4. CSS布局
  5. 浏览器渲染原理
  6. CSS 动画的两种做法（transition 和 animation）

一、CSS基础知识

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

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

会用到的工具

caniuse.com

Can I use提供了PC浏览器和手机端浏览器兼容情况的信息，当不知道某CSS特性在各个浏览器上的兼容情况，可以在这个网站查。

css-tricks.com

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

张鑫旭

在搜索引擎搜索keyword 张鑫旭

练习素材

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

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

365psd.com UI套件（免费）

CSS语法

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

border调试法

当怀疑某个元素有问题，就给这个元素加border，border没出现，说明选择器错了或者语法错了，border出现，看看边界是否符合预期，bug解决了才可以吧border删除。

二、文档流 Normal Flow

文档流是相对于盒子模型讲的

文本流是相对于文子段落讲的

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念

在HTML5的概念里，所有元素都可以是内联元素 inline，所有元素也都可以是块级元素 block。

文档流指的是元素正常的流动方向,也被叫做正常流。span等内联元素正常是从左到右流动，div等块元素正常是从上到下。

流动方向：

  • inline元素从左到右，到达最右边才会换行

  • block元素从上到下，每一个都另起一行

  • inline-block也是从左到右（但是不会跨两行分开）

  • 不要在inline元素里面写block元素（没人会这样做）

宽度：

  • inline宽度为内部inline元素的和，不能用width指定。

  • block默认自动计算宽度width:auto（不是占满屏），可用width指定。（永远不要写宽度100%）

  • inline-block结合前两者特点，宽度为内部元素的和,可用width（宽度是自适应的）

  • 个人理解：inline和inline-block区别就是前者没有盒模型，后者有盒模型

高度：

  • inline高度有line-height（行高）间接确定，跟height无关,span如果没有内容，高度是line-htight，padding不改变span的真实高度，div无法将padding的部分包进来

  • block高度由内部文档流元素决定，可以设height,div如果没有内容，高度是0

  • inline-block跟block类似，可以设height

脱离文档流

这两个元素可以脱离文档流：float、position：absolute/fixed

不使用上面两个元素就不脱离文档流

注意事项

  • inline不能用height和width指定宽高，span既不接受高度，也不接受宽度
  • 永远不要写width:100%
  • 不要在inline元素里加block元素
  • div脱离文档流时，父元素在算高度时不会算它。脱离文档流的方法：position:absolute;或者float:left;或者position:fixed;
  • 如果div中实际的内容高于div本身设置的高度(当内容宽度或高度大于容器宽度或高度)会发生overflow 溢出，可以用overflow设置是否显示滚动条。
    • overflow:visible 直接显示溢出部分
    • overflow:hidden 直接隐藏溢出部分
    • overflow:scroll 永远显示，（不要用，不超出也有滚动条）
    • overflow:auto 灵活设置，没有超出就不现实滚动条，超出现实滚动条

三、盒模型

盒模型有四个东西：

  1. 内容
  2. padding（你的边框到你内容的距离）
  3. border（你的边框）
  4. margin（你和别人的距离）

盒模型分两种，分别是：

  • content-box 内容盒-内容就是盒子的边界
  • border-box 边框盒-边框才是盒子的边界box-sizing:border-box;

公式：

  • content-box 的宽度 width ：表示内容区的宽度，不包含 padding 和 border；
  • border-box 的宽度 width ：表示内容区 + padding + border 的总和。
  • 一般优先使用后者，CSS中不做box-sizing设置时，默认是content box。

margin合并：

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。

  • 哪些情况会合并

  1. 父子margin 合并

  2. 兄弟margin 合并

    只会在上下重叠合并，不会在左右重叠合并

    合并的前提是他们中间什么都没有，所以以下加了东西就可以阻止合并

  • 如何阻止合并
  1. 父子合并用padding/border挡住
  2. 父子合并用overflow：hidden挡住
  3. 父子合并用display：flex，不知道为什么
  4. 兄弟合并是符合预期的
  5. 兄弟合并可用inline-block消除
  6. 每条都死记，CSS的属性逐年增多，每年都可能有新的

基本单位：

长度单位：

  1. px像素
  2. em相对于自身font-size的倍数
  3. 百分数
  4. 整数
  5. rem:等你把em滚瓜烂熟了再问rem
  6. vw和vh
  7. 其他长度单位都用的少，不用了解

颜色：

  1. 十六进制#FF6600或者#F60
  2. RGBA颜色rgb（0,0,0）或者rgb（0,0,0,1）
  3. hsl颜色：hsl（360,100%,100%）

四、CSS布局

float布局: 需要兼容IE9时考虑用这个布局,不做详细解释，线下笔记。

flex布局（兼容老游览器）：

教程：CSStricks上的文章 flex青蛙游戏

父元素：container（容器）

声明：

.container {
   display:flex;
}

子元素：items

这段代码指定了顺序

item:first-child{
    order:100;
}
item:nth-child(2){
    order:1;
}
  • 让item长胖flex-grow
  • 控制item变瘦flex-shrink
  • 某个特立独行align-self

重点：

  • display:flex（声明用的这个 ）
  • flex-direction: row / column（表示container子元素是横着还是竖着的流动方向）
  • flex-wrap: wrap（表示你是否换行）
  • just-content: center / space-between（表示你在主轴的居中还是对齐）
  • aligen-items: center（表示你的纵轴是居中还是对齐）
  • 以上都是工作中基本会用到的

经验

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

Grid 布局、简单语法

尤其适合不规则布局,Grid也分container和items

青蛙游戏语法教程 CSStricks上的文章

声明：

.container {
	display: grid 或者inline-grid;
}

行和列写法：

.container {
    grid-template-columns:40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
}

五、浏览器渲染原理

  1. 根据HTML构建HTML树（DOM）
  2. 根据CSS构建CSS树（cssom）
  3. 将两棵树合并成一颗渲染树（rendertree）
  4. layout布局（文档流、盒模型、计算大小和位置）
  5. paint绘制（把边框颜色、文字颜色、阴影等画出来）
  6. composite合成（根据层叠关系展示画面）

三种不同的渲染方式

  1. 全走
  2. 跳过layout
  3. 跳过layout和paint

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

浏览器将页面渲染好之后，后面是如何动态更新样式的：

  • 通过javascript动态更新
  • 根据选择器匹配对应的DOM，计算出style是布局还是样式，如下图所示：
  1. 如果是更改布局，是会依次触发
  2. 如果布局没有改动，只是更改了颜色之类的，layout将不会触发
  3. 如何既不改布局，也不改样式啥的，layout和paint都不会触发，只会触发最后的composite部分，比如动画

六、CSS动画

CSS 动画的两种做法（transition 和 animation）

  • transform属性的四个常用功能
  1. 位移translate
  2. 缩放scale
  3. 旋转rotate
  4. 倾斜skew

经验：一般都需要配合transition过度，inline元素不支持transform，需要先变成block。

案例hover红心

  • transition 过渡

作用：补充关键帧

不能过度的：

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

案例自跳动红心

  • Animation

作用：用来指定一组或多组动画，每组之间用逗号相隔。

avatar
文章
阅读
粉丝