前端面试题总结-CSS篇

又又呢

已于 2025-04-01 17:22:05 修改

阅读量578

点赞数 22

文章标签：前端 css

于 2025-04-01 15:20:14 首次发布

版权

在讨论CSS盒模型之前，我们需要了解CSS中的几个基本概念：内容（Content）、内边距（Padding）、外边距（Margin）和边框（Border）。

区别：

普通文档流中两个垂直度的盒子，外边距会合并，取较大的值

BFC（Block Formatting Context，块级格式化上下文）是一个独立的布局环境，环境内部的元素不会影响其他环境的布局。

BFC的特性包括以下几点：

BFC的创建条件包括：

基础选择器：
1. 元素选择器（<标签名>）：也称为标签选择器，通过标签名选择指定元素，例如p选择器会选择所有<p>元素。
2. 类选择器（.类名）：通过类名选择元素，类选择器以点号.开头，后跟类名，例如.my-class。
3. id选择器（#ID名）：他从个ID选择元素，ID选择器以井号#开头，后跟ID名，例如#my-id。
组合选择器：
1. 后代选择器：空格分隔，例如 div p，会选择所有位于<div>元素内的<p>元素（子孙后代）
2. 子元素选择器：“>”分隔，例如 div > p，会选择直接位于<div>元素内的<p>元素（子辈）
3. 相邻兄弟选择器：“+”分隔，例如 h1 + p, 会选择所有紧跟在<h1>元素后面的<p>元素（同级后面第一个<p>元素）
4. 通用兄弟选择器：“~”分隔，例如 h1 ～ p，会选择同一父元素下，所有在<h1>元素后面的<p>元素(同级后面所有的<p>元素)
属性选择器：
1. [attr]：选择有attr属性的所有元素
2. [att