CSS 基础知识及面试题

前端小小王

已于 2024-04-26 14:14:27 修改

阅读量929

点赞数 24

文章标签： css 前端

于 2024-04-25 13:42:37 首次发布

本文链接：https://blog.csdn.net/wanglf_clog/article/details/138186890

版权

CSS

Cascading （层叠） Style （样式） Sheets（表）

CSS 的命名规范。

使用有意义的名称：类名应具有描述性，易于理解，反映元素的功能或内容而非表现形式。例如，使用.error-message 而不是 .red-text。
小写和连字符：推荐所有 CSS 类名和 ID 采用小写字母，并使用短横线-连接单词，例如.main-header。
避免使用 ID 选择器：由于 ID 在文档中具有唯一性，过度使用可能导致样式过于具体，难以复用和修改。
区分全局和局部样式：如将全局样式放在 global.css，模块或组件样式放在各自相关的文件中。
避免使用 !important：除非绝对必要，否则避免使用 !important ，因为它会破坏 CSS 的层叠性和可维护性。

CSS 属性书写顺序。

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient()

CSS3 新特性有那些？

属性选择器：input[type="text"] {}
圆角border-radius: ;
阴影：box-shadow: ;，text-shadow: ;
渐变背景：linear-gradient radial-gradient
过渡与动画：transitions: ;，animations: ;
布局：flex，grid

页面导入样式时，使用 link 和 @import 有什么区别？

	link	@import
提供方	HTML 标签	CSS
页面加载时的加载时机	与页面同时加载	页面加载结束后
兼容性	没有	IE5 以上
引入资源类型	CSS、图片等	CSS
是否支持 JS 控制	是	否

CSS 的长度单位都有什么？

像素值（px）：
最常用的单位，精确指定元素的宽度，例如 width: 200px;。像素值提供固定的宽度，不会随容器或屏幕尺寸变化。
百分比（%）：
相对于父元素宽度的百分比，如 width: 50%; 表示元素宽度为父元素宽度的一半。百分比值会随着父元素宽度的变化而自适应调整。
相对单位：
- em：相对度量单位，但是计算起来实在费劲。em 指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前 div 的字体大小是 12 像素，那么 1em 就是 12 像素，如果 div 字体大小是 24 像素，1em 就是 24 像素。
- rem：也是和字体相关的相对度量单位，但是，rem 是相对于根元素的字体大小进行设置的，如果 html 元素中的字体大小设置为 24px，那么针对任意 html 内的元素设置 1rem，均表示的是 24px，大大节省了我们计算字体大小的时间。
- ex、ch、vw、vh、vmin、vmax：分别基于字符大小、字符宽度、视口宽度、视口高度、视口最小边、视口最大边的单位，适合创建与视口尺寸相关的布局。
auto：
让浏览器自动计算元素的宽度。对于块级元素，通常会占据其父元素的 100%宽度，除非有其他限制条件。
max-width 和 min-width：
不直接设置宽度，而是限制元素的最大或最小宽度，允许元素在一定范围内自适应。例如，max-width: 500px; 限制元素宽度不超过 500px。
fit-content 或 min-content、max-content：
- fit-content: 元素宽度会根据其内容自动调整，但不会超过可用空间。
- min-content 和 max-content: 分别用于设置元素宽度为刚好容纳内容的最小宽度和自然状态下内容的最大宽度，不考虑其他布局因素。
calc()：
使用计算函数 calc() 可以进行数学运算来决定宽度，支持加减乘除以及各种单位混合使用，如 width: calc(50% - 100px);。

常用的 CSS 选择器。

标签选择器：选择所有指定标签的元素，例如 p 选择所有 <p> 标签。
类选择器：选择所有指定类名的元素，例如 .red 选择所有类名为 red 的元素。
ID 选择器：选择指定 ID 的元素，例如 #header 选择 ID 为 header 的元素。
属性选择器：选择具有指定属性的元素，例如 input[type="text"] 选择所有 type 属性为 text 的元素。
后代选择器：选择指定标签的所有后代元素，例如 div p 选择所有 <div> 标签内的所有 <p> 标签。
子元素选择器：选择指定标签的所有直接子元素，例如 div>p 选择所有 <div> 标签内的所有直接 <p> 标签。
相邻兄弟选择器：选择指定标签的相邻兄弟元素，例如 h1+p 选择所有紧接在 <h1> 标签后的 <p> 标签。
并集选择器：选择多个标签的元素，例如 h1, p, ul 选择所有 <h1>、<p> 和 <ul> 标签的元素。

