深入CSS | 青训营

用户6229784057860
37 阅读1分钟

选择器的特异度

image.png

样式继承

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

显示继承

image.png

初始值

image.png

CSS求值过程

image.png

盒子

image.png

常见样式

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 虽然a盒子的下边距是100px,b盒子的上边距是100px,但实际两个盒子之间相差100px,并不是200px

image.png

image.png

块级 & 行级

image.png

image.png

布局 Layout

image.png

布局方式

常规流

  1. 行级
  2. 块级
  3. 表格布局
  4. FlexBox
  5. Grid布局

浮动

绝对定位

常规流

image.png

image.png

image.png

image.png

flex 布局

image.png

image.png

image.png

image.png

image.png

image.png

Grid 布局

如果说Flex布局是一维的,Grid布局就是二维的 image.png

image.png

image.png

image.png

Float 浮动 目前主要用于文字环绕效果 image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