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

研一自救指南 - 07. CSS面向面试学习

article 2026/1/15 12:15:00

最近的前端面试多多少少都会遇到css的提问，感觉还是要把重点内容记记背背。这里基于b站和我自己面试的情况整理。

 20250418更新：

1. BFC

Block Formatting Context，一个块级的盒子，可以创建多个。里面有很多个块，他们的布局、浮动元素和其他元素的相互作用受BFC规则的影响。

内部每个块从上到下一个一个放，垂直方向由margin，上下margin可能重叠，BFC不会与float box重叠。

对于浮动元素，如果不用BFC，肯可能有高度丢失的问题

形成BFC的条件：

float不为none

overflow为auto、scroll、hidden

display为

2. 容器的  flex

让块级元素可以整齐排列，而不是一行一行

display: flex

主轴方向：

flex-direction:row（默认） / row-reverse / column（垂直） / column-reverse

主轴排列方式：

justify-content: flex-start（顺着主轴）/ flex-end（逆着主轴）/ center（居中） / space-between（左右靠边，均分） / space-around（均分） / baseline

交叉轴的排列方式：

align-items:stretch（沿着交叉轴拉伸） / flex-start（垂直轴起始） / flex-end（垂直轴结束） / center

多行垂直轴排列方:

align-contents:stretch / flex-start / flex-end / center / space-between / space-around

间距：

gap: 10px

换行：

flex-wrap: nowrap（默认不换行） / wrap（换行） / wrap-reverse（从上到下换行）

3. 盒子模型

content（元素实际内容）-padding-border-margin

content: width / height

padding: padding-top / bottom / left / right

对于块级元素，默认占满一行；对于行内元素，如span，不能直接通过width和height设置，设置display: inline-block就可以控制宽高了

默认 width 和 height 是只包括 content 的，再有 margin 就大了，即盒子的默认模式为content-box，即box-sizing: border-box，否则可以设置box-sizing: border-box

border: solid（实线）、点线（dotted）、double（双实线）、dashed（虚线）

4. CSS定位

position: static（默认，设置top、right无效） / relative（通过自己定位，在文档流（就是还会在文档里留位置）） / sticky（不设置top等和static没区别，设置后，先static再fixed） / fixed（浏览器窗口左上角，脱离文档流，不影响其他元素定位） / absolute（绝对定位，脱离文档流，相对于最靠近它的非static的父容器，如果没有）

5. 样式使用方法

优先级：内联>内部>外部

内联样式：直接写在html元素的标签中  style="color=red"

内部样式：在style块里写

外部样式：在head里写<link rel="stylesheet" herf="./css/style.css">

6. 选择器：

id>class>标签名

  • 元素选择器：h2  直接写
  • 类选择器：class   .class
  • id选择器：id    #id
  • 通用选择器： * 选择所有元素
  • 子元素选择器：   .father > #id/.class
  • 后代选择器：  .father p{}
  • 相邻兄弟选择器：h3 + p{}    (相当于是对h3和p相邻的情况下，对p做样式)
  • 伪类选择器：

7. 属性

style="font: bolder 50px" 复合属性，可以写在一起

font-size: 字体大小

font-family:字体

font-weight:字体粗细

line-height: 行高

 8. 浮动会导致父元素坍塌

解决方法：（1）在父元素写 overflow:hidden；（2）

旧内容：

1. 选择器

p{
}// 对于id  id = "demo"
#demo {
}// 对于类  class = "center"
.center {
}// 对于  class = "center" 的<p>
p.center {
}// 允许class = "center large"
可以分别设置样式，然后两个都使用等等// 对于所有元素
* {
}// 对于多个选择器
h1, h2, p {
}

2. 外部CSS

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

rel="stylesheet" 是告诉浏览器这是一个CSS文件，type="text/css"告诉浏览器文件类型是CSS，herf="mystyle.css"指定样式文件的路径

3. 一些内容

opacity透明度，0-1.0，越低越透明

或者直接这样写   background: rgba(0, 128, 0, 0.3)

4. 背景设置

body {
  background-image: url("paper.gif");

  background-repeat: no-repeat;

  background-attachment: fixed;  // 固定

}

body {
  background-image: url("bgdesert.jpg");

  background-repeat: repeat-x;

  background-position: right top;

  background-attachment: scroll;  // 滚动

}

5. v-bind和v-model

v-model 是双向绑定语法，html和js变量中的值会同步发生变化，js和ui是同步的

v-bind 会被缩写成：  表示绑定的是表达式的值

v-model.number=" "：把输入或选中的值自动转为数字（能转则转，适当扔，转不了拉倒）

