Day 3 CSS有关概念总结｜豆包MarsCode AI 刷题day3 CSS 1.多个选择器匹配一个元素 2.继

day3 CSS

1.多个选择器匹配一个元素

优先级取决于选择器的特异度，特异度越高优先度越高
优先度：id >伪类/类 >标签

2.继承

意思：有些属性如果没有设置值，会自动继承其父类的值

2.1 显式继承

意思：有些元素不可以被继承，但是可以通过显示继承的方式，让子元素继承父元素的某些属性

通过关键字inherit实现显式继承，比如：

* {
  box-sizing: inherit;
}

2.2 初始值

CSS里面，每个属性都有初始值
可以使用initial关键字，来设置属性的初始值

3.布局

确定内容大小和位置的算法
->盒子模型

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

3.1. 盒子模型

content

width 取值可以是长度、百分数、auto
height 取值可以是长度、百分数（容器限定高度时生效）、auto

margin：外边距，指定元素和其他元素之间的距离

取值可以是长度、百分数、auto
margin:auto 水平居中
margin collapse ：外边距合并（折叠）

border：边框（就是margin和padding之间的区域） border有：

三种属性：border-width、border-style、border-color
四个方向：border-top、border-right、border-bottom、border-left 可以给元素四条边框设置不同颜色

padding: 内边距，指定内容和四个方向的边框之间的距离

box-sizing:border-box
- 就是改变了盒子的计算方式。
- 元素的宽度和高度包括了内边距和边框，不会增加元素的大小。注：box-sizing的默认值是content-box。

* {
  box-sizing: border-box;
}

4.行级和块级元素

4.1.块级

不和其他盒子并排摆放
适用于所有盒型属性

4.2.行级

比如 span、a、img、input、button、label、select、textarea、iframe、object、video、audio

和其他行级盒子并排摆放
只适用于行级属性，盒模型的属性（width，height）都不适用

4.3.display属性：

block：块级元素
inline：行级元素
inline-block：行级元素，但是可以设置宽高。但作为一个整体不会被拆散成多行
none：隐藏元素，不占据空间
flex：弹性盒子

5. 行级排版上下文

IFC：只包含行级元素的盒子会生成IFC IFC排版规则：

盒子在一行内水平摆放，一行放不下时，换行展示
text-align决定了一行内盒子的水平对齐
vertical-align决定了一个盒子在行内的垂直对齐
避开float元素 BFC：某些容器会创建一个BFC BFC排版规则：
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会和外界的合并
BFC不会和float元素重叠

6. Flex Box是什么

一种新的排版上下文（不再遵循IFC BFC规则）
可以控制子级盒子的位置和排列方式
- 摆放流向
- 摆放顺序
- 盒子的宽度和高度
- 水平和垂直方向的对齐
- 能不能拆行
引入主轴和侧轴概念的对齐方式 flex-grow：分配每个元素不同的宽度比例

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
}
.item1{
  flex-grow: 1;
}
.item2{
  flex-grow: 2;
}
.item3{
  flex-grow: 3;
}

上面例子中，item1对应的元素被分配1份宽度，item2的元素被分配2份宽度，item3则被分配3份宽度。

例子：使用了flex-box，让div块状元素实现并排展示

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
.container{
  display: flex;
}

justify-content:可以控制flex上下文元素之间的对齐关系

align-items:给某个元素设置特殊的对齐方式

7. grid布局

就是先将平面分为一些格子，再在每个格子里面分配盒子
理解：类比二维数组有索引可以定位。
类型：grid line网格线、grid area网格区域

8.float

实现文字环绕图片的效果。图文混排时用

9. 定位 position

position:relative 相对定位

相对于自身位置偏移，不脱离文档流

position:absolute 绝对定位

* 脱离了常规流，相对于最近的非static祖先定位、不会对流内其他元素布局造成影响
* 效果会呈现出和其他元素重合

position:fixed

* 脱离了常规流，相对于窗口定位

Day 3 CSS有关概念总结 ｜ 豆包MarsCode AI 刷题