【第二届字节青训营】理解CSS笔记

参加了字节跳动的第二届青训营,寒假前端场,本文为《理解CSS》的笔记。

css用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

继承

某些属性会自动继承其父元素的属性,除非显示指定box-sizing: inherit,即设置为显式继承。

初始值

  • CSS中的每个属性都有一个初始值,
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显式地将某个属性重置为其初始值,如:background-color:initial;
  • 若将盒子模型的外边距、边框和内边距的大小设置为百分数,则是以其父元素的宽度为准的;若将盒子模型的宽度设置为百分数则是以其父元素的宽度为准的,若将盒子模型的高度设置为百分数,则是以其父元素的高度为准的,但是其元素要设置高度才可以。

求值过程

image.png

布局layout

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

  • CSS中的布局技术有三大类
    (1)常规流(文档流)
    (2)浮动
    (3)定位

position

  • 在常规流里布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top,left,right,bottom设置偏移长度
  • 流内其他元素当它没有偏移一样布局
  • position属性
    • static,默认值,非定位元素
    • relative,相对自身原本位置偏移,不脱离文档流
    • absolute,绝对定位,相对非static祖先元素定位
    • fixed,相对视口绝对定位

BFC

  • 一个独立渲染区域。
  • 块元素和行内元素是HTML的概念,在CSS中,由于内置了dispaly属性,块元素默认会生成块级盒子,行内元素会默认生成行级盒子,也可以自定义使用display属性来改变盒子的属性。
  • 最常用的设置BFC方法 overflow: hidden
  • 创建块格式化上下文
    • 根元素(<html>)
    • 浮动元素(元素的 float 不是 none
    • 绝对定位元素(元素的 position 为 absolute 或 fixed
    • 行内块元素(元素的 display 为 inline-block
    • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
    • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
    • 匿名表格单元格元素(元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table
    • overflow 计算值(Computed)不为 visible 的块元素
    • display 值为 flow-root 的元素
    • contain 值为 layoutcontent或 paint 的元素
    • 弹性元素(display 为 flex 或 inline-flex元素的直接子元素)
    • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
    • 多列容器(元素的 column-count 或 column-width (en-US) 不为 auto,包括 ``column-count 为 1
    • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更Chrome bug)。

flex

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

grid

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

参考