你必须掌握的css知识点

苏苏同学
559 阅读15分钟

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

简介

css在我们前端开发中是绕不开的一个点，本文讲解一些css中比较重要的知识点。希望对小伙伴们能有所帮助。

image.png

盒模型

margin box、border box、padding box、content box这四个盒子由外到内构成了盒模型。

IE模型

IE模型：box-sizing: border-box 此模式下，元素的宽度计算为border+padding+content的宽度总和。也就是说我们使用css设置元素的宽度，这个宽度是该元素的border+padding+content的和。所以元素在文档中占据的总宽度为 css设置元素的宽度 + margin

w3c标准模型

w3c标准模型：box-sizing: content-box 此模式下，元素的宽度计算为content的宽度。也就是说我们使用css设置元素的宽度，这个宽度是该元素的content的宽度。所以元素在文档中占据的总宽度为 css设置元素的宽度 + margin + border + padding

层叠顺序

层叠上下文我们只需要记住这张图就可以了。

顺序一次是正的z-index -> 0或auto -> 行内元素 -> 浮动元素 -> 块级盒子 -> 负的z-index -> 背景颜色

只有设置了定位的元素才能设置z-index

只有设置了定位的元素才能设置z-index，也就是position的值不为static的元素。

子元素不会超过父元素的层级

并且层级受父元素控制，也就是说父元素层级不高，子元素再怎么设置层级也不会超过父元素的层级。

比如下面的例子，

<div class='div1'>div1</div>
<div class='div2'>div2
  <div class='div2-1'>div2-1</div>
</div>

div1的z-index是2，div2的z-index是1，不管div2里面的div2-1的z-index设置为多少，始终都会被div1盖住。

image.png

浮动

浮动现在基本上不使用了，但是面试的时候有可能会被问到，所以我们还是需要了解下。

我们使用float: left/right 开启左右浮动。

节点参与浮动布局后，自身脱流但其文本不脱流。

浮动元素特点

  1. 不管是块级元素还是行内元素，设置浮动后的 display 属性值是 inline-block，也就是变为行内块级元素了。大小由子元素决定。

  2. 浮动元素直到遇到另一个浮动元素或者遇到它外边缘的包含框或者块级元素才不会向上浮动。

浮动带来的问题

  1. 浮动会导致父元素撑不开，会有父元素高度塌陷问题。

  2. 浮动元素会脱离文档流，会影响内联元素的布局。

清除浮动的方式

  1. 浮动元素后加空 div 标签 并添加样式 clear:both，或者看具体情况也可以使用 clear:left 或者 clear:right。

  2. 父元素使用伪元素 .parent::after{content: ''; clear: both; display: block;}。clear 属性只有块级元素才有效的。所以需要 display:block。

  3. 如果单纯想解决父元素高度塌陷的问题，可以给父元素开启 BFC，或者给父元素设置固定高度。

IFC

IFC指的是行级格式化上下文

IFC特点

  1. 行级上下文内部的盒子会在水平方向，一个接一个地放置。
  2. 当一行不够的时候会自动切换到下一行。
  3. 行级上下文的高度由内部最高的内联盒子的高度决定。

BFC

BFC块级格式化上下文（Block Formatting Context）是一个独立的布局环境。

BFC特点

BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。

主要特点如下：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的上下margin会发生重叠
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算

怎么开启BFC

满足以下四条中的任意一条就可以开启 BFC

  1. float 的值是 right、left。
  2. position 的值是 absolute、fixed。
  3. display 的值是 inline-block、flex、inline-flex、grid、inline-grid、table-cell、table-caption。
  4. overflow 的值是 hidden、scroll、auto。

margin合并

外边距合并只会是上下外边距合并，左右外边距不会合并。

行内元素可以设置左右内外边距，但是不能设置上下内外边距。

计算规则

如果出现外边距合并，我们的计算规则是 两个外边距都是正数取大的正数，两个都是负数取绝对值大的数，一正一负取和。

