深入CSS | 青训营笔记

用户1716310442438
69 阅读4分钟

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

选择器的特异度

  • 特异度越高，优先级越高
#.E
id（伪）类标签

继承

  • 某些属性会自动继承其父元素的计算值，除非显示指定一个值
  • 一般关于文字的属性都可继承，盒模型的一般不可继承
 <p>This is a <em>test</em>of<strong>inherit</strong></p>
 ​
 <style>
   body {
     font-size: 20px;
   }
   p {
     color: blue;
   }
   em {
     color: red;
   }
 </style>

显式继承inherit

  • 把不可继承的变为可继承的

    • 盒模型为例

      • border-box
      • content-box

初始值

  • background-color: transparent;
  • margin-left: 0;

显式重置初始值initial

  • background-color: initial;

C SS求值

img

布局

布局方式

  • 常规流

    • 行、块级
    • 表格布局
    • Flex Box
    • Grid布局

  • 浮动

  • 绝对定位

盒模型

  • width、height

    • 取值为长度、百分数(容器有指定宽/高度时才生效)、auto

padding（内边距）

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

border(边框)

  • 指定容器边框样式、粗细和颜色
  • 三属性（width、style、color）
  • 四方向（top、right、bottom、left）

margin（外边距）

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

使用margin : auto水平居中

 margin-left:auto;
 margin-right:auto;

margin collapse

  • 在垂直方向上边距合并，取较大值

box-sizing : content-box

image-20230116214604085

box-sizing : border-box

image-20230116215008716

overflow

  • 文本超出盒子

    • visible：显示到盒外
    • hidden：隐藏
    • scroll：盒内可滚动
    • auto：能在盒内显示则显示，不够显示则滚动

块级和行级

块级行级
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
盒模型性质适用width、height不适用
块级元素行级元素
生成块级盒子生成行级元素；内容分散在多个行盒中
body、article、div等span、em、strong、cite、code等
display : blockdisplay : inline

display属性

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

常规流布局

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

行级排版上下文IFC

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

块级排版上下文BFC

  • 某些容器会创建一个BFC

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

  • BFC内的排版规则

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

Flex排版上下文 display : flex

  • 可以控制子级盒子的：

    • 摆放流向（左右还是上下）
    • 摆放顺序
    • 盒子宽高
    • 水平垂直方向的对齐
    • 是否允许折行

justify-content 主轴（左右）

image-20230117221654611

align-items 侧轴（上下）

image-20230117221916538

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间的时候，会伸展（flex-grow）；容器空间不够时，会收缩（flex-shrink）。flex-basis：没有伸展或收缩时的基础长度。
  • flex : ? ? ?px (grow shrink basis)
  • flex : auto = 1 1 auto
  • flex : none = 0 0 auto

Grid排版上下文 display : gird

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

grid area 网格区域

image-20230117230346631

image-20230117230456866

float浮动

  • 实现文字环绕效果

绝对定位布局

position属性

  • static : 默认值，非定位元素

  • relative : 相对自身原本位置偏移，不脱离文档流

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

  • absolute : 绝对定位，相对非static祖先元素定位

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

  • fixed : 相对于视口绝对定位

个人总结

  • 把选择器特异度顺序记清，方便判断特异度大小

  • 了解盒模型的基本概念

  • 理解三种布局方式、四种常规流布局方式

avatar
文章
阅读
粉丝