必刷前端面试题: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会提高样式的优先级,会覆盖其他低优先级的样式。

相关推荐
测试199827 分钟前
2024软件测试面试热点问题
自动化测试·软件测试·python·测试工具·面试·职场和发展·压力测试
栈老师不回家39 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
马剑威(威哥爱编程)1 小时前
MongoDB面试专题33道解析
数据库·mongodb·面试
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos