第六届字节跳动青训营第三课 ｜ 青训营

Sixteen
129 阅读6分钟

深入CSS（上）|青训营

继承

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

显示继承

  • 让不可继承变成可继承
*{
    box-sizing:inherit;//box-sizing:不可继承属性
}
  • 一般和文字相关的是可继承的，和盒模型相关的是不可继承的
  • 当一个元素是不可继承的，它是会用到初始值，或许可继承但没有继承到，也会使用到初始值

初始值

  • CSS中，每个属性都有一个初始值

    • background-color的初始值为transparent
    • margin-left的初始值是0

  • 可以使用initial关键字显示重置为初始值

    • background-color:inital

CSS求值过程

  1. DOM树

  2. filtering：对应用到该页面的规则用一下条件进行筛选：选择器匹配，属性有效，符合当前media等

  3. 声明值：Declared Values，一个元素的某属性可能有0到多个声明值。eg：

    p{
    font-size:16px;
}
​
p.text{
    font-size:1.2em;
}

  4. cascading:按照来源！important、选择器特异性、书写顺序等选出优先级最高的一个属性值

  5. 层叠值：cascaded value,在层叠过程中，赢得优先级比赛的那个值eg：1.2em

  6. defaulting：当层叠值为空的时候，继承或初始值

  7. 指定值：Specified Value,经过cascading和defaulting之后，保证指定值一定不为空

  8. resolving：将一些相对值或者关键字转化成绝对值，eg：em转化为px，相对路径转化为绝对路径

  9. 计算值：Computed Value，一般来说，浏览器会在不进行实际布局的情况下，所能得到的最具体的值，eg60%

  10. formatting：将计算值进一步转换，eg：关键字、百分比等转换为绝对值

  11. 使用值：Used Value，进行实际布局时使用的值，不会再有相对值或关键字 eg：400.2px

  12. constraining：将小数像素值转为整数

  13. 实际值：渲染时实际生效的值 eg400px

布局（layout）是什么

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

布局相关技术：

  • 常规流
  • 浮动
  • 绝对定位

width

  • 指定content box宽度
  • 取值为宽度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽度

height

  • 指定content box高度
  • 取值为高度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box高度
  • 容器有指定的高度时，百分数才生效

padding

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

border

  • 指定容器边框样式、粗细和颜色

  • 三种属性：

    border-width

    border-style

    border-color

  • 四个方向

    border-top

    border-bottom

    border-left

    border-right

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin：auto水平居中

深入CSS（下）

块级vs行级

  • block level box

不和其他盒子并列摆放

适用所有的盒模型属性

  • Inline level box

和其他行级盒子一起放在一行或拆开成多行

盒模型中width、height不同

display属性

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

常规流 Normal Flow

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

行级排版上下文

  • inline formatting context（IFC）

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

  • IFC内的排版规则

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

不可分割换行

overflow-wrap:break-word;

块级排版上下文

  • block formatting context（BFC）

  • 某些容器会创建一个BFC

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

BFC内的排版规则

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

Flex Box是什么

  • 一种新的排版上下文

  • 可以控制子级盒子的：

    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

Flexibility

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

Grid布局

Flex Box是单一的布局

1690881989421

Grid是一个二维的布局

1690881999121

display：grid

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

划分网格

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

1690882455473

grid line网格线

1690882482519

.a{
    grid-row-start:1;
    grid-column-start:1;
    grid-row-end:3;
    grid-column-end:3;
}
​
.a{
    grid-area:1/1/3/3;    
}
​
.a{
    grid-area:2/2/4/4;
}
.b{
    grid-area:1/1/3/3;
}

float浮动

为了实现文字环绕的效果

float：left

position属性

  • static 默认值，非定位元素
  • relative 相对于自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非static祖先元素定位
  • fixed 相对于视口绝对定位

position：relative

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

1690883472658

position：absolute

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

position fixed

  • 总是相对于所谓的窗口进行定位

学习CSS的几点建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS新特性还在不断出现

感受

学习这节课，我了解了继承、初始值、以及内外边距等等等等。继续努力，我应该多加实践。

avatar
文章
阅读
粉丝