v-model.trim：自动去除字符串两边的空格

v-model.lazy：不在 input 时更新，而是在 blur 时更新（失焦后更新）

6. axios

是一个用于发送http请求的库，可以从前端向服务器端发送或获取数据


 

相关文章：

研一自救指南 - 07. CSS面向面试学习

最近的前端面试多多少少都会遇到css的提问&#xff0c;感觉还是要把重点内容记记背背。这里基于b站和我自己面试的情况整理。 20250418更新&#xff1a; 1. BFC Block Formatting Context&#xff0c;一个块级的盒子&#xff0c;可以创建多个。里面有很多个块&#xff0c;他们…...

编程日记 2025/12/30 22:13:17

图灵奖得主LeCun：DeepSeek开源在产品层是一种竞争，但在基础方法层更像是一种合作；新一代AI将情感化

图片来源&#xff1a;This is World 来源 | Z Potential Z Highlights&#xff1a; 新型的AI系统是以深度学习为基础&#xff0c;能够理解物理世界并且拥有记忆、推理和规划能力的。一旦成功构建这样的系统&#xff0c;它们可能会有类似情感的反应&#xff0c;但这些情感是基…...

编程日记 2025/12/21 10:47:27

从GET到POST：HTTP请求的攻防实战与CTF挑战解析

初探HTTP请求：当浏览器遇见服务器 基础协议差异可视化 # 典型GET请求 GET /login.php?username=admin&password=p@ssw0rd HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0# 典型POST请求 POST /login.php HTTP/1.1 Host: example.com Content-Type: application/x…...

编程日记 2025/12/4 1:44:47

SQL-exists和in核心区别​、 性能对比​、适用场景​

EXISTS和IN的基本区别。IN用于检查某个值是否在子查询返回的结果集中，而EXISTS用于检查子 查询是否至少返回了一行数据。通常来说，EXISTS在子查询结果集较大时表现更好，因为一旦找 到匹配项就会停止搜索，而IN则需要遍历整个结果集。 在 SQL 中，EXISTS 和 IN 都可以用于…...

编程日记 2025/12/5 18:31:27

Charles 安装与使用详解：实现 App 与小程序 HTTPS 抓包

在日常的移动端开发、接口调试或逆向分析中&#xff0c;我们经常需要抓取移动 App 或微信小程序的 HTTP/HTTPS 请求。Charles 是一款经典强大的代理抓包工具&#xff0c;凭借简单的界面和强大的功能&#xff0c;成为了 macOS 抓包的首选工具之一。 本文将详细介绍 Charles 的安…...

编程日记 2025/12/5 4:02:44

使用Redis5.X部署一个集群

文章目录 1.用Redis5.x来创建Cluste2. 查看节点信息 nodes3. 添加节点 add-node4.删除节点 del-node5.手动指定从节点 replicate6.检查集群健康状态 check 建议使用5.x版本。 首先&#xff0c;下载Redis&#xff0c;根据自己的环境选择版本。 一键启动Redis集群文件配置。 ech…...

编程日记 2025/12/21 9:12:59

Ubuntu Linux 中文输入法默认使用英文标点

ubuntu从wayland切换到x11, 然后安装fcitx(是fcitx4版本)和 fcitx-googlepinyin, 再sudo dpkg -i 安装百度输入法deb包. 在fcitx配置中, 附加组件,打勾高级, 取消打勾标点支持和全角字符. 百度输入法就可以默认用英文标点了. 而google拼音输入法的问题是字体大小没法保存,每…...

编程日记 2025/12/20 13:08:47

Mermaid 是什么，为什么适合AI模型和markdown

什么是 Mermaid&#xff1f; Mermaid 是一个基于 JavaScript 的开源绘图和图表工具&#xff0c;允许用户通过简单的文本语法创建图表。它支持生成流程图、时序图、类图、甘特图等多种类型的可视化内容&#xff0c;并直接从类似 Markdown 的代码中渲染。Mermaid 因其与 Markdow…...

编程日记 2026/1/12 21:38:17

Java漏洞原理与实战

一、基本概念 1、序列化与反序列化 (1)序列化:将对象写入IO流中&#xff0c;ObjectOutputStream类的writeobject()方法可以实现序列化 (2)反序列化:从IO流中恢复对象&#xff0c;ObjectinputStream类的readObject()方法用于反序列化 (3)意义:序列化机制允许将实现序列化的J…...

编程日记 2026/1/8 3:12:17

第十届团体程序设计天梯赛-上理赛点随笔