出现场景

  1. 相邻兄弟元素之间上下margin合并。
  2. 父元素margin-top和子元素margin-top，高度为auto的父元素margin-bottom和子元素margin-bottom。
  3. 空块级元素自身的margin-top和margin-botom合并。

解决方案

对于兄弟元素上下外边距合并

  1. 底部元素变为行内盒子：display: inline-block
  2. 底部元素设置浮动：float
  3. 底部元素的position的值为absolute/fixed

对于父子上外边距合并

  1. 父元素开启BFC
  2. 父元素设置border或padding阻隔margin。
  3. 子元素变为行内盒子：display: inline-block
  4. 子元素position的值为absolute/fixed
  5. 子元素设置浮动：float

对于父子下外边距合并

  1. 父元素开启BFC。
  2. 父元素设置border或padding阻隔margin。
  3. 子元素变为行内盒子：display: inline-block。

对于空元素自身上下外边间距合并

  1. 父元素开启BFC。

margin和padding

边距合并

margin有可能会产生上下外边距合并问题，但是padding不会有外边距合并问题。

背景色

padding能看到背景色，而margin看不到背景色。

行内元素和块级元素的有效性

行内元素只能设置左右margin和padding，设置上下margin和padding会无效。但是对于内联替换元素（img、input），垂直margin和padding会有效，并且没有margin合并的问题。

块级元素上下左右margin和padding都能设置。

margin和padding的百分比计算

margin和padding的百分比值，在垂直方向和水平方向上是一样的，都是相对于父元素宽度计算的。

下面我用例子说明

.container {
  background-color: lavenderblush;
  width: 200px;
  height: 100px;
  border: 1px solid lavenderblush;
}
.child {
  background-color: lawngreen;
  padding: 10%;
  margin: 10%;
}

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

WX20220228-102537.png

这里子元素内外边距设置为10%，值都是20px，所以上下左右内外百分比边距都是根据父元素的宽度来计算的。

宽高

元素的宽高也是我们经常会出问题的一个点。

width和height的值auto、100%区别

width、height的默认值都是auto。

width: 100%是子元素的content box和父元素的content box相等，所以当子元素有内外边距或者边框的时候会超出父元素。

对于块级元素，流体布局之下width: auto自适应撑满父元素宽度。这里的撑满并不同于width: 100%的固定宽度，而是像水一样能够根据自身margin、border和padding的不同而自适应父元素的宽度。也就是说子元素宽度不会超出父元素。

对于内联元素，width: auto则呈现出包裹性，即由子元素的宽度决定。

无论内联元素还是块级元素，height: auto都是呈现包裹性，即高度由子级元素撑开。并且父元素height: auto会导致子元素height: 100%百分比失效。

height: 100%是子元素的content box和父元素的content box相等，所以当子元素有内外边距或者边框的时候会超出父元素。

如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。

下面我用例子说明

ontainer1 {
  padding: 20px;
  margin: 40px;
  background-color: greenyellow;
}
.child1 {
  background-color: lavender;
  margin: 0 20px;
  padding: 20px;
}

.container2 {
  padding: 20px;
  margin: 40px;
  background-color: greenyellow;
}
.child2 {
  background-color: lavender;
  width: 100%;
  margin: 0 20px;
  padding: 20px;
}

.container3 {
  margin: 100px;
  width: auto;
  background-color: greenyellow;
}

.container4 {
  margin: auto;
  width: 500px;
  background-color: lavender;
}

<div class="container1">
  <div class="child1">child width使用默认值 auto 永远被父元素包裹</div>
</div>

<div class="container2">
  <div class="child2">
    child widtd 100%; 如果自身有margin、border或padding会超出父元素
  </div>
</div>

<div class="container3">margin: 100px; width: auto;</div>

<div class="container4">margin: auto; width: 500px;</div>

效果如下图所示

FireShot Capture 009 - width auto height auto - 127.0.0.1.png

min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

max-width会覆盖width，即使width是行类样式或者设置了!important。

min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。

所以 min-width > max-width > width同理min-height > max-height > height

line-height

