深入CSS | 青训营笔记

小塔_Zrea
92 阅读4分钟

深入CSS | 青训营笔记

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

盒模型

image-20220726134306291.png

  • width

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

  • height

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

image-20220726134701545.png

设置一个值，两个值，四个值的区别

  • boder

    • 三种属性

      • border-width
      • border-style
      • border-color

    • 四个方向

      • border-top
      • boder-right
      • border-bottom
      • border-left

当四条边框颜色不同时，宽高为零，变成四个三角形组合而成的正方形，由此绘制三角形

  • margin

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

其中，可以使用 margin:auto 水平居中

margin collapse 外边距折叠

box-sizing:border-box 把内容、内边距、边距和为一体

image-20220726135640151.png

overflow 控制溢出内容

overflow:●visible 显示●hidden 隐藏● scroll 溢出内容滚动显示

块级和行级的区别
Block Level BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆 开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子-生成行级盒子 -内容分散在多个行盒(line box)中
body、article、div、main、 section、.h1~h6、p、ul、li等span、em、strong、cite、code等
display:blockdisplay:inline

可以使用 display 属性进行更改

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

常规流Normal Flow

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

  • Inline Formatting Context(IFC)

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

  • IFC内的排版规则

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

行级上下文中 overflow-wrap 默认normal值，可选break-word

normal模式下，单词过长会溢出，但是break-word模式下，单词过长就在单词内换行

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

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

  • BFC内的排版规则

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

Flex排版上下文

  • Flex Box是什么？

    • 一种新的排版上下文

    • 它可以控制子级盒子的：

      • 摆放的流向（→←一↑↓）
      • 摆放顺序
      • 盒子宽度和高度
      • 水平和垂直方向的对齐
      • 是否允许折行

image-20220726141931342.png

image-20220726141956424.png

image-20220726142041449.png

image-20220726142212198.png

flex-grow 规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例

flex:1flex-grow:1
flex:100pxflex-basis:100px
flex:2 1flex-grow:2;flex-shrink:1
flex:1 100pxflex-grow:1;flex-basis:100px
flex:2 0 100pxflex-grow:2;flex-shrink:0;flex-basis:100px
flex:autoflex:1 1 auto
flex:noneflex:0 0 auto

Grid布局

image-20220726143512971.png

二维排版布局

  • display:grid

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

  • grid line网格线

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

  • position:position

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

  • position:absolute

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

学习CSS的几点建议

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

\

avatar
文章
阅读
粉丝