CSS相关

（查缺补漏）

BFC.1 BFC基本概念

  1. BFC: 块级格式化上下文
    BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
    父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。

  2.  BFC原理（渲染规则|布局规则）：

    （1）内部的Box会在垂直方向，从顶部开始一个接着一个地放置；
    （2）Box垂直方向的距离由margin(外边距)决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
    （3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
    （4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置float；
    （5）BFC 的区域不会与float Box重叠（清浮动）;
    （6）计算BFC的高度时，浮动元素也参与计算。

  3. CSS在什么情况下会创建出BFC（即脱离文档流）

    0、根元素，即 HTML 元素（最大的一个BFC）
    1、浮动（float 的值不为 none）
    2、绝对定位元素（position 的值为 absolute 或 fixed）
    3、行内块（display 为 inline-block）
    4、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性)
    5、弹性盒（display 为 flex 或 inline-flex）
    6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

  4. BFC作用（使用场景）

    1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
    2、避免元素被浮动元素覆盖
    3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）
    4、去除边距重叠现象，分属于不同的BFC时，可以阻止margin重叠

IFC

  1. IFC基本概念——行内格式化上下文

    IFC基本概念：

2 IFC原理（渲染规则|布局规则）：

（1）内部的Box会在水平方向，从含块的顶部开始一个接着一个地放置；
（2）这些Box之间的水平方向的margin，border和padding都有效；
（3）Box垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认， 文本与图片对其），例：line-heigth与vertical-align。

css 伪类与伪元素

伪类(pseudo-classes)

  • 其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。
  • ⽐如:hover :active :visited :link :visited :first-child :focus :lang等
  • 由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
  • 由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。

伪元素(Pseudo-elements)

  • DOM树没有定义的虚拟元素
  • 核⼼就是需要创建通常不存在于⽂档中的元素，
  • ⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
  • 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器

伪类与伪元素的区别

  • 表示⽅法
    • CSS2 中伪类、伪元素都是以单冒号:表示,
    • CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示，
    • 浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first�line, :first-letter 等)的单冒号写法。
    • CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。
    • CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头
  • 定义不同
    • 伪类即假的类，可以添加类来达到效果
    • 伪元素即假元素，需要通过添加元素才能达到效果
  • 总结:
    • 伪类和伪元素都是⽤来表示⽂档树以外的"元素"。
    • 伪类和伪元素分别⽤单冒号:和双冒号::来表示。
    • 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
    • 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类
    • 伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
    • 伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
    • 伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

用flex实现九宫格

思路：利用了padding-top和flex-wrap:wrap，当设置background-color时，是包括盒子模型中的content和padding的，但是为什么不设置height呢？因为父元素没有高度，所以定义height:30%是没有用的，且若想每个block都为正方形，最好的方式就是设置padding-top/padding-bottom：a%，因为此时的百分比是父元素宽度的百分比，而width也为父元素宽度的百分比，所以block可以成为正方形。

 

css 切换主题

布局: 三栏布局(平均分布)

移动端适配方案

 

posted @ 2022-04-13 18:56  Clematis  阅读(27)  评论(0)    收藏  举报