在这个系列里我会为大家讲解一些前端面试里有关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{
}
- 伪类选择器
常见的伪类选择器:
:hover
:选择鼠标悬停在元素上时的状态。:active
:选择被用户激活(点击)时的状态。:focus
:选择获得焦点的表单元素的状态。
以focus为例:
bash
//html部分
<input type="text" id="input">
//css部分
#input::focus{
}
选择器的优先级为:
!important > 内联选择器 > id选择器 > 类名选择器 > 标签选择器
值得注意的是,!important会提高样式的优先级,会覆盖其他低优先级的样式。