理解CSS | 青训营笔记

橘子味雪糕
152 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

本文主要补充作者不了解的一些知识

CSS是如何工作的

选择器

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

<input type="text" disabled>
<input type="password" value="">
<p><a href="#top">TOP</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  [disabled] {
    background-color: blue;
  }

  /* 以# 号开头 */
  a[href^="#"] {
    color: red;
  }

  /* 以.jpg 结尾 */
  a[href$=".jpg"] {
    color: green;
  }
  
  // 更多属性匹配方式请查看文档
</style>

伪类选择器

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>


<style>
  li{
     border-bottom: 4px solid #ccc;
  }
  li:first-child{
    color: red;
  }
  li:last-child{
    color: blue;
    border-bottom: none
  }
  li:nth-child(2){
    color:orange;
    font-size: 38px;
    font-weight:bold
  }
</style>

组合

名称语法说明示例
直接组合AB满足A的同时满足B
- input:focus
- <a class="A B"/>
后代组合A BB是A的子孙元素，
A包含的所有B都会应用这个样式
- nav a
- <nav>
<a/> <br /> <p><a/></p><br /><nav/>
亲子元素A>BB是A的直接子元素<div><a/><div/>
兄弟选择器A~BB和A同级<h2></h2><p></p>
相邻选择器A+BB紧跟在A的后面h2+P

选择器组

用逗号分隔

h1, h2, h3{
  color:red;
}

.div1,.div2,.div3{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin: 10px;
}

特异度（Specificity）- 权重

权重计算规则

  1. 第一优先级：!important会覆盖页面内任何位置的元素样式，权重值为无限
  2. 内联样式，如 style="color: green"，权值为1000
  3. ID选择器，如#app，权值为 0100
  4. 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
  5. 标签、伪元素选择器，如div::first-line，权值为0001
  6. 通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
  7. 继承的样式没有权值
  8. 相同的权重：以后面出现的选择器为最后规则
  9. 不同的权重：权重值高则生效
  10. 与元素“挨得近”的规则生效 | | style内联样式 | #id | .(伪)类 属性选择器 | E 标签 | 权重值 | | --- | --- | --- | --- | --- | --- | | #nav .list li a:link | 0 | 1 | 2 | 2 | 0122 | | .hd ul.links a | 0 | 0 | 2 | 2 | 0022 | | <p style="color: red"></p> | 1 | 0 | 0 | 0 | 1000 |

权重记忆口诀
从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

注意事项：这里的权重可以理解成 122``22``1000 数值越高权重越大

颜色

RGB

rgb 使用范围广 但是没有办法直观的看到颜色

  • #00000000
  • rgb(0,0,0,0)
  • 前三个参数分别对应三原色（0-255）
  • 第4个参数代表透明度 （老版本浏览器需要使用rgba 才能支持第4个参数）

HSL

hsl(Hue,Saturation,Lightness)

  • Hue
    • 色相是色彩的基本属性，如红色、黄色等；取值范围时 0-360
  • Saturation
    • 饱和度，是只色彩的鲜艳程度，越高颜色越鲜艳；取值范围是 0-100%
  • Lightness
    • 亮度是指颜色的明亮成度，越高越亮；取值范围是 0-100%

字体 font-family

h1{
  font-family:Optima,Georgia,serif;
}
p{
  font-family:Helvetica,sans-serif;
}

通用字体族

  • Serif 衬线体
    • Georgia、宋体
  • Sans-Serif 无衬线体
    • Arial、Helvetica、黑体、微软雅黑
  • Cursive 手写体
    • Caflisch Script、楷体
  • Fantasy 艺术字
    • Comic Sans MS
  • Monospace 等宽字体
    • Consolas、Courier、中文字体

注意事项：一定要在最后加上一个通用的字体族 （建议 sans-serif）

CSS 求值过程

image

布局相关技术

边距折叠 （margin collapse）

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }
  
  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

image

  • 外边距叠加存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。
  • 只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。

水平边距永远不会坍塌。

解决方法：BFC

  • BFC (Block Formatting Context)，中文叫块级格式上下文。
  • 触发BFC方法：
    • float属性为left/right
    • overflow为hidden/scroll/auto
    • position为absolute/fixed
    • display为inline-block/table-cell/table-caption

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局
    • 行级排版上下文
    • 块级排版上下文
    • Table 排版上下文
    • Flex 排版上下文
    • Grid 排版上下文

行级排版上下文

  • Inline Formatting Context （IFC）
  • 只包含行级盒子的容器会创建一个 IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的的垂直对齐
    • 避开浮动（float）元素

点击查看【codepen】

块级排版上下文

  • Block Fromatting Context （BFC）
  • 某些容器会创建一个 BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • overflow值不是 visible的块盒
    • display:flow-root
  • BFC 内的排版规则
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin不会与外面的合并
    • BFC 不会和浮动元素重叠

Flex 布局 （重点）

网页布局（layout）

Grid 布局 （重点）

网页布局（layout）

浮动 Float

  • 脱离文档流
  • 文字环绕 （目前只需要记住这一个应用场景）

浮动

Position

  • relative
    • 相对于自己本来应该在的位置进行偏移
    • 在常规流的布局里面
  • absolute
    • 绝对定位，相对非 static祖先元素定位
    • 会脱离文档流
  • fixed
    • 相对视口绝对定位
avatar
文章
阅读
粉丝