关于CSS

是纽扣也是烤奶

已于 2024-08-05 13:32:40 修改

阅读量561

点赞数

文章标签： css html html5

于 2020-10-30 19:15:08 首次发布

本文链接：https://blog.csdn.net/qq_41448406/article/details/109350952

版权

关于CSS

CSS： 用于描述页面展示的语言。主要可以分为：（1）样式样式计算（Computing Style）：①声明、②层叠、③继承、④默认。（2）视觉格式化模型(Visual Formatting Model)：也可以称为布局规则，即指的是页面中多个盒子的排列规则，主要将页面中盒子的排列方式分为了①常规流、②浮动、③定位三种。
CSS规则=选择器+声明块两部分
选择器： 选中元素，确定样式范围。
选择器类型：
基础选择器：

复杂选择器：

注意事项：+：选择的是紧接着指定元素的兄弟元素。（一定为就近的兄弟元素）~：选择的是指定元素后的所有兄弟元素。（不一定是就近的兄弟元素）
选择器权重值：
声明冲突： 同一样式（同一属性不同值）多次应用到同一元素。
层叠： 解决声明冲突即解决元素样式冲突。
① 比较优先级（由高到低）：
作者样式表中的！important样式 >代理样式表中！important样式 > 作者样式表的普通样式 > 代理样式表的普通样式（作者样式表：开发者书写的样式；代理样式表：浏览器默认样式表中的样式）
② 比较特殊性（权重计算）：
总体规则：取决于选择器，选择器选中的范围越窄，越特殊。
具体规则：通过选择器计算出一个4位数（xxxx）。

③ 比较源次序：源代码的顺序，即样式表文件引用的顺序，代码写得越靠后的，越重要。
层叠的应用场景：

重置样式表：书写一些作者样式，覆盖浏览器的默认样式。（先引用重置样式表，再引用作者样式表。）常见的重置样式表有：normalize.css、reset.css、meyer.css。
爱恨法则：link > visited > hover > active

继承：子元素会继承父元素的某些CSS属性（一般与文字内容相关的属性都能被继承。）
CSS属性值的计算过程： 一个元素从所有属性都没有值到所有的属性都有值的计算过程。
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。
渲染每个元素的前提条件：确保该元素的所有CSS属性必须有值。

确定声明值：参考（作者或者浏览器）样式表中没有冲突的声明，直接确定CSS属性值。
层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值。
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值。（inherit：强制继承，即将父元素的值取出并应用到子元素上，有声明值时就不需要再继承了。）
使用默认值：对仍然没有值的属性，使用默认值。（initial：初始值，将该css属性值设置为默认值。）
css属性一般分为可继承属性、不可继承属性（可以通过浏览器的属性是否高亮来直接判断，高亮即为前者，反之为后者。）

盒模型： 规定单个盒子的规则。
box：盒子，每个元素在页面中都会生成一个矩形区域。
浏览器默认样式表设置的块盒：容器元素、h1~h6、p；
常见的行盒：span、a、img、video、audio；
盒子类型：
- 行盒（inline-box）：display：inline的元素。
- 块盒（block-box）：display：block的元素。
  行盒在页面中不换行，块盒在页面中独占一行。
  （display的默认值为inline）
盒子的组成部分：

内容区（content）:内容部分通常称为内容盒（content-box）也可称为标准 W3C 盒子模型。
填充区+内容区=填充盒（padding-box）
边框+填充区+内容区=边框盒（border-box）（也可称为IE 盒子模型）
标准 W3C 盒子模型与IE 盒子模型的主要区别是：

由于设置标准 W3C 盒子模型的宽高实际是设置content-box（内容区）的宽高，故元素总宽度=内容区域宽度+左右内边距+左右边框+左右外边距，元素总高度=内容区域高度+上下内边距+上下边框+上下外边距；
由于设置IE 盒子模型的宽高实际是设置border-box（边框+填充区+内容区）的宽高，故元素总宽度=内容区域宽度+左右内边距+左右边框，元素总高度=内容区域高度+上下内边距+上下边框。
设置盒模型的方式： box-sizing:content-box （标准盒模型）；box-sizing:border-box （IE盒模型）
填充区/内边距（padding）：盒子边框到盒子内容的距离。
（padding-top：上内边距；；padding-right：右内边距；padding-bottom：下内边距；padding-left：左内边距）
边框（border）：通过border-width、border-style、border-color设置边框宽度、边框样式、边框颜色。
外边距（margin）：边框到其它盒子的距离。