line-height主要用来设置行高，我们经常使用line-height和height相等来实现文字居中。

line-height值如果是百分比的话则是根据父元素的font-size来进行计算的。

vertical-align

vertical-align属性值有 baseline（默认值）、top、middle、bottom、text-top、text-bottom、sub、super、数值、百分比。

很多人说我设置了vertical-align怎么没有效果，其实vertical-align属性起作用的前提必须是作用在内联元素上。

注意如果元素设置了float: left、dispaly: flex、position: absolute，则其vertical-align属性不能生效，因为此时元素的display不再是inline了。当设置float: left和position: absolute元素的display是inline-block了。

display、position、float的相互关系？

  1. 首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

  2. 然后判断position的值是否为absolute或者fixed，如果是，则float属性失效。

  3. 如果position的值不为absolute或者fixed而是为relative，并且float属性的值存在，则relative相对于浮动后的最终位置定位。

绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的 position 不为 static 的祖先元素的 content box 来计算的。

非绝对定位元素的宽高百分比则是相对于父元素的 content box 来计算的。

沾性定位

沾性定位使用position: sticky表示。

.container {
  height: 2000px;
  padding: 100px 0;
}

.child {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  position: sticky;
  top: 10px;
}

元素滚动到距离浏览器顶部小于 10px 之前，元素为相对定位。之后，元素将固定在与浏览器顶部 10px 的位置，直到 viewport视口 回滚到阈值以下。

position: sticky是相对最近的可滚动元素来计算的，也就是overflow不为visible的元素。

需注意当 position: sticky 的父元素的 overflow 属性设置了默认值 visible 以外的值时，position: sticky 将失效。除非父元素又设置高度。这样sticky元素就会根据这个可滚动父元素来计算。

sticky元素不一定会停留在可视窗口，如果父元素消失，该sticky元素也会消失。不消失的前提是父元素会一直在可视窗口。

sticky元素后面的会覆盖前面的，除非设置了z-index。

CSS中可继承属性有哪些

字体相关

font-family、font-style、font-size、font-weight 等；

文本相关

text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height 等；

颜色相关

color：文本颜色、background-color：元素背景色等；

其他属性

visibility、cursor 等；

对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：

  1. inherit：继承父元素对应属性的计算值；
  2. initial：应用该属性的默认值，比如 color 的默认值是 #000；
  3. unset：如果属性是默认可以继承的，则取 inherit 的效果，否则同 initial；
  4. revert：效果等同于 unset，兼容性差。

word-spacing、white-space、word-berak、word-wrap

word-spacing

word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格，则该属性无效。如果word-spacing值设为100px。那么空格现在占据的宽度是原有的空格宽度+100px的宽度。

white-space

我们都知道如果在html中输入多个空白符，默认会被当成一个空白符处理，实际上就是white-space控制的。

image.png

word-break

word-break 顾名思义这个属性控制单词如何被拆分换行的。

  1. normal 使用浏览器默认的换行规则。
  2. break-all 所有单词或中文句子碰到边界一律拆分换行
  3. keep-all 所有单词或中文句子一律不拆分换行

word-wrap

word-wrap 这个属性也是控制单词如何被拆分换行的 作为word-break的互补

  1. normal 使用浏览器默认的换行规则。。
  2. break-word 一个汉字(一个单词)如果长了会换行。
.s1 {
  word-spacing: 100px;
}

.p1 {
  white-space: normal;
}
.p2 {
  white-space: nowrap;
}
.p3 {
  white-space: pre;
}
.p4 {
  white-space: pre-wrap;
}
.p5 {
  white-space:pre-line;
}

.div1 {
  word-break: normal;
  background-color: lightpink;
}
.div2 {
  word-break: break-all;
  background-color: lightblue;
}
.div3 {
  word-break:keep-all;
  background-color: lightgreen;
}

.w1 {
  word-wrap: normal;
  background-color: lightblue;
}
.w2 {
  word-wrap: break-word;
  background-color: lightpink;
}