序选择器：

/*  选中同级别中的第一个标签 */
.box:first-child {}
/* 选中同级别中的最后一个标签 */
.box:last-child {}
/* 选中同级别中的第 n 个标签 */
.box:nth-child(n) {}
/* 选中同级别中的倒数第 n 个标签 */
.box:nth-last-child(n) {}
/* 选中同级别中同类型的第一个标签   */
.box:first-of-type {}
/* 选中同级别中同类型的最后一个标签   */
.box:last-of-type {}
/* 选中同级别中同类型的第 n 个标签   */
.box:nth-of-type(n) {}
/* 选中同级别中同类型的倒数第 n 个标签 */
.box:nth-last-of-type(n) {}

序选择器+奇数选择器：nth-of-type(odd){}
序选择器+偶数选择器：nth-of-type(even){}

CSS 三大特性。

一. 继承性

作用: 给父元素设置一些属性，子元素也可以使用，这个就称之为继承性
注意点：
1. 并不是所有的属性都可以继承，只有以color/font-/text-/line-开头的属性才可以继承。
2. 在 CSS 的继承中不仅仅是儿子可以继承，只要是后代都可以继承。
3. 所有元素可继承：visibility和cursor。
4. 继承性中的特殊性：
  4.1. a标签的文字颜色和下划线是不能继承的。
  4.2. h标签的文字大小是不能继承的。
5. 不能继承的属性有：display、position、width、height、background等。

二. 层叠性

作用: 层叠性就是 CSS 处理冲突的一种能力。
当同一个元素被两个选择器选中时，CSS 会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
注意点：
- 层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性。

三. 优先级

作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。
优先级判断的三种方式：
1. 是否是直接选中（间接选中就是指继承）：如果是间接选中，那么就是谁离目标标签比较近就听谁的。
2. 相同选择器：如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的。
3. 不同选择器：如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠。
注意：!important > 行内 > id > class|属性 > 标签选择器 > 通配符 > 继承 > 浏览器默认

HTML 的元素显示模式？

元素模式	包含	特点
块级元素	div、p、h1 ～ h6、ul、ol 等	独占一行、可修改宽高、默认宽度事 100%
行内元素	button、span、img、input 等	不独占一行、不可修改宽高、默认宽度是本身宽度
空元素	br、hr、meta 等	自闭合

display 有哪些值，他们的作用是什么?

block：将元素转为块级元素，或显示该元素。
inline：将元素转为行内元素
inline-block：将元素转为行内块级元素
none：元素不在页面中显示
flex：将元素转为弹性盒模型
grid：将元素转为网格模型

display:none; 和 visibility:hidden; 的相同与不同?

相同
1. 两者都是隐藏元素
不同
1. display:none; 不占据空间，不仅触发重绘，还会触发回流。
2. visibility:hidden; 占据空间，只触发重绘。
触发回流的条件
改变位置、改变宽高、显示隐藏
触发重绘的条件
改变背景色、改变文字颜色、改变边框颜色等

怎么理解回流跟重绘？

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。
注意：触发回流一定会触发重绘。

pacity 和 rgba()的区别？

相同
1. 实现透明效果
不同
1. opacity 透明度，0-1 之间的小数，会继承父元素。
2. rgba() 透明度，0-1 之间的小数，不会继承父元素。

水平垂直居中一个元素。

