前端八股CSS篇上

DanyHope

已于 2025-05-05 16:03:11 修改

阅读量1.4k

点赞数 46

分类专栏：前端八股文文章标签： css 前端 css3

于 2025-05-04 22:16:24 首次发布

本文链接：https://blog.csdn.net/loverdany/article/details/147704504

版权

前端八股文专栏收录该内容

3 篇文章

订阅专栏

一、CSS选择器有哪些，优先级分别是是什么

（一）有哪些：

1.标签选择器：通过标签名选取元素，<p> <h1> <h2> <div>

2.类选择器：类为class，在标签中加入class=“”，css中以“.”开头，如.container .body

3.ID选择器：以#开头，如#header #app

4.后代选择器：选取元素的后代元素，如div p 选取所有div元素的后代p元素。

5.属性选择器：根据元素的属性值选取元素，[href] [title] [src]

6.相邻兄弟选择器：选取元素的相邻的兄弟元素，如h1+p，选取紧接在h1元素后面的p元素

7.通用选择器：选取所有元素，使用*表示

（二）优先级：

1.优先级从高到底排列：
标签内联样式 ->ID选择器 ->类选择器 ->属性选择器 ->标签选择器 ->通用选择器

2.若存在多个选择器的优先级相同，则后面出现的选择器具有更高的优先级

3.！important 声明具有最高优先级，但是不是很美观，尽量少的使用。

4.结合组件设计的优先级思考：

组件中的样式权值尽量低，方便在对组件进行复用时的样式的修改。

如在组件中可以使用标签选择器

/* 组件中样式的权值的设置需要考虑到之后复用的时候修改要方便 */
input{
    width: 200px;
}

在页面中使用类选择器，既可以使用组件中的样式，也可以轻松覆盖想要改变的样式。

/* 用class类型修改权值为10，可以轻松覆盖组件中低权值的样式设置 */
.my-input{
    width: 400px;
}

类选择器+标签选择器（组合）

/* 这样定义的权值为11，在页面中定义class就不能覆盖此样式，此样式权值较高，不推荐在组件中使用 */
.search-wrap input{
    width: 200px;
}

这样的css样式定义权值/优先级高，类名选择器也不能覆盖，组件的设计中，最好不要出现这样的选择器定义类型。

二、有哪些常见的CSS布局

（一）盒模型布局

核心逻辑：通过margin、borde、padding、content来控制元素大小和间距。

适用场景：基础布局，任何元素默认遵循盒模型

示例代码:

.box {
  box-sizing: border-box; /* 替代盒模型 */
  width: 300px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
}

（二）浮动布局

核心逻辑：通过float：left/right 使元素脱离文档流，横向排列。通过clearfix清除浮动，防止父容器高度塌陷。

适用场景：图文混排，多列布局

示例代码：

<div class="clearfix">
  <div class="float-left">左侧</div>
  <div class="float-right">右侧</div>
</div>

<style>
.float-left { float: left; width: 30%; }
.float-right { float: right; width: 70%; }
.clearfix::after { /* 清除浮动 */
  content: "";
  display: block;
  clear: both;
}
</style>

（三）定位布局

核心逻辑：

position：relative 相对自身原本位置偏移

position：absolute 相对最近定位祖先元素偏移

position：fixed 相对视口固定

适用场景：悬浮按钮，模态框，固定导航栏

示例代码：

口诀：子绝父相

.parent { position: relative; }

.child {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
}

（四）弹性布局

核心逻辑：

容器属性：display: flex、justify-content（主轴对齐）、align-items（交叉轴对齐）。

适用场景：一维响应式布局（导航栏、卡片列表）

示例代码：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<style>
.flex-container {
  display: flex;
  gap: 10px; /* 间距 */
  justify-content: space-between;
}
.flex-item { flex: 1; } /* 等分宽度 */
</style>

（五）网格布局

核心逻辑：

容器属性：display: grid、grid-template-columns（列宽）、grid-template-rows（行高）。

适用场景：

二维复杂布局（仪表盘、新闻门户）

示例代码：

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 两列，第一列固定宽度 */
  grid-template-rows: 60px 1fr;
  gap: 10px;
}
.header { grid-column: 1 / -1; } /* 跨全部列 */
.sidebar { grid-row: 2; }
.main { grid-row: 2; }
</style>

（六）经典布局方案

表格布局、圣杯布局、双飞翼布局等。

圣杯布局

核心逻辑：两侧边栏固定，中间内容自适应，优先加载主内容。

代码特点：使用浮动 + 负边距 + 相对定位。

双飞翼布局

核心逻辑：通过嵌套 div 避免圣杯布局的定位问题。

代码特点：主内容外层包裹 div，通过 margin 腾出边栏空间。

（七）总结对比表格

布局方式	维度	核心属性	适用场景
盒模型	一维	margin/padding	基础元素布局
浮动	一维	float/clearfix	传统多列布局
定位	二维	position	悬浮元素、弹窗
弹性	一维	display:flex	响应式导航、卡片
网格	二维	display:grid	复杂仪表盘、门户
圣杯/双飞翼	二维	浮动+负边距	经典三栏布局

三、CSS中的1像素问题，解决方案

（一）问题

在高分辨率的屏幕上，实际显示的1像素的边框或者细线，会比物理1px更宽或者更粗，导致边框或者细线比预期更粗或者更宽，影响页面美观和用户体验。

