深入CSS | 青训营笔记

段昕怡
98 阅读5分钟

深入CSS | 青训营笔记

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

1、选择器的特异度（Specificity）

1. #nav .list li a:link
2. .hd ul .links a

在 1 中，id 选择器有 1 个（#nav），类与伪类共有 2 个（.list 与 :link，元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。

在 2 中，id 选择器有 0 个，类与伪类共有 2 个（.hd 与 .links）,元素与伪元素共有 2 个（ul 与 a）。所以在 2 中的特异度为 22。 因为，在 1 中的特异度为 122 大于在 2 中的特异度为 22 。

所以，在 2 中的选择器的优先级更高。

这一特性的妙用：进行属性覆盖实现代码的重复使用 ↓

<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>
 
<style>
.btn {
  display: inline-block; 
  padding: .36em .8em; 
  margin-right: .5em; 
  line-height: 1.5;
  text-align: center; 
  cursor: pointer; 
  border-radius: .3em; 
  border: none; 
  background: #e6e6e6; 
  color: #333;
}
 
.btn.primary { 
  color: #fff;
  background: #218de6;
}
 
</style>

效果如下：

image.png

 2、继承

    ① 某些属性会⾃动继承其⽗元素的计算值，除非显式指定⼀个值。

    ② 一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距等都不可以继承

  • 显式继承

如果一个属性不可继承，我们可以使用 inherit 这个关键字让它能从父级继承。如下例所示。

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget { 
  box-sizing: content-box; 
 }

由于html设置了 box-sizing 属性，如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。

值说明
content-box默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box设置的边框和内边距的值是包含在 width 内的。 width 包含元素的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
inherit指定 box-sizing 属性的值，应该从父元素继承。

  • 初始值

    • CSS 中，每个属性都有一个初始值

      • background-color 的初始值为 transparent
      • margin-left 的初始值为 0

    • 可以使用 initial 关键字显式重置为初始值

      • background-color : initial //此时的 background-color 为 transparent

3、布局

布局是确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算

3.1 布局相关技术

image.png

1. width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

2. height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效
image.png

3. padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度
image.png

4. border

指定容器边框样式、粗细和颜色

  • 三种属性

    • border-width
    • border-style
    • border-color

  • 四个方向

    • border-top
    • boder-right
    • border-bottom
    • border-left

当四条边框颜色不同时：

image.png

当盒子的高度和宽度都为0时：

image.png

4. margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

使用 margin : auto 可以实现水平居中

3.2 块级 vs. 行级

Block Level BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子 ，内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等span、em、strong、cite、code 等
display: blockdisplay: inline

3.3 常规流 Normal Flow

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

1. 行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

2. 块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

BFC 内的排版规则：

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

3.4 Flex布局

1、flex-grow

弹性盒子元素如何分配剩余空间，有剩余空间时的伸展能力

2、flex-shrink

超出父盒子的宽度，父盒子会自动压缩子盒子的宽度。

当给子盒子加上flex-shrink: 0，子盒子不会被压缩宽度；

3、flex-basis

没有伸展或收缩时的基础长度

3.5 Grid布局

  • display: grid 使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列
image.png
avatar
文章
阅读
粉丝