当前位置：首页 > article >正文

前端八股文(二)CSS 持续更新中。。。

article 2024/11/7 13:10:06

1.css3新增

新增属性选择器、伪类选择器
新增text-shadow、box-shadow、border-radius
新增transform、transition、动画@keyframes、animation
新增flex、grid布局，媒体查询@media
新增box-sizing：border-box怪异盒模型 content-box标准盒模型

2.说一说盒模型

标准盒模型：box-sizing：content-box

content宽高不包括padding和border，实际宽高=content宽高+padding+border

怪异盒模型：box-sizing：border-box

content宽高包含padding和border

3.css选择器和优先级

行内样式 style：优先级为 1,0,0,0。
ID 选择器 #id：优先级为 0,1,0,0。
类选择器、属性选择器、伪类选择器（如 .class、[type="text"]、:hover）：优先级为 0,0,1,0。
元素选择器、伪元素选择器（如 div、p::before）：优先级为 0,0,0,1。
通配符 * 和关系符（如后代选择器、子选择器 > 、兄弟选择器 + ）：优先级为 0,0,0,0。
!important 优先级最高，用于覆盖无 !important 的规则。

4.CSS可继承属性和不可继承属性

可继承

font-weight
color
font-size
line-height
cursor等

不可继承

margin、padding、border
display
background
overflow
width、height
position等

5.dislpay的属性和作用

属性	作用
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	行内块级元素，默认宽度为内容宽度，可以设置宽高，同行显示
table	块级表格
flex	flex容器布局
none	隐藏元素
inherit	从父类继承display属性

6.隐藏元素的方式

display: none

元素完全从文档流中移除，不占据空间。

不能触发事件。因为元素被彻底隐藏，点击、悬停等事件都不会生效。
visibility: hidden`

元素隐藏但仍保留在文档流中，占据空间。

不能触发事件。虽然元素还在文档流中，但 visibility: hidden 会阻止鼠标事件的触发。
opacity: 0

元素的透明度设置为 0，完全透明。

能触发事件。opacity: 0 只是改变了元素的透明度，元素仍然在页面上，占据空间，且可以接收鼠标事件。
z-index: 负值

通过设置负 z-index，可以将元素放到其他元素的下方。

视情况而定。如果有其他元素遮盖住它，则不能触发事件；如果没有遮盖，它仍可以触发事件。
position: absolute（将元素定位到可视区域以外）

描述：将元素设置为绝对定位并移出视窗。

是否能触发事件：不能触发。元素位于可视区域之外，无法被用户看到或与之交互，因此不会触发事件。

7.单行、多行文本溢出（不太熟，没问过

单行

 css 代码解读复制代码overflow: hidden; // 溢出隐藏
 text-overflow: ellipsis; // 溢出用省略号显示
 whtie-space: nowrap; //规定段落中的文本不进行换行

多行

 CSS 代码解读复制代码overflow:hidden
 text-overflow: ellipsis;     // 溢出用省略号显示
 display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
 -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
 -webkit-line-clamp:3;        // 显示的行数

8.less和sass的区别？

less和sass都是css预处理器

区别：

编译环境不同：sass是在服务端进行处理的，主要有dart-sass、node-sass；less是通过引入less.js对.less文件进行编译处理的，可以在开发时生成css文件直接打包到生产包内

变量作用域不同：sass的变量是全局作用域、less的变量像是函数作用域

变量定义符不一样：sass是$、less是@

sass可以使用条件语句（if、else、for等）、函数，less不可以

9.link和@import的区别

link：

通常放在html文件的head中使用
用来加载css文件、icon文件等（通过定义rel属性：stylesheet、icon等
会并行加载资源（使用rel:preload会预加载

@import：

在css文件顶部声明
将样式表引入当前的样式表
串行加载，在页面加载完毕后被加载

10.常用css单位有哪些

px，像素
百分比%
rem：相对于根元素的font-size
em：相对于父元素的font-size
vw、vh：视图窗口(viewport)占比

11.水平垂直居中

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

 .parent {
     position: relative;
 }
  
 .child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
 }

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

 .parent {
     position: relative;
 }
  
 .child {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
 }

使用**flex布局**，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

 .parent {
     display: flex;
     justify-content:center;
     align-items:center;
 }

12.flex属性理解

容器属性：

display: flex;：定义一个弹性容器。
flex-direction：设置主轴方向（如 row、column、row-reverse、column-reverse）。
flex-wrap：控制子项换行（如 nowrap、wrap、wrap-reverse）。
justify-content：设置主轴上的对齐方式（如 flex-start、flex-end、center、space-between、space-around）。
align-items：设置交叉轴上的对齐方式（如 flex-start、flex-end、center、baseline、stretch）。
align-content：用于多行的对齐方式（如 flex-start、flex-end、center、space-between、space-around、stretch）。

子项属性：

flex-grow：定义子项的放大比例（默认为 0，表示不放大）。
flex-shrink：定义子项的缩小比例（默认为 1，表示可以缩小）。
flex-basis：定义子项在主轴上的初始大小（可以是具体值或 auto）。
flex：简写属性，结合了 flex-grow、flex-shrink 和 flex-basis，默认： flex: 0 1 auto;。
align-self：允许单个子项覆盖 align-items 的对齐设置。

flex:1表示：flex:1 1 auto，即flex-grow:1，flex-shrink:1，flex-basis:auto

13.对BFC的理解？如何创建一个BFC

bfc：块级格式化上下文，在BFC布局里面的元素不受外面元素影响。

创建BFC条件

设置浮动：float有值且不为空
设置绝对定位：position（absolute、fixed）
overfilow值为：hidden、auto、`scroll
display值为：inline-block、flex、table-cell、table-caption、等

BFC作用：

解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

14.position 常用属性默认值是什么

static 默认值，没有定位，元素正常在文档流中显示
relative 相对定位，相对于原来的位置进行定位，占有原来的体积
absolute 绝对定位，相对于有定位的父元素、祖先元素进行定位。
fixed 绝对定位，相对于浏览器窗口
sticky 粘性定位，基于用户滚动位置

15.画一个三角形

通过设置不同方向边框来实现

 CSS 代码解读复制代码div {
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid transparent;
     border-left: 50px solid transparent;
 }