CSS常见面试题(持续更新)

小咪咪 2022-10-22 15:59 234阅读 0赞

### 文章目录 ###

*   *  div高度永远是宽度的一半
     *  大小为父元素宽度一半的正方形
     *  实现单行文字、多行文字的垂直居中
     *   *  1.利用line-height和vertical-align
         *  2.利用display:table-cell
         *  3.利用flex布局align-items:center;
     *  CSS常见布局的几种实现方式
     *  Flex(弹性布局)实现五大常用布局
     *  html标签分类
     *   *  闭合标签和空标签（闭合标签和空标签）
         *  位置特性（块级元素，行内元素，行级块元素）
         *   *  块级元素（block）
             *  行级元素(inline)
             *  行内块元素（inline-block）
         *  元素之间的转化
     *  浮动以及清除浮动
     *  属性继承性
     *   *  一、无继承性的属性
         *   *  1、display：规定元素应该生成的框的类型
             *  2、文本属性：
             *  3、盒子模型的属性
             *  4、背景属性
             *  5、定位属性
             *  6、生成内容属性
             *  7、轮廓样式属性：
             *  8、页面样式属性
             *  9、声音样式属性
         *  二、有继承性的属性
         *   *  1、字体系列属性
             *  2、文本系列属性
             *  3、元素可见性：visibility
             *  4、表格布局属性
             *  5、列表布局属性
             *  6、生成内容属性：quotes
             *  7、光标属性：cursor
             *  8、页面样式属性
             *  9、声音样式属性
         *  三、所有元素可以继承的属性
         *  四、内联元素可以继承的属性
         *  五、块级元素可以继承的属性
     *  CSS盒子模型
     *   *  W3C盒子模型（标准盒子模型）
         *  IE盒子模型（怪异盒模型）
         *  盒模型相互转换(box-sizing)
     *  CSS中 a标签的4个伪类
     *  CSS实现单行文本、多行文本溢出显示省略号（…）
     *   *  单行
         *  多行
     *  CSS选择器
     *   *  权重计算规则
         *  选择器
         *  优先级
     *  display:none和visibility:hidden两者的区别
     *  渲染机制

## div高度永远是宽度的一半 ##

![image.png][]

<h1>高度永远为宽度一半</h1>
    <div class="height-half-width-wrap">
        <div class="outer">
            <div class="inner">
                <div class="box">hello</div>
            </div>
        </div>
    </div>

.height-half-width-wrap .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;
    
        display: flex;
        align-items: center;
    }
    
    .height-half-width-wrap .inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
    }
    
    .height-half-width-wrap .box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

*  margin-top、margin-bottom、padding-top、padding-bottom的百分数值是相对于父元素内容区的宽度计算的。
 *  将height设置为 0，这是为了将元素高度完全交给padding负责。
 *  元素的height为 0，导致该元素里面再有子元素的时候，就无法正常设置高度。所以我们需要用到position: absolute。
 *  据W3C文档，当子元素使用absolute定位时，宽高设定百分比的参考量是其第一个非static祖先元素的padding box宽高，即width/height + padding

## 大小为父元素宽度一半的正方形 ##

![image.png][image.png 1]

.half-square-wrap .outer {
        width: 400px;
        height: 600px;
        background: red;
    }
    
    .half-square-wrap .inner {
        width: 50%;
        padding-bottom: 50%;
        background: blue;
    }

*  padding-bottom的百分数值是相对于父元素内容区的宽度计算的

## 实现单行文字、多行文字的垂直居中 ##

![image.png][image.png 2]

### 1.利用line-height和vertical-align ###

<div class="word-vertically-center1">
        <div>
            <span>测试文字测试文字</span>
        </div>
        <div>
            <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
        </div>
    </div>

.word-vertically-center1 div {
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        border: 1px solid #000;
        line-height: 200px;
    }
    
    .word-vertically-center1 span {
        display: inline-block;
        vertical-align: middle;
        line-height: 22px;
    }

### 2.利用display:table-cell ###

<div class="word-vertically-center2">
        <div>
            <span>测试文字测试文字</span>
        </div>
        <div>
            <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
        </div>
    </div>

.word-vertically-center2 div {
        display: table-cell;
        width: 200px;
        height:150px;
        border:1px solid blue;
        vertical-align: middle;
    }

### 3.利用flex布局align-items:center; ###

<div class="word-vertically-center3">
        <div>
            <span>测试文字测试文字</span>
        </div>
        <div>
            <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
        </div>
    </div>

.word-vertically-center3 div{
        float: left;
        width: 200px;
        height:150px;
        border: 1px solid #000;
        display: flex;
        align-items:center;
    }

## CSS常见布局的几种实现方式 ##