2025.4.19来到军工路580号上海理工大学赛点参加cccc 校内环境挺好的&#xff0c;校内氛围也不错&#xff1b;临走前还用晚餐券顺走一袋橘子 再来说说比赛 首先是举办方服务器爆了&#xff0c;导致前10分钟刷不出题&#xff0c;一个多小时还上交不了代码 然后就是我用py总有几…...

编程日记 2025/12/26 9:31:31

考公：数字推理

文章目录 1.真题12 312 530 756 ()-3 3 1 12 17 ()356 342 333 324 ()30 28 27 25 () 2215105 1494 1383 1272 ()2 3 8 21 46 ()4/25 1/4 4/9 1 ()39 416 630 848 ()5 8 11 17 () 10714 21 40 77 () 229 2.数字推理方法2.1 差值法2.2 比值法&#xff08;乘法关系&#xff09;2.…...

编程日记 2026/1/9 4:51:24

树莓派超全系列教程文档--(32)config.txt常用音频配置

config.txt常用音频配置 板载模拟音频&#xff08;3.5mm耳机插孔&#xff09;audio_pwm_modedisable_audio_ditherenable_audio_ditherpwm_sample_bits HDMI音频 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 板载模拟音频&#xff08;3.5mm耳机…...

编程日记 2026/1/12 15:27:40

面试专栏-02-MySQL知识点(第二部分)

6、锁 1、分类&#xff1a; 全局锁&#xff1a;锁住数据库中的所有表表级锁&#xff1a;每次操作锁住整张表行级锁&#xff1a;每次操作锁住对应行的数据 2、全局锁 加锁后&#xff0c;整个实例只能进行读取操作&#xff0c;从而保证数据的完成性和一致性。 特点&#xff…...

编程日记 2026/1/7 21:25:20

55、⾸屏加载⽩屏怎么进⾏优化

答&#xff1a; &#xff08;1&#xff09;使⽤CDN 减⼩代码体积&#xff0c;加快请求速度&#xff1b; (2)SSR通过服务端把所有数据全部渲染完成再返回给客⼾端&#xff1b; (3) 路由懒加载&#xff0c;当⽤⼾访问的时候&#xff0c;再加载相应模块&#xff1b; (4) 使⽤外…...

编程日记 2026/1/7 22:24:53

python函数之间嵌套使用yield

假设一种场景&#xff0c;函数 A 可以在获得函数 B 的返回值&#xff08;即一个生成器对象&#xff09;后&#xff0c;再次对其进行 yield 操作。这是因为 Python 的生成器是可迭代的&#xff0c;你可以在一个生成器中迭代另一个生成器&#xff0c;并将其结果逐个 yield 出去。…...

编程日记 2026/1/12 20:15:38

【MySQL数据库入门到精通】

文章目录 一、SQL分类二、DDL-数据库操作1.查询2.创建数据库3.删除数据库4.使用数据库 三、DDL-表操作1.查询 一、SQL分类 根据功能主要分为DDL DML DQL DCL DDL:Date Definition Language数据定义语言&#xff1a;定义数据库&#xff0c;表和字段 DML:Date Manipulatin Lan…...

编程日记 2026/1/8 22:09:10

[Swift]pod install成功后运行项目报错问题error: Sandbox: bash(84760) deny(1)

操作&#xff1a; platform :ios, 14.0target ZKMKAPP do# Comment the next line if you dont want to use dynamic frameworksuse_frameworks!# Pods for ZKMKAPPpod Moyaend pod install成功后运行报错 报错&#xff1a; error: Sandbox: bash(84760) deny(1) file-writ…...

编程日记 2026/1/15 6:33:27

游戏引擎学习第233天

原地归并排序地方很蒙圈 game_render_group.cpp&#xff1a;注意当前的SortEntries函数是O(n^2)&#xff0c;并引入一个提前退出的条件 其实我们不太讨论这些话题&#xff0c;因为我并没有深入研究过计算机科学&#xff0c;所以我也没有太多内容可以分享。但希望在过去几天里…...

编程日记 2025/12/27 13:14:10

卷积神经网络基础（二）

停更好久的卷积神经网络基础知识终于开始更新了哈哈&#xff0c;今天主要介绍的是误差反向传播法。 目录 一、计算图 1.1 用计算图求解 1.2 局部计算 1.3 为什么采用计算图 二、链式法则 2.1 计算图的反向传播 2.2 链式法则 2.3 链式法则和计算图 三、反向传播 3.1 …...

编程日记 2025/12/27 4:10:20

探索大语言模型（LLM）：定义、发展、构建与应用

