前端面试题之CSS

2023-11-08

文章目录

遗留问题：
1.css盒子模型
2.css选择器
3.伪类与伪元素的区别
- - - 回答：
4.css中有哪些属性可以继承？
5.CSS优先级
6.居中一个div
7.块级元素和行内元素的区别
8.position的值
9.CSS3 有哪些新特性？
10.请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？
11.用纯 CSS 创建一个三角形的原理是什么？
13.visibility=hidden, opacity=0，display:none
14.浮动清除
- 方法一：使用带clear属性的空元素
- 方法二：使用CSS的overflow属性
- 方法三：给浮动的元素的容器添加浮动
- 方法四：使用邻接元素处理
- 方法五：使用CSS的:after伪元素
- 总结：
15.BFC
- 定义：
- 如何创建BFC
- 作用：
16.移动端的布局用过媒体查询吗？
17.语义化标签
18.前端性能优化
19.px em rem 的区别
- rem 如何修改与px的相对计算关系
- em 如何修改与px的相对计算关系
20. vh vw
- vh 和 vw与百分比的区别是什么？

遗留问题：

1.maigin重叠，还有什么浮动上去，z-index，image标签隐藏

1.css盒子模型

有标准盒模型和怪异盒模型
区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
box-sizing属性值
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

2.css选择器

（1）id选择器（#myid）

（2）类选择器（.myclassname）

（3）标签选择器（div,h1,p）

（4）后代选择器（h1 p）

（5）相邻后代选择器（子）选择器（ul>li）

（6）兄弟选择器（li~a）

（7）相邻兄弟选择器（li+a）

（8）属性选择器（a[rel=“external”]）

（9）伪类选择器（a:hover,li:nth-child）

（10）伪元素选择器（::before、::after）

（11）通配符选择器（*）

3.伪类与伪元素的区别

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

回答：

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

4.css中有哪些属性可以继承？

每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

5.CSS优先级

6.居中一个div

水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

div {
  width: 200px;
  margin: 0 auto;
}

水平居中，利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px00-250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}

水平垂直居中二

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

水平垂直居中五

css:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;//这里这样设置
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}

回答：

一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

7.块级元素和行内元素的区别

知识点

block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示，可以容纳行内元素和其他块元素
none	元素不显示，并从文档流中移除。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示，只能容纳文本和其他行内元素
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记。
table	此元素会作为块级表格来显示。
inherit	规定应该从父元素继承display属性的值。

回答：

1.行内元素与块级元素直观上的区别。
行内元素会在一条直线上排列，都是同一行的，水平方向排列。
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素

行内元素

8.position的值

固定定位fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky：

元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位Static：

默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

inherit:

规定应该从父元素继承position 属性的值。

9.CSS3 有哪些新特性？

新增各种CSS选择器	（:not(.input)：所有class不是“input”的节点）
圆角		（border-radius:8px）
多列布局	（multi-column layout）
阴影和反射	（Shadow\Reflect）
文字特效		（text-shadow）
文字渲染		（Text-decoration）
线性渐变		（gradient）
旋转			（transform）
缩放，定位，倾斜，动画，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

10.请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？

11.用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。
  将元素的宽高设为0，只设置
  border
  ，把任意三条边隐藏掉（颜色设为
  transparent），剩下的就是一个三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

12.实现筛子

<html>
 
<head>
<style type="text/css">
 
#bg{
    height: 200px;
    outline: red dotted thin;
    display: inline-flex; /*不用定义此容器的宽度，宽度根据容器元素进行自适应*/
}
 
.dice-base{
    width: 100px;
    height: 100px;
    background-color: gray;  
    border: 2px solid green;
    margin-right: 10px;
    display: flex; /*flex布局*/
}
 
/*first dice*/
.dice-1{
    margin-left: 10px;
    justify-content: center; /*可以使子元素水平居中*/
}
.one{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%; /*画圆*/
    align-self: center; /*使自己在垂直方向居中*/
}
 
/*second dice*/
.dice-2{
    justify-content: space-between; /*使第一个元素左对齐，第二个元素右对齐*/ 
}
.two{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}
.two:nth-child(2){  /*nth-child是选择器*/
    align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/
}
 
