深入CSS | 青训营笔记

vincyda
101 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第六天

选择器的特异度(Specificity)

id# > （伪）类. > 标签E

继承

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

  • 显式继承
* {
    box-siziong: inherit;
}
html {
    box-siziong: border-box;
} 
.some-widget {
    box-siziong: content-box;
}

初始值

  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显式重置为初始值
    • background-color：initial

CSS求值过程

1659100762301.png

布局(layout)是什么？

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

布局相关技术

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

相关元素属性

1659101907660.png width

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box height
  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box高度
  • 容器由指定的高度时，百分数才生效

1659101930344.png padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度 border
  • 指定容器边框样式、粗细和颜色
  • 三种属性
    • border-width
    • border-style
    • border-color
  • 四个方向
    • border-top
    • border-right
    • border-bottom
    • border-left margin
  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • margin是实现水平居中
<div></div>
<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

块级VS行级

块级

  • Block Level Box
  • 不和其他盒子并列摆放
  • 适用所有的盒模型
  • 生成块级盒子
  • body、div、h1-h6、p、ul、li
  • display：block 行级
  • Inline Lever Box
  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用
  • 生成行级盒子，内容分散在多个行盒(line box)中
  • span、em、strong
  • display:inline dispaly属性
  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none 排版时完全被忽略

常规流 Normal Flow

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

1659103220240.png 行级排版上下文

  • Lnline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对其
    • certical-align决定一个盒子在行内的垂直对齐
    • 避免浮动(floas)元素* 块级排版上下文
  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root BFC内的排版规则
  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BDC不会和浮动元素重叠 **Flex Box是什么？
  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行 flex-direction

1659103765902.png

主轴与侧轴

1659103825525.png justify-content

1659103866859.png alingn-items

1659103901871.png **align-self

1659103927469.png order

1659103951694.png Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

Grid布局？

1659104246967.png display:grid

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

1659104380972.png grid line 网格线

1659104417892.png grid area 网格区域

1659104474598.png

position属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非static祖先元素定位
  • fixed 相对于视口绝对定位 position：relative
  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其他元素当它没有偏移一样布局 position：absolute
  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响
avatar
文章
阅读
粉丝