<h3>word-spacing</h3>
<div class="s1">
  我是谁我是谁我是谁我是谁我是谁我是谁        我是randy
</div>

<h3>white-space</h3>
<div class="p1">
  normal：默认处理方式。   不保留文字最前面的空格，  其它空格做一个空格处理。       空间不够的时候会换行。
</div>
<div class="p2">     nowrap：不保留文字最前面的空格，   其它空格做一个空格处理。          空间不够的时候不换行。</div>
<div class="p3">
  pre：保留文字的格式并且空间                      不够的时候不会换行。
</div>
<div class="p4">  pre-wrap：保留文字的格式但是空间                            不够的时候会换行。</div>
<div class="p5">  pre-line：   不保留文字最前面的空格，    其它空格做一个空格处理。   空间不够的时候会换行。</div>

<h3>word-break</h3>
<div class="div1">word-break: normal;我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁randyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandy</div>
<div class="div2">word-break: break-all;我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁randyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandy</div>
<div class="div3">keepall我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁randyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandy</div>

<h3>word-wrap</h3>
<p class="w1">word-wrap: normal;我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁randyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandy</p>
<p class="w2">word-wrap: break-word;我是谁我是谁我是谁我是谁我是谁我是谁我是谁randyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandyrandy</p>

样式效果如下

WX20220228-142854.png

这里重点区分下word-wrap和word-break，word-wrap: break-word;的情况下长单词会另外新起一行，并且超出范围后换行(以单词为一个整体)。word-break: break-all的情况下长单词不会另外新起一行，并且超出范围后换行，因此更加严格。

css 有哪些方法？

  1. calc(这里面可以进行+-*/运算)。
  2. attr()获取某个属性的值。
  3. min(x, y, z) 取最小值。
  4. max(x, y, z) 取最大值。
a::after {
  content: attr(href);
}

css变量

不使用css预处理器的情况下我们也能使用css变量。使用--变量名定义变量。使用var(变量名)使用变量。

全局变量

在:root里面定义的是全局变量。

/* 全局变量 */
:root {
  --main-bg-color: blue;
}


.a {
  color: var(--main-bg-color);
}

局部变量

.a {
/* 写在类里面的是局部变量 */
  --color: red;
  color: var(--color);
}

.b {
/* 使用 第一个参数为自定义属性名，第一个参数找不到的时候会使用第二个参数值*/
  color: var(--main-bg-color, red);
}

initial、inherit、unset、revert

在 CSS 中，initial、inherit、unset 和 revert 是用于处理属性值的特殊关键字。

initial 使用浏览器默认值。

inherit 继承父元素的值。前提是该属性支持继承。

unset 不设置属性值。如果一个属性是继承的，unset 将会表现得像 inherit；如果一个属性不是继承的，unset 将会表现得像 initial。

revert 使用浏览器的默认值。revert 关键字会将属性值重置为用户代理（浏览器）默认的样式值。这个关键字会取消对属性的所有修改，包括通过样式表、用户样式表和用户交互设置的任何修改。

Html5和css3新特性

html5

  1. 语义化标签（header、nav、main等），提升可访问性和SEO
  2. 表单增强（新的input类型、验证属性）
  3. 多媒体支持（video、audio标签）
  4. Canvas绘图和SVG矢量图形
  5. Web存储（localStorage、sessionStorage）
  6. Web Workers多线程
  7. 地理定位和WebSocket
  8. 离线缓存

css3

  1. 强大的选择器（属性选择器、伪类、伪元素）
  2. 视觉效果（圆角、阴影、渐变）
  3. 过渡和动画（transition、@keyframes）
  4. 2D/3D变换（transform）
  5. 弹性盒子（Flexbox）和网格布局（Grid）
  6. 媒体查询实现响应式设计
  7. CSS变量（自定义属性）
  8. 滤镜和混合模式

参考文章

高频前端面试题汇总之CSS篇

前端基础篇之CSS世界

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！

关于必须掌握的css知识点的骚操作笔者将持续更新，如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

avatar
文章
阅读
粉丝