/*third dice*/
.dice-3{
    justify-content: space-between; /*使第一个元素左对齐，最后一个元素右对齐*/ 
}
.three{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}
.three:nth-child(2){  /*nth-child是选择器*/
    align-self: center; /*使第二个元素自身在垂直方向上居中*/
}
.three:nth-child(3){  /*nth-child是选择器*/
    align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/
}
 
/*forth dice*/
.dice-4{
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/
}
.forth{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}
.forth:nth-child(1){
    margin-right: 40px; /*设置第一个元素右边距，使一行只放两个子元素*/
}
.forth:nth-child(3){
    margin-right: 40px;
}
 
/*five dice*/
.dice-5{
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/
}
.five{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}
.five:nth-child(1){
    margin-right: 40px; /*设置第一个元素右边距，使一行只放两个子元素*/
}
.five:nth-child(3){
    margin-right: 35px; 
    margin-left: 35px;
}
.five:nth-child(4){
    margin-right: 40px; 
}
 
/*six dice*/
.dice-6{
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/
    justify-content: space-between;/*在水平方向上两边对齐*/
}
.six{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}
</style>
</head>
 
<body>    
 
    <div id="bg">
        <!-- first dice  -->
        <div class="dice-base dice-1"> 
            <div class="one"></div>
        </div>
 
         <!-- second dice  -->
        <div class="dice-base dice-2">
           <div class="two"></div>
           <div class="two"></div>
        </div>
 
        <!-- third dice  -->
        <div class="dice-base dice-3">
            <div class="three"></div>
            <div class="three"></div>
            <div class="three"></div>
        </div>
 
        <!-- forth dice  -->
        <div class="dice-base dice-4">
            <div class="forth"></div>
            <div class="forth"></div>
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
 
        <!-- five dice  -->
        <div class="dice-base dice-5">
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
        </div>
 
        <!-- five dice  -->
        <div class="dice-base dice-6">
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
        </div>
 
    </div>
    
<script>
 
</script>
</body>
</html>

13.visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

14.浮动清除

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

.content{
clear:both;
}

some text

***

注意这里的div.content有内容。

方法五：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

.clearfix:after{
content: “020”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/* 触发 hasLayout */
zoom: 1;
}

some text

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

总结：

通过上面的例子，我们不难发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。

最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。

15.BFC

定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

作用：

1.利用BFC避免margin重叠
2.自适应两栏布局
3.清除浮动

16.移动端的布局用过媒体查询吗？

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}

17.语义化标签

<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。

18.前端性能优化

https://segmentfault.com/a/1190000022205291

webpack模块打包和JavaScript 压缩（如gzip压缩）
缓存优化
避免重定向
图片懒加载
减少 HTTP 请求
将 CSS 放在文件头部，JavaScript 文件放在底部
使用字体图标 iconfont 代替图片图标

19.px em rem 的区别

px是像素值，是一个固定的长度

em相当于当前对象内的文本字体，没有相对于浏览器，默认16px，1em=16px，

rem，root em，相对于HTML根元素

rem 如何修改与px的相对计算关系

html{
font-size:16px;
}

.div-rem{
width: 10rem;
height: 10rem;
font-size: 1rem;
background-color: #a58778;
}

em 如何修改与px的相对计算关系

用法1
.div-em{
width: 10em;
height: 10em;
font-size: 32px;
background-color: aquamarine;
}

用法2
.div-em-father{
font-size: 64px;
}
.div-em-child{
width: 10em;
height: 10em;
background-color: cadetblue;

}

20. vh vw

vh 和 vw 就是根据窗口的宽高，分成100等份，100vh就表示满高，50vh就表示一半高。

vh 和 vw与百分比的区别是什么？

百分比是基于父元素的设置而言的，如果父元素为100px，那么子元素100%也就是100px。

而 vh 和 vw 始终是针对窗口的宽高
用法

.div-vh-vw{
width: 10vw;
height: 10vh;
background-color: pink;
}

div-vh-vw-child{
width: 50%;
height: 50%;
background-color: blue;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

面试题

js