盒模型的应用：

改变宽高范围：
默认情况下，width、height设置的是内容盒宽高即在浏览器中表现为标准W3C盒子。
而衡量设计稿尺寸时，由于设计稿中往往使用的是边框盒即IE盒子，故需要通过以下其中一种方式将其进行转化设置：
方式一：精确计算出内容盒的实际宽高直接进行设置；
方式二：通过CSS3的box-sizing属性进行设置（即先通过box-sizing:border-box将W3C盒模型转为IE盒模型后再直接设置）。
改变背景覆盖范围：
默认情况下，背景覆盖边框盒，可通过background-clip进行修改覆盖范围。
溢出处理：
overflow：控制内容溢出边框盒后的处理方式。
断词规则：
word-break：影响文字在什么位置被截断换行。（可取的属性值有normal：普通，对于CJK字符，在文字位置截断，非CJK字符，在单词位置截断；break-all：截断所有，在所有位置截断；keep-all：保持所有，所有文本均在单词位置截断。）
空白处理：
white-space：nowrap（该种情况下元素会进行空白折叠但不会换行）
white-space：normal（该种情况下元素会进行空白折叠）
white-space：pre（该种情况下元素不会进行空白折叠）
单行文本显示不完自动换行的处理方法：white-space：nowrap；overflow：hidden；text-overflow：ellipsis；

