CSS基础总结

盒模型

盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

标准模型和IE模型

标准模型和IE模型区别主要在于width和content的定义。

1.1 标准模型

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

其content内容的宽度为设置中的width。

1.2 IE模型

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

其content+padding+border = 设置的width

1.3 模型选择

利用CSS3新增属性box-sizing:content-box(标准模型)/border-box(IE模型)

JS获取盒模型的宽高（未知用途）

dom.style.width/height 只能取到行内样式的宽和高，style标签中和link外链的样式取不到。
dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有IE支持此属性。
window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9以上支持
dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离

普通文档流的垂直外边距重叠

除了行内框、浮动框(float)或绝对定位(absolute)不会重叠。
普通文档流的两个垂直外边距相遇的时候，只留下比较大的那个。

CSS选择器

简单选择器

1.1 元素选择器

选择指定HTML元素名

1.2 类选择器

.类名{}
文档中多个元素可以有一个类名，一个元素可以有多个类名

1.3 ID选择器

#ID{}
ID顾名思义一个元素只能有一个ID

1.4 通用选择器

*{}
选择所有元素

1.5 组合器

组合器	结果
A,B	匹配满足A（和/或）B的任意元素.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
注： A+B和A~B只能向后选择，DOM结构靠前的元素不会包含在内

属性选择器

以某种属性的值为根据进行选择

选择器	结果
[attr]	该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何
[attr=val]	该选择器仅选择 attr 属性被赋值为 val 的所有元素
[attr~=val]	该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类
[attr	=val]
[attr^=val]	选择attr属性的值以val开头（包括val）的元素
[attr$=val]	选择attr属性的值以val结尾（包括val）的元素
[attr*=val]	选择attr属性的值中包含字符串val的元素

伪类和伪元素

是选择一些元素有特定的样式状态或者在特定的位置，供给使用者选择特定的时候使用
例如：
:after 在某个元素之后
:before 在某个元素之前
:hover 鼠标悬停时候的状态
:first-child 作为第一个子元素时候被选中
:first-letter 元素中的第一个字母

CSS样式权重和优先级

两个选择器作用到同一个元素上，权重高者生效。

1 行内(1000)>id(100)>class(10)>标签(1)>*

组合选择器使得其权重加和，和大的优先级高。（越精确越会起作用）

2 行内样式>内联\外联样式

<head>
	<meta charset="UTF-8">
	<title>内联和外联样式的优先级问题</title>
	<link rel='stylesheet' href='css/styles.css'>
	<style>
		#div{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
</head>

这里采用内联样式，因为内联样式后加载。
同样的选择器，内联外联样式优先级与其加载顺序有关，采用后加载的样式。

3 就近原则

权重相同的时候，选择器距离元素越近，优先级越高。

BFC

常见定位方案

1 普通流

默认定位方式，普通元素按先来后到占满一行，然后换行，块级元素会渲染成新行。

2 浮动

先按照普通流位置出现，然后根据浮动的方向向左右偏移。

3 绝对定位

元素的具体位置由绝对定位的坐标决定不会对兄弟元素产生任何影响。

BFC

块级格式化上下文，是独立的容器，有内部的渲染规则，不会对容器外产生任何影响。
只要满足以下任意条件即可以触发BFC特性：

body根元素
浮动元素内部:float除none
绝对定位元素：position:absolute\fixed
display属性为：inline-block\table-cells\flex
overflow属性为：除了visible之外的值(hidden\auto\scroll)

BFC特性

1 同一个BFC容器的外边距重叠

如果想要避免外边距的重叠，可以将其放在不同的BFC容器中
例如：

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

2 BFC包含浮动的元素

浮动的元素会脱离文档流，触发容器的BFC特性，就可以使浮动的元素不脱离文档流。

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

结果如图所示：元素被包含在外面的div中

3 BFC可以阻止元素被浮动元素覆盖

如图所示：

图一的灰色div元素被覆盖了

图二的灰色div元素没有被覆盖

Position定位

文档流

对于单个元素
可以理解为块级元素类似于外壳，内联元素用来包含内容