/* 方法1:给当前盒子设置 */
.box {
  background-color: green;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 方法2:给要居中盒子的父盒子设置 */
.father {
  background-color: green;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

盒模型（Box Model）。

盒模型的组成，由里向外content、padding、border,margin。
- 在 IE 盒子模型中，width 表示content + padding + border这三个部分的宽度。
- 在标准的盒子模型中，width 指 content 部分的宽度。

/* 通过box-sizing修改盒模型 */
.box {
  box-sizing: content-box; /* 标准盒模型。*/
  box-sizing: border-box; /* IE盒模型。*/
}

什么是边界塌陷？

父 div 中包含子 div，如果给子 div 设置 margin-top，而实际展示效果是给父子元素增加了 margin-top。

解决方式：给父元素添加 border: 1px solid #000000;
解决方式：给父元素设置 overflow: hidden;

什么是 margin 纵向重叠？

两个兄弟关系 div，上面的设置 margin-bottom，下面的设置 margin-top，两个 div 之间的值由 margin 比较大的决定。

解决方式：给下面的设置 display: inline-block;
解决方式：给上面的设置 display: table-caption;

BFC 是什么？

BFC 全称是块级格式化上下文（Block Formatting Context），是创建一个独立的渲染区域，有自己的渲染规则，不会影响外部元素。
触发 BFC 的条件：
1. float 的值不为 none
2. overflow 的值不为 visible
3. position 的值为 absolute 或 fixed
4. display 的值为 inline-block
作用：防止 margin 重叠、清除浮动。

padding 和 margin 有什么不同?

padding 是内边距，margin 是外边距。内外边距的作用对象不同。内边距作用于自身，而外边距作用于外部对象。

网页布局的三种方式。

标准流（文档流/普通流）
- 标准流是最基本的布局方式。在标准流中，元素按照 HTML 文档的顺序自上而下排列。块级元素（如<div>, <p>）默认独占一行，行内元素（如<span>, <a>）则在一行内从左到右排列，遇到边界就换行。
浮动流
- 通过设置元素的 float 属性可以使元素脱离标准流（float:left;或float:right），浮动到左侧或右侧。浮动流容易引发“浮动塌陷”问题，需要手动清除浮动。
- 注意：
  1. 浮动流中任何元素都具有行内块级元素相似的特性。
定位流
- 通过设置元素的 position 属性来实现定位。包括相对定位(position: relative;)、绝对定位(position: absolute;)和固定定位(position: fixed;)。定位布局提供了灵活的元素摆放能力。
- position 值的区别？
  1. static 默认值，就是没有定位。
  2. relative 相对定位，给元素设置相对于自己原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
  3. absolute 是绝对定位，默认情况下是以 doucment 为参考点，如果祖先元素中有一个元素也是定位流(相对定位、绝对定位、固定定位)，那么就是以这个元素为参考点。
  4. fixed 是一种特殊的绝对定位，也会脱离文档流，只不过 fixed 的元素是相对浏览器可视窗口来定位的。
  5. sticky 粘性定位，是 CSS3 新增的属性，粘性定位的元素是相对定位的，它是以浏览器可视窗口为参照点移动元素。必须包含top、right、bottom、left属性之一，才会生效。

常见清除浮动的方式？

触发 BFC。
给浮动元素的父元素添加overflow:hidden;

.给浮动元素的父级元素添加伪元素。

.box:after,
.box:before {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

什么是雪碧图?有什么优缺点?

将多个小图片整合到一张大图片上，减少网络请求次数，提高性能。
- 优点
  1. 减少请求次数，提高性能。
  2. 减少图片总大小。
- 缺点
  1. 维护成本高，例如图片的宽高或位置变化。
  2. 图片体积过大，加载时间长。

CSS 过渡。

语法：transtion:要过度的属性过渡需要的时间运动曲线（可省略）触发时间（可省略）;

div {
  width: 100px;
  height: 50px;
  background-color: lightgreen;
  /* 要素1. 用transition-property来告诉浏览器哪个属性要发生变化 */
  transition-property: width, background-color;
  /* 要素2. 用transition-duration属性告诉浏览器过渡效果执行的时间 */
  transition-duration: 2s;

  /* 简写形式 */
  /* transition: width 1s ease-out 1s; */
}

/* 要素3. 当鼠标悬停到div的时候,属性发生变化 */
div:hover {
  width: 300px;
  background-color: deeppink;
}

什么是三栏布局？

两侧固定宽度，中间宽度自适应，且中间栏要再 DOM 结构上要优先于两侧，便于先渲染。这样的布局方式叫做三栏布局。

.container {
  display: flex;
}
.center {
  flex: 1;
}
.left {
  flex: 0 0 200px;
  order: -1;
}
.right {
  flex: 0 0 200px;
}

<div class="container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

CSS 一些小技巧。

/* 给所有元素增加上边框，排除掉第一个 */
ul li + li {
  border-top: 1px solid #333;
}

/* 鼠标变小手 */
li {
  cursor: pointer;
}

/*文字显示为一行，固定宽度，超出部分显示三个点*/
.container {
  width: 200px;
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}
/* 多行 */
.container {
  display: -webkit-box; /* 使用Webkit弹性盒子模型 */
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 修改光标颜色 */
input {
  caret-color: green;
}

/* 渐变背景颜色 */
.gradient {
  background: linear-gradient(to right, red, green, blue);
}

/*css画一个三角形 */
.box {
  border: 50px solid transparent;
  width: 0;
  height: 0;
  border-top: 50px solid green;
}

/* 让图片变模糊 */
img {
  filter: blur(10px);
}

/* 让网站所有颜色变成黑白 */
body {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}