*  两栏布局(左边固定右边自适应)
 *  三栏布局(左右固定中间自适应)
    
     *  流体布局（浮动）
     *  BFC三栏布局
     *  双飞翼布局
     *  圣杯布局
     *  flex
     *  table布局
     *  绝对定位布局
     *  网格布局(Grid布局)  
        [具体文章见：https://blog.csdn.net/qq\_39903567/article/details/114751532][https_blog.csdn.net_qq_39903567_article_details_114751532]

## Flex(弹性布局)实现五大常用布局 ##

上中下布局、左侧定宽右侧自适应、顶部栏固定、左侧固定可滚动等

[具体文章见：https://blog.csdn.net/qq\_39903567/article/details/114754898][https_blog.csdn.net_qq_39903567_article_details_114754898]

## html标签分类 ##

### 闭合标签和空标签（闭合标签和空标签） ###

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签，其他少数为空标签，常见的空标签有  
<input />、 <img />、 <area />、 <base />、 <link />等。

### 位置特性（块级元素，行内元素，行级块元素） ###

位置特性进行分类的，它将元素分为三类：块级元素，行内元素，行级块元素（也称块级行元素）。

#### 块级元素（block） ####

\*\*特点： \*\*

*  可以设置宽高、内、外边距；
 *  独占一行（即前后均有换行）；
 *  块级元素如果不设置宽度和高度，则**宽度默认为父级元素的宽度**。**高度则根据内容大小自动填充**。

常见的块级元素：  
div、p、h1、h2…hn，ol、ul、dl、li、form、table

#### 行级元素(inline) ####

**特点：**

*  不可设置宽高、上下内、外边距。（左右内、外边距设置有效）
 *  其宽度和高度由其内容自动填充。
 *  其他行级元素**共处一行** ；

常见的行级元素：

*  a(锚点)
 *  b(加粗)
 *  i(斜体)
 *  span(常用内联容器，定义文本内区块)
 *  lable(input 元素定义标注（标记）)

#### 行内块元素（inline-block） ####

**特点：**

*  可以设置宽高、内外边距；
 *  可以与其他行内元素、内联元素**共处一行**；

常见的内联元素：  
input、img

### 元素之间的转化 ###

可以在行内样式或css样式中改变元素的display将三种元素进行转换。

*  display:block；(将元素变为块级元素)
 *  display:inline； (将元素变为行级元素)
 *  display：inline-block；（将元素变为行级块元素）

## 浮动以及清除浮动 ##

浮动特征，清除浮动的方法：clear清除浮动、BFC清除浮动等。

[具体文章见：https://blog.csdn.net/qq\_39903567/article/details/114946607][https_blog.csdn.net_qq_39903567_article_details_114946607]

## 属性继承性 ##

### 一、无继承性的属性 ###

#### 1、display：规定元素应该生成的框的类型 ####

#### 2、文本属性： ####

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

#### 3、盒子模型的属性 ####

：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

#### 4、背景属性 ####

：background、background-color、background-image、background-repeat、background-position、background-attachment

#### 5、定位属性 ####

：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

#### 6、生成内容属性 ####

：content、counter-reset、counter-increment

#### 7、轮廓样式属性： ####

outline-style、outline-width、outline-color、outline

#### 8、页面样式属性 ####

：size、page-break-before、page-break-after

#### 9、声音样式属性 ####

：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

### 二、有继承性的属性 ###

#### 1、字体系列属性 ####

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

#### 2、文本系列属性 ####

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

#### 3、元素可见性：visibility ####

#### 4、表格布局属性 ####

：caption-side、border-collapse、border-spacing、empty-cells、table-layout

#### 5、列表布局属性 ####

：list-style-type、list-style-image、list-style-position、list-style

#### 6、生成内容属性：quotes ####

#### 7、光标属性：cursor ####

#### 8、页面样式属性 ####

：page、page-break-inside、windows、orphans

#### 9、声音样式属性 ####

：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

### 三、所有元素可以继承的属性 ###

1、元素可见性：visibility

2、光标属性：cursor

### 四、内联元素可以继承的属性 ###

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

### 五、块级元素可以继承的属性 ###

1、text-indent、text-align

## CSS盒子模型 ##

![image.png][image.png 3]

### W3C盒子模型（标准盒子模型） ###

![image.png][image.png 4]

在标准盒子模型的情况下，元素的内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的，即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。

**标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）**

### IE盒子模型（怪异盒模型） ###

![image.png][image.png 5]

在怪异盒模型的情况下，浏览器的width属性不是内容的宽度，而是内容，内边距和边框的宽度的总和，即使在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border 宽度= 我们设置的width（height也是如此）。盒子总宽度/高度=width/height +margin = 内容区宽度/高度+padding+border+margin.

**怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）**

### 盒模型相互转换(box-sizing) ###

在css3中新增了box-sizing属性  
box-sizing : content-box || border-box || inherit;  
当为content-box时，将采取标准模式进行解析计算  
当为border-box时，将采取怪异模式解析计算

## CSS中 a标签的4个伪类 ##

有时候在浏览一些网站时会发现，当你把鼠标放在链接上时，它的颜色就会变，这就是用了css控制了它的四种状态，  
大家都知道a标签可以用来实现超链接，

*  第一种状态： link （默认）正常状态（初始状态，不用鼠标去触碰）
 *  第二种状态： hover 鼠标放上去的时候（但不点击）
 *  第三种状态： active 点击的时候（鼠标还没放开）
 *  第四种状态： visited 点击之后（）

**使用时注意：**

*  active 一般不必写
 *  四种状态控制一定要按照 LVHA 的顺序写
 *  link 可以省略

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
        <head>
        <title>css 伪类</title>
        <meta http-equiv="Content-Type" content="text/html; charset= utf8" />
        <style>
        a:link{
        	color: black;
        }
        a:visited{
        	color:blue;
        }
        a:hover{
        	color: orange;
        }
        a:active{
        	color: pink;
        }
        </style>
        </head>
            <body>
            <a href="http://www.baidu.com/">ffff</a>
        	</body>
        </html>

## CSS实现单行文本、多行文本溢出显示省略号（…） ##

![image.png][image.png 6]

<div class="word-long">
        <div class="one-line">
            <span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
        </div>
        <div class="lines">
            <span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字1 <br />
            </span>
        </div>
    </div>

### 单行 ###

如果实现单行文本的溢出显示省略号用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

### 多行 ###

实现方法：

display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

\-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

## CSS选择器 ##

1、ID　　\#id

2、class　　.class

3、标签　　p

4、通用　　\*

5、属性　　\[type=“text”\]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

### 权重计算规则 ###

特等： ！important

1.  第一等：代表内联样式，如: style=””，权值为1000。
2.  第二等：代表ID选择器，如：\#content，权值为0100。
3.  第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4.  第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5.  通配符、子选择器、相邻选择器等的。如\*、>、+,权值为0000。

*  .father>son (直接后代)
 *  .brother1+brother2(紧跟后面的兄弟)

1.  继承的样式没有权值。

### 选择器 ###

*  \* 选择所有元素
 *  p 选择所有 <p> 元素。
 *  div,p 选择所有 <div> 元素和所有 <p> 元素。
 *  div p 选择 <div> 元素内部的所有 <p> 元素。
 *  div>p 选择父元素为 <div> 元素的所有 <p> 元素。
 *  div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

### 优先级 ###

*  常用选择器权重优先级：!important > id > class > tag
 *  !important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如：background: blue !important;
 *  如果两条样式都使用!important，则权重值高的优先级更高
 *  在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
 *  样式指向同一元素，权重规则生效，权重大的被应用
 *  样式指向同一元素，权重规则生效，权重相同时，就近原则生效(就近指的是标签之间)，后面定义的被应用
 *  样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
 *  !important > 行内样式 > 内联样式 and 外联样式(内联样式和外联样式的优先级和加载顺序有关)

## display:none和visibility:hidden两者的区别 ##

1.  display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.  使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

其他隐藏操作：

background: transparent;//设置为透明

css3中

opacity:0;//设置不透明度为0，透明

## 渲染机制 ##

1、HTML的加载

HTML是一个网页的基础，下载完成后解析

2、其他静态资源加载

解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

3、DOM树构建

在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树

4、CSSOM树构建

CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

5、渲染树构建

当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

6、布局计算

渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

构建DOM树->构建渲染树->布局渲染树：计算盒模型位置和大小->绘制渲染树

**后续将持续更新…**

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/114951168][https_blog.csdn.net_qq_39903567_article_details_114951168]

[image.png]: /images/20221022/ce02861a6a014548990867a996af4a0c.png
[image.png 1]: /images/20221022/d578cb3fc12746479fb15c76ad1f62b1.png
[image.png 2]: /images/20221022/7795a497dcc54c3285c502f102f29b7c.png
[https_blog.csdn.net_qq_39903567_article_details_114751532]: https://blog.csdn.net/qq_39903567/article/details/114751532
[https_blog.csdn.net_qq_39903567_article_details_114754898]: https://blog.csdn.net/qq_39903567/article/details/114754898
[https_blog.csdn.net_qq_39903567_article_details_114946607]: https://blog.csdn.net/qq_39903567/article/details/114946607
[image.png 3]: /images/20221022/8567217b1b7b4a07ba3d0d4645dbfaac.png
[image.png 4]: /images/20221022/3cc688131e3c45288871d4783f06c36c.png
[image.png 5]: /images/20221022/49c31f2ab37847af91100118253263e5.png
[image.png 6]: /images/20221022/1bb08ed5bb4044d59f8f5da9496335d8.png
[https_blog.csdn.net_qq_39903567_article_details_114951168]: https://blog.csdn.net/qq_39903567/article/details/114951168