块级元素内容宽度是父元素宽度的100%，且与内容一样高。
内联元素高宽与内容一样
不能对内联元素设置宽度高度，因为他们位于块级元素的内容里。除非设置成为块级元素display:block
元素之间的关系
块级元素垂直布局，每个都显示在新行里，同时外边距会分隔他们(外边距可能重叠)
内联元素水平布局，前提是父级块元素宽度足够，若不足够，向下移动到下一行。

定位

1 静态定位

position:static 定位是默认文档流行为

2 相对定位

.selector{
	position:relative;
	top\left\right\bottom:npx\em\rem\%;
}

相对定位类似于在力的作用下，元素从默认文档流位置移动，top\left\right\bottom是指在哪里施加力，例如在top施加力，元素就会像下移动。
注：可能会覆盖其他的普通文档流定位元素,而且此元素本身原文档流的位置还是空出来的

3 绝对定位

.selector{
	position:absolute;
	top:1px;
	right:1px;
	left:1px;
	bottom:2px;
}

该元素原文档流位置不存在了（和relative的不同点）
独立于正常文档流布局，不影响正常文档流布局，可用来做弹出的信息框、反转面板等。
top、bottom、right、left控制该元素距离包含元素边的距离。
有时可以使用top、bottom、right、left调整元素大小，直接通过四个方向的距离，把元素的大小框出来了。（但是优先级没有元素本身的width和height高）

包含元素：
是指距离该元素最近的父元素，且该父元素的position属性要有除了static以外的赋值。

4 z-index

元素Z轴位置设定

脱离文档流的元素>在文档流之中的元素
在脱离文档流的元素中：z-index大的>z-index小的
在文档流的元素z-index设置即使比脱离文档流的元素大，也会在下面

5 固定定位

居中技巧：margin:0 auto
position:fixed
理论上和absolute差不多，不过，absolute是相较于第一个有定位的元素，而fixed是相较于浏览器窗口。

6 sticky

首先先表现的类似于相对定位，直到滚动到某个阈值点，就开始表现的像绝对定位了(sticky粘性的意思，好像粘在了某个地方)

.sticky{
	position:sticky;
	top:0px;
	left:0px;
}

此时指代：向下滑动导航的时候，它与页面顶部距离0px则改变成为fixed状态。

flex布局

flexbox负责处理一个维度上的内部元素的布局。
flex定义了轴，设置方式为：

.flex{
	display:flex;
	flex-direction:row;(row-reverse\column\column-reverse)
}

元素按照主轴的方向排布。
主轴的起始点和终止点根据内容和是否reverse而定。(英文：从左到右，左为起始，阿拉伯文：从右到左，右为起始)

Flex容器

建立flex容器的方式，把容器的display改为flex或inline-flex：display:flex\inline-flex;
flex容器中的直系子元素会变为flex元素，具有如下特点：

元素不会在主维度上拉伸，但是可以缩小。
元素会被拉伸来填充交叉轴的大小。
flex-basis属性为auto
flex-wrap属性为nowrap(意思就是主轴方向排满了是不会换行或换列的)
一个元素比较高的话，会撑起Flex容器的大小。（交叉轴的大小也和内部元素有关系）

flex-wrap属性换行或换列

flex-wrap属性有两个值：nowrap(默认)、wrap(可换行)
子元素在主轴的长度总和大于容器主轴长度时：

flex-wrap:wrap：子元素会新起一行\一列
flex-wrap:nowrap：
- 若子元素是可拉伸元素:则会缩小适应容器。缩小到内容都盛不下的时候，会溢出。
- 若子元素不是可拉伸元素：溢出。

flex-flow属性

flex-flow是flex-direction和flex-wrap的组合简写形式

.box{
	display:flex;
	flex-flow:row wrap;
}

Flex元素（Flex容器中的元素）

有三个属性用来控制Flex元素的大小及容器剩余的可用空间（控制元素个体大小和伸缩）

flex-grow
flex-shrink
flex-basis

flex-basis

这里会检测元素是否具有特定的尺寸，如果有，该元素flex-basis的值就为该特定尺寸，如果没有，那么就是该元素内容的尺寸。
初始值为auto，自动按照上面的规则检测。

可用空间就自然而然明确了，

即：容器尺寸 - flex元素flex-basis属性和 = 可用空间

flex-grow