可替换元素： 少部分元素，页面上显示的结果取决于元素属性，CSS不能完全控制其样式。
绝大部分可替换元素均为行盒；可替换元素类似于行块盒，盒模型中所有尺寸都有效。（object-fit：表示图片/音频/视频的适应方式）
非可替换元素： 大部分元素，页面上显示的结果取决于元素内容。
包含块（containing block）： 每个盒子都有它的包含块，包含块决定了盒子的排列区域。（绝大部分情况下，盒子包含块为其父元素的内容盒。）👉详情
视觉格式化模型（布局规则）： 该模型将页面中盒子的排列大致分为了三种方式：常规流、浮动、定位。
常规流（布局）：
常规流，文档流、普通文档流、常规文档流。
所有元素默认情况下都属于常规流布局。
总体规则： 块盒独占一行，行盒水平依次排列。
块盒（display：block）：
* 在水平方向上：①每个块盒的总宽度，必须刚好等于包含块的宽度。②宽度的默认值为auto，margin的取值也可以为auto，默认值为0。③ width吸收能力强于margin，故width、margin同时设为auto时，剩余空间将被width所吸收。④ 若宽度、边框、内边距、外边距计算之后，仍然有剩余空间，则该剩余空间被margin-right全部吸收。
* 在垂直方向上： height：auto，适应内容的高度； margin：auto或者0 。
auto：将剩余空间吸收掉。
百分比设置：
padding、width、margin均可以取值为百分比。（这里的百分比是相对于包含块的宽度）
高度的百分比：
情况一：包含块的高度取决于子元素的高度即父元素的高度未设置时，设置百分比无效。
情况二：包含块的高度不取决于子元素的高度即父元素高度已设置，设置百分比时是相对于父元素高度。
margin合并(塌陷）： 指的是处在同一“BFC”区域内且在垂直方向上父子元素或者兄弟元素上下外边距相邻时发生合并的现象。（合并后的margin取值：正正取最大值，负负取最小，正负取和。）（解决方法：①设置padding；②设置border；③触发“BFC”）
触发“BFC”（块级格式化上下文👉详情）：
①overflow:hidden；
②float：left、float：right；
③position：absolute、position：fixed；
④display：flex、display：table、display：table-cell、display：table-caption、display：grid、display：inline-block、display：inline-flex、display：inline-grid、display：flow-root。（display：inline-block、display：inline-flex、display：inline-grid它们本身并不直接触发“BFC”，但是若其存在于已经触发了“BFC”的容器内部，其内部元素则会受到“BFC”布局规则的影响）
行盒（display：inline）：
① 盒子沿着内容延申；
② 行盒不能设置宽高（故若需要调整行盒的大小，应该使用字体大小、字体类型、行高）；
③行内元素或者行盒元素均在一行内显示；
④内边距（填充区）：水平方向有效，垂直方向仅会影响背景，并不实际占据空间；
⑤边框：水平方向有效，垂直方向仅会影响背景，并不实际占据空间；
⑥外边距：水平方向有效，垂直方向仅会影响背景，并不实际占据空间。
行块盒（display：inline-block）：
①不独占一行，行块盒元素在一行内显示；
②可以设置宽高，盒模型中所有尺寸都有效。
在常规流中，块盒在其包含块中水平居中：
方法一：可以设置width、margin：0 auto；
方法二：display: flex；flex-direction: row；justify-content: center；align-items: center;
在常规流中，块盒在其包含块中垂直居中：
方法二：display: flex；flex-direction: column；justify-content: center；align-items: center;
使文本水平居中：
单行文本可以设置text-align：center；（汉字文本之间的间距：letter-spacing；英文单词之间的间距：word-spacing）
使文本垂直居中：
单行文本可以将height、line-height设置为相同值；行块盒或块盒内多行文本，可以设置盒子上下内边距相同以达到居中效果；绝对定位元素：设置top：0；bottom：0；margin：auto 0。
行盒的垂直对齐：
多个行盒垂直方向上的对齐：使用预设值或者数值给没有对齐的元素设置vertical-align。
图片的底部白边：图片的父元素为一个块盒，且高度为自动，图片底部和父元素底边之间往往会出现空白。
解决方法：
方法一：设置父元素的字体大小为0；
方法二：将图片设置为块盒。
浮动（布局）：
①浮动元素会脱离文档流，受新生成块级框的影响，从布局行为上看可以等同元素的display属性值被自动更改为block，元素变为块盒；
②浮动元素的包含块为父元素的内容盒 。
③无外边距合并。
float的属性可取值有：
left：左浮动，元素靠上靠左排列。
right：右浮动，元素靠上靠右排列。
none：默认值，不浮动。
盒子尺寸：
宽度为auto时，适应内容的宽度；
高度为auto时，适应内容的高度；
在水平或者垂直方向上，当margin设为auto时，即相当于0；
边框、内边距百分比设置同常规流一样。
盒子排列：
浮动盒子在包含块中排列时，会避开常规流块盒；
常规流块盒在排列时，会忽略浮动盒子（本质原因：同一个堆叠上下文中，非定位的浮动盒子在Z轴上的排列顺序/级别高于常规流非定位的块盒。）；
行盒、行块盒在排列时，会避开浮动盒子；
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒被称为匿名行盒。
高度坍塌：

形成原因：常规流盒子的高度，若为适应内容的高度时，则其在计算时会忽略浮动盒子。（浮动盒子脱离了常规流）
解决办法：
方法一：将浮动元素的父级元素高度设置为固定值；
方法二：清除浮动。（给浮动元素的父级元素添加一个::after伪类，该伪类的CSS样式可写为：content：“ ”；display：block；clear：both；）
clear：left ，清除左浮动，即该元素必须出现在前面所有左浮动盒子的下方。
clear：right，清除右浮动，即该元素必须出现在前面所有右浮动盒子的下方。
clear：both，清除左右浮动，即该元素必须出现在前面所有浮动盒子的下方。
方法三：创建“BFC”区域。（即当子元素为浮动元素时可以通过在其父元素内部创建BFC的方式让其自动计算浮动元素高度从而解决盒子“高度坍塌”的问题）
应用场景：
文字环绕
横向排列

定位（布局）： 手动控制元素在包含块中的精准位置。👉详情
position属性：
默认值为static，静态定位（不定位）；
relative：相对定位；
absolute：绝对定位；
fixed：固定定位。
sticky：粘性定位。
①一个元素，只要position取值不是static，则认为该元素是一个定位元素。
②定位元素会脱离文档流，重新生成块级框的影响，从布局行为上看可以等同其display属性值被自动更改为block，变为块盒（相对定位除外）。
③文档流中的元素摆放时，会忽略该元素；
④文档流中的元素计算自动高度时，会忽略该元素。
可通过以下属性设置元素位置：
top、right、bottom、left；（属性值起冲突时，以左或上为准）
⑤无外边距合并。
⑥元素上同时有浮动属性和定位属性时，为定位元素。
⑦使用定位时，应首先确定其包含块范围。（如何确定其包含块范围：找最近的已定位的祖先元素，该元素的填充盒为其包含块，若找不到，则它的包含块为整个网页即初始化包含块）
相对定位（relative）：
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移；
元素仅仅发生位置偏移，不会对其它元素位置产生影响。
绝对定位（absolute）：
宽高为auto时，适应内容。
一般元素发生重叠即需要精准定位时使用绝对定位。
固定定位（fixed）：
宽高为auto时，适应内容；
确定其包含块范围：固定为视口即浏览器的可视窗口。
固定定位是绝对定位的特殊情况。(用法参考：position：fixed；left：0；bottom：0)
粘性定位（sticky）：
确定其包含块范围；
保证包含块拥有“滚动机制”；
注意事项：有时会被其它元素盖住，最好加z-index使其确保能被看到。
定位下的居中：
常规流块盒在水平（垂直）方向上居中：

定宽（高）：通过calc（）计算的方法进行居中；
将左右（上下）距离设为0；
将左右（上下）margin设为auto；
在绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。
👉关于文档流

此链接为作者“清风柠檬”的博客园笔记

多个定位元素重叠时：
①堆叠上下文：设置z-index（其值可以为正，可以为负）👉详情
②只有定位元素设置z-index有效。
12. 透明度：

在颜色位置设置alpha通道（局部设置）：
rgba（red，green，blue，alpha）
hex：#red green blue alpha
每个颜色都具有透明通道，0~1 。
opacity：设置整个元素的透明度，取值范围为0~1。（整体设置）

伪l类选择器和伪元素选择器补充：
伪类选择器：
first-child：选择第一个子元素；
last-child：选择最后一个子元素；
nth-child：选择指定的第几个子元素（even：等同于2n；odd：等同于2n+1）；
first-of-type：选中子元素中指定类型的第一个元素；
nth-of-type：选中指定的子元素中某类型的第几个元素。
伪元素选择器：
first-letter：选中元素中第一个字母；
first-line：选中元素中第一行的文字；
selection：选中被用户框选的文字。
盒子隐藏：
不生成盒子：display：none
生成盒子，虽然不可视，但仍然占据空间：visibility：hidden
背景图：
img元素是属于html的概念，而背景图属于css的概念。
当图片属于网页内容时，必须使用img元素；
当图片仅用于美化图片时，必须使用背景图。
background-image、background-color、background-repeat（设置背景图是否重复）、background-size（设置背景图的大小）、background-position（设置背景图的位置）、background-attachment（用于控制背景图是否固定）
默认情况下，背景图会在横坐标和纵坐标中进行重复。
雪碧图（精灵图）：一张拥有网页中所有的图标的图。
图片处理：
防止图片拉伸变形： objectFit: ‘cover’,
文字处理：
单行文字省略（英文）：word-wrap:break-word
单行文字省略（汉字）：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
两行省略：
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
关于flex布局：👉详情
参考资料：👉详情
flex-item：display属性一般会变为block或者inline-block，但不影响其所在盒子的display属性。（现象符合，存疑，待查证！）
隐藏滚动条：

 '& ::-webkit-scrollbar': {
       display: 'none',
 },

修改滚动条样式：

  '&::-webkit-scrollbar': {
    width: '0px',
  },
  '&::-webkit-scrollbar-thumb': {
    borderRadius: '10px',
    background: 'rgba(0,0,0,0.2)',
    webkitBoxShadow: ' inset 0 0 5px rgba(0,0,0,0.2)',
  },
  '&::-webkit-scrollbar-track': {
    webkitBoxShadow: 'inset 0 0 5px rgba(0,0,0,0.2)',
    borderRadius: 0,
    background: 'rgba(0,0,0,0.1)',
  },