首页

# 选择器优先问题

越特殊，选择器优先级越高

image-20230729164420520

# 继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

可继承的属性

不可继承的属性要想继承父元素，可以使用显式继承，即 inherit

一、css 不可以继承的属性

display、

margin、padding、border、

background、

width、min-width、max-width、height、min-height、max-height、

overflow、

position、top、bottom、left、right、z-index、

float、clear、table-layout、vertical-align、

page-bread-before、page-bread-after、unicode-bidi

二、所有元素都可以继承

visibility、

cursor

三、子元素可以继承

letter-spacing（字符间距）

word-spacing（单词间距）

white-space（如何处理元素内的空白）

line-height（设置行高，内联元素不可以继承，设置为行内块元素可以继承）

color、font、font-size、font-family、font-style、font-weight、font-variant（大写字母）

text-decoration（文本下划线、中划线）、text-transform（首字母大写、转大写）、direction（rtl - 文本方向从右向左）

text-indent（首行缩进）、text-align（文本对齐）

四、列表元素（li）可继承

list-style、list-style-type、list-style-position、list-style-image

五、表格元素可继承

border-collapse

# 初始值

  • CSS 中，每个属性都有一个初始值
    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0
  • 可以使用 initial 关键字显式重置为初始值
    • background-color: initial

# CSS 求值过程

image-20230729165305490

image-20230729165718234

image-20230729165746394

# 布局 （Layout）

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

# 布局相关技术

  • 常规流

    • 行级
    • 常规流
    • 块级
    • 表格布局
    • FlexBox
    • Grid 布局

  • 浮动

  • 绝对定位

# width

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

# padding

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

# border

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

  • 三种属性

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

  • 四个方向

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

image-20230729170736299

image-20230729170745069

# margin

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

image-20230729171051075

image-20230729171219473

margin collapse 出现在上面元素有下外边距，且下面元素有上外边距时，此时会选这两者的最大值作为它们之间的距离

# border-box

image-20230729171503395

优点：更符合直觉

# overflow

  • visible 全显示
  • hidden 截取
  • stroll 始终有滚动条
  • auto 需要时有滚动条

# 块级 vs. 行级

  • Block Level Box
    • 不和其它盒子并列摆放
    • 适用所有的盒模型属性
  • Inline Level Box
    • 和其它行级盒子一起放在一行或拆
      开成多行
    • 盒模型中的 width、height 不适用

块级元素

  • 生成块级盒子
    • body、article、div、main、
      section、h1-6、p、ul、li 等
    • display: block

行级元素

  • 生成行级盒子
  • 内容分散在多个行盒 (line box) 中
    • span、em、strong、cite、code 等
    • display: inline

# display

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略

# 常规流 Normal Flow

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

  • 行级排版上下文
  • Flex 排版上下文
  • 块级排版上下文
  • Grid 排版上下文
  • Table 排版上下文

# 行级排版上下文

Inline Formatting Context (IFC)

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

# 块级排版上下文

Block Formatting Context (BFC)

  • 某些容器会创建一个 BFC

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

  • BFC 内的排版规则

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

# Flex Box

  • 一种新的排版上下文
  • 它可以控制子级盒子的
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

# Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

# Grid 布局

image-20230729173804073

# display: grid
  • 使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行 / 列

# Flow

作用：做文字环绕图片的效果

可以用 flexbox 代替

# Position

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非 static 祖先元素定位
  • fixed 相对于视口绝对定位

# position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

# position: absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

# 学习 CSS 的几点建议

  • 充分利用 MDN 和 W3C CSS 规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS 新特性还在不断出现

# 总结

本节课深入介绍了 CSS 的使用和一些有用的技巧，在学习以上知识后，更重要的是在实践中加强印象，如此方能更好打下前端技术的一大基础。

更新于 阅读次数 次