note

【第二届字节青训营】理解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 值为 layout、content或 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相关属性将容器分为网格
  • 设置每一个子项占哪些行/列

参考