深入CSS | 青训营笔记

Xianue
155 阅读6分钟

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

选择器优先级

根据选择器的特异度 特异度越高，优先级越高

选择器特异度.png

继承（某些属性在未指定值时会自动继承父级元素的计算值）

一般来说CSS中与文字相关的属性都是可继承的，与盒模型相关的属性不可继承

显式继承（让本不可继承的属性可以继承）inherit

显式继承.png

初始值

  • 在CSS中，每个属性都有其初始值
    • margin-left 初始值为0
    • background-color 初始值为 transparent
  • initial 将属性显式重置为初始值
    • background-color:initial

CSS求值过程

css求值过程.png

CSS布局

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

盒模型

盒模型.png

box-sizing: content-box（默认）

宽度与高度计算的是conten的宽和高

width 指定content box的宽度

  • 取值为长度，百分数，auto
  • auto由浏览器根据其他属性确定
  • 百分数是相对于其所处容器（父级）的content box的宽度

height 指定content box的高度

  • 前三条同上
  • 当其所处容器（父级）有指定的高度时，该元素属性设置的百分数才会生效

padding 指定元素四个方向的内边距

  • padding: 10px；四条边内边距都是10px
  • padding: 10px 20px；上下边为10px，左右为20px
  • padding: 10px 20px 30px 40px；顺时针方向 上10 右20 下30 左40
  • 百分数相对于其所在容器的宽度

border 指定容器边框的样式，粗细，颜色

  • 统一设置 border: 1px solid #ccc;
  • 四个方向
    • border-top: 1px solid #ccc;
    • border-right
    • border-bottom
    • border-left
  • 三种属性
    • 边框粗细（同padding） border-width: 1px 2px 3px 4px;
    • 边框实虚线 border-style：solid;
    • 边框颜色 border-color
  • 具体设置 border-left-width: 3px;

margin 指定元素四个方向的外边距

  • 取值可以是长度，百分数，auto
  • 百分数为相对于容器的宽度
  • 水平居中:
    • margin-left: auto;
    • margin-right: auto;
  • 外边距折叠（margin collapse）:
    • 当两盒子邻近且临近的两边都分别设置了外边距，实际两盒子之间的距离为两边距中较大的一个，而不是两者相加
    • 如上方盒子下边距为100px，下方盒子上边距为80px，则两盒子距离为100px

box-sizing: border-box

宽度与高度计算的是包含border和padding在内的空间的宽和高 里面content的宽高为指定宽高后减去border与padding之后的值

盒模型中常见布局结构

行级盒子（inline level box） display:inline

  • 盒模型中的width，hight不适用
  • 行级元素（span,em,strong,cite,code等）
    • 会生成行级盒子
    • 内容分散在多个行盒中

块级盒子（block level box）display:block

  • 不和其他盒子并列摆放
  • 所有盒模型属性均适用
  • 块级元素（body,article,div,main,section,h1-h6,p,ul,li等）
    • 会生成块级盒子

display属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身为行级，可以放在行盒中；可以设置宽和高；作为整体不会被拆成多行
  • none 排版时被完全忽略
  • flex 弹性布局
  • grid 网格布局

常规流（normal flow）

  • 根元素，浮动，绝对定位的元素会脱离常规流，其他元素在常规流中
  • 常规流中的盒子在某种排版上下文中参与布局

行级排版上下文（inline formatting context IFC）

  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则：
    • 盒子在一行中水平摆放
    • 一行放不下时换行显示
      • 当单词过长超出容器范围时将单词断开 overflow-wrap: break-word;
    • 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排版上下文（flex box）【单一方向】

  • 控制子级盒子摆放的流向flex-direction

    • 从左到右 row （默认）
    • 从右到左 row-reverse
    • 从上到下 column
    • 从下到上 column-reverse

  • 控制子级盒子水平和垂直方向上的对齐

    • 水平方向（主轴）justify-content

      • 左边对齐 flex-start
      • 右边对齐 flex-end
      • 居中对齐 center
      • 分散对齐 space-between（间隔留空）
      • 分散对齐 space-around（间隔，两边留空）
      • 分散对齐 space-evenly（均匀留空）

    • 垂直方向（侧轴）align-items

      • 顶端对齐 flex-start
      • 底端对齐 flex-end
      • 中线对齐 center
      • 伸展对齐 stretch
      • 基线对齐 baseline

    • 单独设置对齐方式 align-self

    • 为每个子级盒子排序 order

      • order: x 规定子级盒子的顺序（默认值为0）
      • order: initial 为默认值
      • order: inherit 继承父级元素该属性值

  • 设置子项盒子的弹性（flexibility）

    • flex-grow 有剩余空间时的伸展能力
      • flex-grow: x;
      • 父级空间有600，a,b,c子盒子均为100；x(a)为2，x(b)为1，x(c)为0；则将父级空间减去300，再将剩余空间按2:1比例分给a和b
    • flex-shrink 容器空间不足时收缩的能力
    • flex-basis 没有伸展或收缩时的基础长度
    • flex 缩写
flex.png
  • 在空间不够时是否允许换行flex-wrap
    • nowrap 不允许换行（默认）
    • wrap 允许在需要时换行
    • wrap-reverse 允许在需要时以反方向换行

Grid排版上下文【二维布局】

  • 划分网格（auto自动补全 fr相对份数）

    • grid-template-columns: 100px 100px 200px;
      grid-template-rows: 100px 100px;
    • grid-template-columns: 30% 30% auto;
      grid-template-rows: 100px auto;
    • grid-template-columns: 100px 1fr 1fr;
      grid-template-rows: 100px 1fr;

  • 指定网格区域（通过网格线：横线开始 竖线开始 横线结束 竖线结束）

网格1.png

网格2.png

float 浮动

实现图文混排时文字环绕 如float: left;图片左浮动

position

  • static 默认值
  • relative
    • 该元素在常规流中布局
    • 使用top,left,bottom,right设置偏移长度，相对于自身本应该在的位置进行定位
    • 流内其他元素按照该元素没有发生偏移进行布局
  • absolute
    • 该元素脱离常规流
    • 使用top,left,bottom,right设置偏移长度，相对于最近的非static祖先（容器）进行定位
    • 不会对流内元素布局产生影响
  • fixed
    • 该元素脱离常规流
    • 使用top,left,bottom,right设置偏移长度，相对于窗口进行定位（页面滚动时窗口固定，因此元素固定）
  • sticky
    • 在目标区域以内，它的行为就像 position:relative;
      在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；
      position:sticky这时的效果相当于fixed定位，固定到适当位置
    • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素
      如果祖先元素不可以滚动，那么是相对于viewport来计算元素的偏移量
avatar
文章
阅读
粉丝