必刷前端面试题:css盒模型和选择器

在这个系列里我会为大家讲解一些前端面试里有关css的常考题。在面试官问到我们有关css的问题时,很有可能会问到这些问题。


什么是盒模型?说说你对css盒模型的理解

CSS 盒模型是指在网页中每个元素所占据的空间被看作一个矩形盒子。浏览器在页面布局时,将所有的元素表示为一个个矩形盒子,每一个盒子包含四个部分:content, padding, border, margin,它们影响着元素在页面中的布局和样式。

  • 内容区域(content):内容区域是盒子中用来显示实际内容的部分,如文本、图片等。
  • 内边距(padding):内边距是内容区域与边框之间的空白区域,通过设置 padding 属性可以调整元素内部内容与边框之间的间距。
  • 边框(border):边框是围绕内容和内边距的线条,通过设置 border 属性可以设置边框的样式、宽度和颜色等属性。
  • 外边距(margin):外边距是盒子与相邻元素之间的空白区域,通过设置 margin 属性可以控制元素之间的间距。

css的盒子模型有两种分别是标准盒模型和怪异盒模型

在早期的网页设计时期,当时的浏览器巨头IE浏览器和谷歌浏览器对于盒子模型的规定存在差异,由于这个原因以及考虑到浏览器的兼容性,所以存在这两种盒子模型。

标准盒模型和怪异盒模型的主要区别在于它们对于盒子宽度的定义。

  • 标准盒模型 盒子总宽度:width + padding + border + margin

  • 怪异盒模型(IE) 盒子总宽度: width + margin

标准盒模型和怪异盒模型的使用

可以通过在css代码中设置box-sizing来让浏览器使用你需要的盒模型。

css 复制代码
      box-sizing: border-box;  要求浏览器以IE盒模型来加载容器 
      box-sizing: content-box;  要求浏览器以标准盒模型来加载容器

css中的选择器有哪些?说一说它们的优先级

有哪些选择器

  • id选择器(#+id)
bash 复制代码
//html部分
<div id="app">  

//css部分
#app{

} 
  • 类名选择器
arduino 复制代码
//html部分
<div class="box1"></div>

//css部分
.box1{

} 
  • 标签选择器
less 复制代码
//html部分
<h2>标题</h2>

//css部分
h2{

} 
  • 后代选择器
less 复制代码
//html部分
<div class="container">
  <h2>标题</h2>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

//css部分
.container li {

}
  • 子级选择器
less 复制代码
//html部分
<div class="container">
  <h2>标题</h2>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

//css部分
.container > li {
}
  • 相邻兄弟选择器
css 复制代码
//html部分
<div class="box1"></div>
<div class="box2"></div>

//css部分
.box1 + .box2{
      border: 2px solid #ea490e;
    } 
  • 群组选择器
javascript 复制代码
//html部分
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

//css部分
box1,box2,box3 {
}
  • 属性选择器
bash 复制代码
//html部分
<input type="text" info="abc">

//css部分
input[info='abc']{
}
  • 伪元素选择器
bash 复制代码
//html部分
<input type="text" id="input">

//css部分
#input::before{
}
  • 伪类选择器

常见的伪类选择器:

  1. :hover:选择鼠标悬停在元素上时的状态。
  2. :active:选择被用户激活(点击)时的状态。
  3. :focus:选择获得焦点的表单元素的状态。

以focus为例:

bash 复制代码
//html部分
<input type="text" id="input">

//css部分
#input::focus{
}

选择器的优先级为:

!important > 内联选择器 > id选择器 > 类名选择器 > 标签选择器

值得注意的是,!important会提高样式的优先级,会覆盖其他低优先级的样式。

相关推荐
2301_768350233 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
Jabes.yang3 小时前
Java求职面试实战:从Spring Boot到微服务架构的技术探讨
java·数据库·spring boot·微服务·面试·消息队列·互联网大厂
聪明的笨猪猪3 小时前
Java Redis “高可用 — 主从复制”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
倔强青铜三4 小时前
苦练Python第64天:从零掌握多线程,threading模块全面指南
人工智能·python·面试
华洛4 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼4 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔5 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗5 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥5 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial5 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架