flex-grow设定了元素可以增长以充满可用空间，可用空间的分配按照flex-grow值的权重分配。

flex-grow的初始值为0，元素尺寸永远不会超过flex-basis

flex-shrink

flex-shrink负责控制当容器小的时候，flex元素的收缩。

无论flex元素是否设置宽度，收缩最大能够收缩到flex元素的内容宽度。
flex-shrink初始值为1，flex元素可以收缩尽量保证不会溢出容器。

Flex元素预定义写法：

flex:initial
flex:auto
flex:none
flex:正数

flex:initial：这种情况是所有的内容为初始值flex:0 1 auto;
flex:auto:这种情况是识别basis同时能够自动的伸缩flex:1 1 auto;
flex:none:是指不可伸缩：flex:0 0 auto;
flex:正数：指在basis为0的基础上伸缩，felx:正数正数 0;

元素的对齐和空间分配

Flexbox能够设置flex元素沿主轴和交叉轴方向的对齐方式，以及其空间分配。

align-items-交叉轴方向对齐

align-items属性是flexbox的属性，用来控制元素是否在交叉轴填满，以及在交叉轴的对齐方式。
属性值为：

align-items:strech:元素在交叉轴方向拉伸
align-items:flex-start:元素交叉轴尺寸和本身一样，在交叉轴起始对齐。（一般理解为顶端对齐）
align-items:flex-end:元素交叉轴尺寸和本身一样，在交叉轴末尾对齐。（一般理解为底部对齐）
align-items:center:元素交叉轴尺寸和本身一样，在交叉轴中间对齐

justify-content-主轴方向对齐

justify-content:flex-start\end\center：flex元素在主轴的起始、尾部、中间
justify-content:space-around：可用空间平均分配在每个元素两边
justify-content:space-between：可用空间平均分配在每个元素之间
注：如果flex元素设置了flex-grow，那么这些对齐将无用，因为不存在可用空间了

CSS发展

原生CSS -- 预处理器Sass\Less -- 后处理器PostCSS -- CSS模块化 --CSS in JS

预处理器Sass和Less强化CSS的语法，只是帮助原生CSS弥补一些问题：支持变量、支持嵌套、支持父选择器

CSS模块化

react、vue框架普及，常常将页面拆分成多个组件。CSS大多是根据类名去匹配元素，那么命名冲突是很大的问题，所以产生CSS模块化概念

BEM命名规范

命名规范用来解决命名冲突问题

BEM的意思是块(block)、元素(element)、修饰符(modifier)

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}

CSS Modules

CSS In JS

是CSS模块化的一个发展形式，React出现之后，强制把HTML CSS JS写在一起，React用JS对HTML的封装是JSX语言，而对CSS的封装即为
DOM的sytle属性对象，所以会有一些第三方库用来加强React的CSS操作，称为CSS IN JS。

posted @ 2021-04-28 21:31 LeonardoDiCaprio 阅读(77) 评论(0) 收藏举报

刷新页面返回顶部

LeonardoDiCaprio

CSS基础总结

盒模型

标准模型和IE模型

1.1 标准模型

1.2 IE模型

1.3 模型选择

JS获取盒模型的宽高（未知用途）

普通文档流的垂直外边距重叠

CSS选择器

简单选择器

1.1 元素选择器

1.2 类选择器

1.3 ID选择器

1.4 通用选择器

1.5 组合器

属性选择器

伪类和伪元素

CSS样式权重和优先级

BFC

常见定位方案

1 普通流

2 浮动

3 绝对定位

BFC

BFC特性

1 同一个BFC容器的外边距重叠

2 BFC包含浮动的元素

3 BFC可以阻止元素被浮动元素覆盖

Position定位

文档流

定位

1 静态定位

2 相对定位

3 绝对定位

4 z-index

5 固定定位

6 sticky

flex布局

Flex容器

flex-wrap属性换行或换列

flex-flow属性

Flex元素（Flex容器中的元素）

flex-basis

flex-grow

flex-shrink

Flex元素预定义写法：

元素的对齐和空间分配

align-items-交叉轴方向对齐

justify-content-主轴方向对齐

CSS发展

CSS模块化

BEM命名规范

CSS Modules

CSS In JS

公告