CSS

... 2022-11-17 About 2 min

# CSS

# BFC特性

BFC 简称块级格式化上下文。它是页面中一个独立的元素，容器中的元素不会影响到外面的元素。

BFC 是怎么产生的 ?

display的值为：inline-block、inltable-cell、table-caption、table、inline-table、flex、 inline-flex、grid、inline-grid
float的值为：left、right
overflow的值为：auto、scroll、hidden
position的值为：fixed、absolute

BFC 解决了什么问题 ?

清除元素内部的浮动。
外边距合并问题。
制作右侧自适应盒子问题。

# CSS选择器优先级

!important > 行内样式 > id > class > 标签 > 通配符 > 浏览器自定义或继承

// 权限值
行内样式：1000
ID选择器：100
class选择器：10
HTML标签选择器：1

1
2
3
4
5
6
7
8

# 盒子模型

标准盒模型
IE盒模型

两种模型之间区别

标准盒模型内容的宽和高等于他实际内容的宽和高。
IE盒模型内容的宽和高包括了padding 和 border。

# CSS position定位（relative、absolute、fixed、sticky）特点

reletive 相对定位

相对于自身的位置进行定位，不会脱离文档流，占用位置。
不影响其他元素布局。
不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

aosolute 绝对定位

脱离文档流
使行内元素支持宽高（让行内元素具备块内元素特性）
使块内元素默认宽根据内容决定（让块内元素具备行内元素特性）
如果父级元素具备（relative、absolute、fixed）定位，根据父级元素进行偏移，没有就根据浏览器窗口来进行偏移。
如果父级元素中有多个具备定位模式，根据自己最近的父级元素偏移。

fixed 固定定位

脱离文档流
使行内元素支持宽高（让行内元素具备块内元素特性）
使块内元素默认宽根据内容决定（让块内元素具备行内元素特性）
根据浏览器窗口进行偏移。不受浏览器滚动条的影响依然固定在位置中。

sticky 粘性定位

在没有达到指定的时候，已 relative 进行定位。到达了指定文字，已 fixed 进行定位。
left 和 right 一同指定时 left 的优先级大于 right。 top 和 bottom 一同指定时 top 的优先级大于 bottom。