文章目录 引言大规模语言模型的基本概念大规模语言模型的发展历程1. 基础模型阶段&#xff08;2018年至2021年&#xff09;2. 能力探索阶段&#xff08;2019年至2022年&#xff09;3. 突破发展阶段&#xff08;以2022年11月ChatGPT的发布为起点&#xff09; 大规模语言模型的构…...

编程日记 2026/1/8 19:49:57

树莓派超全系列教程文档--(33)树莓派启动选项

树莓派启动选项 启动选项start_file &#xff0c;fixup_filecmdlinekernelarm_64bitramfsfileramfsaddrinitramfsauto_initramfsdisable_poe_fandisable_splashenable_uartforce_eeprom_reados_prefixotg_mode &#xff08;仅限Raspberry Pi 4&#xff09;overlay_prefix配置属…...

编程日记 2026/1/12 5:22:56

PTA:模拟EXCEL排序

Excel可以对一组纪录按任意指定列排序。现请编写程序实现类似功能。 输入格式: 输入的第一行包含两个正整数 n (≤105) 和 c&#xff0c;其中 n 是纪录的条数&#xff0c;c 是指定排序的列号。之后有 n 行&#xff0c;每行包含一条学生纪录。每条学生纪录由学号&#xff08;6…...

编程日记 2025/12/5 5:59:42

Python 爬虫解决 GBK乱码问题

文章目录 前言爬取初尝试与乱码问题编码知识科普UTF - 8GBKUnicode Python中的编码转换其他编码补充知识GBKGB18030GB2312UTF&#xff08;UCS Transfer Format&#xff09;Unicode 总结 前言 在Python爬虫的过程中&#xff0c;我尝试爬取一本小说&#xff0c;遇到GBK乱码问题&a…...

编程日记 2026/1/11 15:17:24

Scala与人工智能：融合多范式编程的AI开发利器

在人工智能&#xff08;AI&#xff09;技术飞速发展的今天&#xff0c;编程语言的选择直接影响着算法实现效率与系统可扩展性。Scala&#xff0c;作为一门融合面向对象&#xff08;OOP&#xff09;与函数式编程&#xff08;FP&#xff09;的多范式语言&#xff0c;凭借其独特的…...

编程日记 2025/5/31 16:54:57

解决echarts饼图label显示不全的问题

解决办法 添加如下配置&#xff1a; labelLayout: {hideOverlap: false},...

编程日记 2025/12/27 23:14:07

JCST 2025年 区块链论文 录用汇总

Conference&#xff1a;Journal of Computer Science and Technology (JCST) CCF level&#xff1a;CCF B Categories&#xff1a;交叉/综合/新兴 Year&#xff1a;2025&#xff08;截止4.19&#xff09; JCST 2024年 区块链论文 录用汇总 1 Title: An Understandable Cro…...

编程日记 2025/12/27 0:13:30

不带无线网卡的Linux开发板上网方法

I.MX6ULL通过网线上网 设置WLAN共享修改开发板的IP 在使用I.MX6ULL-MINI开发板学习Linux的时候&#xff0c;有时需要更新或者下载一些资源包&#xff0c;但是开发板本身是不带无线网卡或者WIFI芯片的&#xff0c;尝试使用网口连接笔记本&#xff0c;笔记本通过无线网卡连接WIFI…...

编程日记 2025/12/27 21:27:24

选择排序（简单选择排序、堆排序）

简单选择排序&#xff08;Selection Sort&#xff09; 1. 算法思想 它通过多次遍历数组&#xff0c;每次从未排序部分中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序部分的末尾&#xff08;或开头&#xff09;&#xff0c;直到整个数组有序。 2.…...

编程日记 2026/1/15 0:09:29

velocity模板引擎

文章目录 学习链接一. velocity简介1. velocity简介2. 应用场景3. velocity 组成结构 二. 快速入门1. 需求分析2. 步骤分析3. 代码实现3.1 创建工程3.2 引入坐标3.3 编写模板3.4 输出结果示例1编写模板测试 示例2 4. 运行原理 三. 基础语法3.1 VTL介绍3.2 VTL注释3.2.1 语法3.2…...

编程日记 2025/12/27 5:25:12

word选中所有的表格——宏

Sub 选中所有表格()Dim aTable As TableApplication.ScreenUpdating FalseActiveDocument.DeleteAllEditableRanges wdEditorEveryoneFor Each aTable In ActiveDocument.TablesaTable.Range.Editors.Add wdEditorEveryoneNextActiveDocument.SelectAllEditableRanges wdEdito…...

编程日记 2026/1/9 8:21:31