深入理解CSS

Date: May 13, 2023

基础知识

Casading规则、选择器、继承、值和单位、盒模型

层叠、优先级

样式表来源：

样式表来源重要排序

用户代理样式浏览器默以棒式

用户样式表很少有

作者样式表

developer写的

作者样式表中的！ important

用户样式表中的！important

用广代理样式表中的！important

以上重要程度递增

选择器优先级

#id-—1D选择器。Tagname一一类型选择器或者标签选择器。 .class一一类选择器。*一一通用选择器。该选择器匹配所有元素组合器子组合器（＞）一一匹配的目标元素是其他元素的直接后代。如：parent >.child。相邻兄弟组合器（+）一一匹配的目标元泰紧跟在其他元素后面。如：pth2。通用兄弟组合器(~）一一匹配所有跟随在指定元素之后的兄弟元素，如：li.active ~复合选择器多个基础选择器可以连起来使用，如：h1.page-header。属性选择器通过约束属性值，divldata-title='aaa”] 伪类选择器选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如：first-child，hover 伪元素选择器匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2:: first-letter, div.:before 逻辑选择器较新的选择器 :iso haso whereo :noto

注意点：

选择器尽量少用id
尽量不要用！important
自己的样式加载在引用库样式的后面

盒模型：

盒子的概念
1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型

CSS 中规定每个盒子分别由：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
记忆：可以联想现实中的包装盒

Untitled

布局和定位

常规流

CSS3 之后的新增布局

Flex 弹性盒子布局、一维空间布局、Grid 网格布局、二维空间布局、Multicol多列布局、文本、内容的多列展示

Flex布局

总结：

Flex布局是浏览器提倡的一种弹性布局模型，可以避免浮动脱标问题。

由主轴(justify-content)、侧轴(align-items)\

Flex布局模型构成

目标：能够使用Flex布局模型灵活、快速地开发网页

思考:

多个盒子横向排列使用什么属性？

浮动

设置盒子间的间距使用什么属性？

margin

需要注意什么问题？

浮动的盒子脱标(父级不设置高度会产生这种情况)

Untitled

Flex布局/弹性布局：

是一种浏览器提倡的布局模型

布局网页更简单、灵活

避免浮动脱标的问题

注意1：浮动原本是为了解决文字环绕问题的，而Flex是专门为了解决网页布局问题的

注意2：Flex可能不支持低版本的浏览器

作用：

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局

设置方式：

父元素添加 display: flex，子元素可以自动地挤压或拉伸

注意：必须是直接父元素，不可以是父元素的父元素

组成部分：

弹性容器：最大的父级

弹性盒子：子集

主轴：横着的轴默认是主轴

侧轴 / 交叉轴：竖着的轴默认是侧轴

深入理解CSS | 青训营笔记