CSS相关

Posted 2022-12-09 别Null.了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS相关相关的知识，希望对你有一定的参考价值。

flexbox(弹性盒子布局)及其适用场景

CSS提高性能的方法

css选择器，优先级，哪些属性可以继承

CSS选择器是CSS规则的第一部分，它是元素和其他部分组合起来告诉浏览器哪个html元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”

关于CSS属性选择器常用的有：

id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素

优先级

内联>id选择器>类选择器>标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于类选择器和属性选择器和伪类出现的总次数
D 的值等于标签选择器和伪元素出现的总次数

【举个例子】

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出A、B、C、D 的值：

因为没有内联样式，所以 A = 0
ID选择器总共出现了1次， B = 1
类选择器出现了1次，属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
标签选择器出现了3次，伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

知道了优先级是如何计算之后，就来看看比较规则：

从左往右依次进行比较，较大者优先级更高
如果相等，则继续往右移动一位进行比较
如果4位全部相等，则后面的会覆盖前面的

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要用 !important

继承属性

在CSS中，继承指的是给父元素设置一些属性，后代元素会自动拥有这些属性。

可被继承的属性有：字体系列属性（font等）、文本系列属性（text-align等）、元素可见性（visibility）、表格布局属性（border-collapse等）、列表属性（list-style等）、引用（quotes）、光标属性（cursor）

无继承的属性：

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

【注意】a标签的字体颜色不能被继承、 h1-h6标签字体的大小也是不能被继承的

CSS盒模型

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content（内容）、border（边框）、padding（内边距）、margin（外边距）

W3C标准盒模型

此时盒子的 width=content，从上图可以看到：

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin

也就是，width/height只是内容高度，不包含padding和padding值

所以当我们设置width为200px，但由于存在padding（20px），实际上盒子的宽度有240px（padding包括padding-left和padding-right）

IE怪异盒模型

此时盒子的 width=content+padding+border，从上图可以看到：

盒子总宽度 = width + margin;
盒子总高度 = height + margin

em/px/rem/vh/vw的区别

在CSS单位中，可以分为长度单位、绝对单位

相对长度单位： em、ex、ch、rem、vw、vh、vmin、vmax、%

绝对长度单位：cm、mm、in、px、pt、pc

px：表示像素，绝对单位，页面按精确像素展示。之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。

特点：

em的值不是固定的；
em 会继承父级元素的字体大小；
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸；
任意浏览器的默认字体高都是 16px；

rem：相对单位，可理解为root em, 相对根节点html的font-size大小来计算。

vh、vw：主要用于页面视口大小布局，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽）同理，vh则为窗口的高度。（在桌面端，指的是浏览器的可视区域；移动端指的就是布局视口）

与vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort（可视窗口）

元素水平垂直居中方法

position + margin：auto

设置父元素相对定位 position:relative
设置子元素绝对定位 position:absolute
设置子元素的left、top、right、bottom均为0
设置子元素的外边距为auto margin: auto;

position+margin:负值

设置父元素相对定位 position:relative
设置子元素绝对定位 position:absolute
设置子元素的left、top均为50%
设置子元素的margin-left和margin-top为-50px

这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。

position+transform

设置父元素相对定位 position:relative
设置子元素绝对定位 position:absolute
子元素设置 transform: translate(-50%,-50%);

transform: translate(-50%,-50%) 表示子元素向左、向上分别移动其自身宽度和高度的一半。这样无论元素自身宽高变成多少，都能保持移动的距离为其宽高的一半。

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中（设置父元素中vertical-align：middle ；text-align: center）

flex布局

设置父元素的布局方式为flex display: flex; 表示该容器内部元素按照flex布局
设置父元素在水平方向上的对齐方式为居中对齐 justify-content: center; 表示元素相对于本容器水平居中
设置父元素在垂直方向上的对齐方式为居中对齐 align-items: center; 垂直居中

grid布局

与flex布局原理相同，知识grid布局中将display设置为grid。

实现两栏布局，三栏布局

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。

使用 float 左浮左边栏
右边模块使用 margin-left 撑出内容块做内容展示
为父级元素添加BFC（设置父级元素 overflow：hidden），防止下方元素飞到上方内容

还有一种简单的是采用 flex弹性布局：给父元素设置 display：flex

注意的是，flex容器的一个默认属性值:align-items: stretch；这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置: align-items: flex-start

三栏布局方法有：

两边使用 float，中间使用 margin （缺点：主体内容最后加载，右边在主体内容之前，若为响应式设计则不能简单的换行显示）
两边使用 absolute，中间使用 margin
两边使用 float 和负 margin（float：left；margin-left:-100%）(缺点：增加了 .main-wrapper）
display: table 实现
flex实现（将容器设置为display:flex;，盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白）
grid网格布局

flexbox(弹性盒子布局)及其适用场景

Flexible Box简称flex，为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素，称为flex容器container。它的所有子元素自动成为容器成员，称为flex项目item

容器属性：

flex-direction 决定主轴方向【即项目的排列方向】
flex-wrap 弹性元素沿主轴排列，若主轴排不下通过flex-wrap决定容器内是否换行【nowrap(默认)：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方】
flex-flow 默认值为row nowrap
justify-content 定义了项目在主轴上的对齐方式【flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等 space-around：两个项目两侧间隔相等】
align-items 定义项目在交叉轴上如何对齐【flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 baseline: 项目的第一行文字的基线对齐 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度】
align-content 定义了多根轴线的对齐方式【flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐 center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值）：轴线占满整个交叉轴】

容器成员属性：