深入 CSS 笔记 ｜ 青训营

王立达114
92 阅读5分钟

选择器优先问题

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

1.png

继承

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

可继承的属性

不可继承的属性要想继承父元素，可以使用显式继承，即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 求值过程

2.png

3.png

4.png

布局 （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

5.png

6.png

margin

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

7.png

8.png

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

border-box

9.png 优点：更符合直觉

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 布局

10.png

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 的使用和一些有用的技巧，在学习以上知识后，更重要的是在实践中加强印象，如此方能更好打下前端技术的一大基础。

avatar
文章
阅读
粉丝