（二）原因

高分辨率的屏幕的像素密度比传统的屏幕要高，在屏幕上显示的1px对应的物理像素个数也会更多，导致视觉上更粗。

（三）解决方案

1.使用图片代替边框或者细线。

可以保证显示效果一致，但是需要制作多张图片，而且图片会影响页面加载效率。

2.使用scale进行缩放

使用transform缩放0.5像素大小的边框，达到渲染1px的效果。

示例代码：

.border {
  position: relative;
  border: 1px solid #000;
}
.border:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #000;
  transform: scale(0.5);
}

3.border-image

该方法可以实现将一张图片作为边框样式。图片会自动拉伸或者重复以填充边框。这种方法需要制作一张边框的图片，但是可以通过css控制图片的填充方式和边框样式，较为灵活。

示例代码：

.border {
  border: 1px solid transparent;
  border-image: url(border.png) 1 1 stretch;
}

4.使用css3的box-shadow，用阴影模拟边框

示例代码：

.border {
  box-shadow: 0 0 0 1px #000;
}

5.使用viewport

在head中添加如下代码可以解决1px问题

示例代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

四、CSS盒子模型详细介绍

（一）详细介绍

盒子模型将每个html元素表示为一个矩形盒子，盒子包括

在这里插入图片描述

内容（content）：元素的实际内容，由 width 和 height 属性决定
内边距（padding）：内容和边框之间的空间，由padding属性决定
外边距（margin）：内容和外边距之间的边框，由border属性决定
边框（border）：盒子的边框，由border属性决定

（二）什么可以决定盒子的大小？

width/height + padding + border + margin

（三）盒子模型分类？

标准盒子模型：

盒子大小 = width + padding + border + margin

怪异盒子模型：

盒子大小 = width + margin （width中已经包含padding+border）

五、哪些CSS属性可以继承

（一）什么是属性继承

属性在父元素中设置后，子元素可以继承相同的属性值。注意：这些属性只能继承，不能被子元素覆盖。而且并不是所有的html元素都可以继承，具体需要查看相关属性文档

（二）常见的可继承属性

font-family
font-size
font-weight
font-style
color
letter-spacing
word-spacing
line-height
text-align
text-indent
text-transform
visibility

此题目可以补充回答，”你在什么情况下用到了继承“

六、响应式设计

（一）概念

通过技术手段，使得网站或应用在不同终端的设备（电脑、平板、手机等）上可以自适应地呈现最佳的用户体验。

（二）基本原理

1.媒体查询（Media Queries）

通过检测设备屏幕特性（宽度、方向、分辨率等）动态加载样式规则

示例代码：

/* 当屏幕宽度 ≤ 768px 时应用移动端样式 */
@media (max-width: 768px) {
  .container { padding: 10px; }
}

2.流体网格（Fluid Grids）

使用百分比、fr单位等代替固定像素值，实现布局自适应。

.grid-item {
  width: 100%;       /* 移动端占满容器 */
  @media (min-width: 768px) {
    width: 50%;      /* 平板端两列布局 */
  }
  @media (min-width: 1200px) {
    width: 33.33%;   /* PC端三列布局 */
  }
}

3.弹性图片与媒体

确保图片和视频随容器缩放。

示例代码：

img, video {
  max-width: 100%;  /* 防止溢出容器 */
  height: auto;     /* 保持宽高比例 */
}

（三）实现

1.移动优先（Mobile First）

先设计移动端样式，再通过媒体查询增强大屏体验。

示例代码：

/* 默认移动端样式 */
.navbar { font-size: 14px; }

/* 大屏增强 */
@media (min-width: 768px) {
  .navbar { font-size: 16px; }
}

2.断点选择（Breakpoints）

常用断点参考（单位：px）：

手机竖屏：≤ 576
手机横屏/小平板：576 ~ 768
平板竖屏：768 ~ 992
平板横屏/小桌面：992 ~ 1200
大桌面：≥ 1200

3.视口控制（Viewport Meta）

HTML中必须声明视口元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

（四）优缺点

优点：提高用户体验、提高网站访问率和转化率、降低开发成本

缺点：需要在各种设备上进行充分测试和调试，可能需要加载大量的CSS和JavaScript文件等。

七、CSS3新增的特性

flexbox弹性布局
grid网格布局
animation动画效果
transform变换效果
transition过渡效果
box-sizing盒模型
Shadow阴影效果
text-shadow文字阴影效果
Gradient 渐变效果
border-radius圆角效果

八、如何用CSS实现一个宽高自适应的正方形

1.使用padding或vw单位，实现宽高自适应的正方形

<div class="square"></div>

.square {
  width: 25vw; /* 利用vw单位实现自适应宽度 */
  padding-top: 25vw; /* 利用padding实现自适应高度 */
  background-color: red;
}

上面的代码通过vw单位，设置了正方形的宽度为屏幕的1/4，使用padding-top设置正方形的高度也为屏幕宽度的1/4，通过这这两种设置实现了一个宽高自适应的正方形。

2.伪元素

<div class="square"></div>

.square {
  position: relative;//为伪元素定位建立上下文
  width: 50%;//设置正方形宽度为父容器的一半
  background-color: red;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;//创建1：1宽高
}//若需要创建不同比例的矩形，可以修改 padding-top 的百分比值