CSS面试真题 part1

1、说说你对盒子模型的理解
2、谈谈你对BFC的理解
3、什么是响应式设计？响应式设计的基本原理是什么？如何做？
4、元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
5、如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
6、css选择器有哪些？优先级？哪些属性可以继承？
7、css中，有哪些方式可以隐藏页面元素？区别
8、如何实现单行/多行文本溢出的省略样式？
9、css如何画一个三角形？原理是什么？
10、如何使用css完成视差滚动效果

1、说说你对盒子模型的理解

自己回答：
盒子模型有标准盒子模型（或者叫内容盒子模型）和怪异盒子模型（或者叫IE盒子模型）
标准盒子模型的width是内容宽度。怪异盒子模型的width是内容宽度+内边距+边框。
css样式设置 box-sizing:content-box (默认值，标准盒子)，box-sizing:border-box 怪异盒子模型
标准回答：
与自己回答差不多

2、谈谈你对BFC的理解

自己回答：
BFC形成自己独立的一块空间，不受别的元素影响。通常用来去浮动
形成BFC可以通过 overflow:hidden; clear:both等

标准回答：

BFC，块级格式化上下文，页面上的一块渲染区域，并且有一套自己的渲染规则

内部的盒子会在垂直方向上一个接一个放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关，
每个元素的左外边距与包含块的左边界相接触(从左到右)，即使浮动元素也是如此
BFC的区域不会与float的元素区域重看
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件：

包括但不限于

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为 absolute 或 fixed

应用场景：
1、防止margin重叠
2、清除内部浮动
3、自适应多栏布局

3、什么是响应式设计？响应式设计的基本原理是什么？如何做？

自己回答：
响应式设计就是根据屏幕的大小呈现不用的样式效果
基本原理：获取屏幕宽度，根据宽度进行不同的样式设置，或者效果展示
常用的响应式设计有媒体查询、百分比设置、rem设置、vw、flex盒子

标准回答：
响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整

响应式网站常见特点：

同时适配PC+平板+手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

实现方式：
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>

width=device-width：是自适应手机屏幕的尺寸宽度
maximum-scale：是缩放比例的最大值
initial-scale：是缩放的初始化
user-scalable：是用户的可以缩放的操作

实现响应式布局的方式有如下：

媒体查询
百分比
vw/vh
rem

总结:
响应式布局优点可以看到：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大、效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

4、元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

自己回答：
单行文本水平垂直居中，line-height=height，text-align:center;
块级元素水平垂直居中：
flex实现父块：display:flex;justify-content:center;align-item:center;
margin实现子块：margin:xxpx auto;
margin实现子块：margin:50% auto; tansform:translateY(50%)
父块：position:relative;子块：left：crlc（50% - xxpx）,top：crlc（50% - xxpx）
父块：position:relative;子块：left：50%, top：50%;tansform:translateY(50%)
grid布局
table布局

标准回答：
居中是一个非常基础又很重要的应用场景，一般分成居中元素的宽高已知和未知两个大类

实现方式：

利用定位+margin:auto（支持不定宽高）
利用定位+margin:负值
利用定位+transform（支持不定宽高）
table布局
flex布局（支持不定宽高）
grid布局（支持不定宽高）

根据元素标签的性质，可以分为：

内联元素居中布局
块级元素居中布局

内联元素居中布局

水平居中

行内元素可设置：text-align:center
flex布局设置父元素：display:flex;justify-content:center

垂直居中

单行文本：height === line-height
多行文本：dispaly:table-cell;vertical-align:middle

块级元素居中布局

水平居中

定宽：margin:0 auto;
绝对定位 + left:50% + margin:负自身一半

垂直居中

position：absolute 设置left、top、margin-left、margin-top（定高）
display:table-cell
transform:translate(x,y)
flex（不定高，不定宽）
grid（不定高，不定宽），兼容性相对比较差

5、如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

自己回答：
双飞翼布局，圣杯布局，flex布局。

标准回答：
两栏布局
往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路：

使用float左浮左边栏
右边模块使用margin-left 撑出内容块做内容展示
为父级元素添加BFC,防止下方元素飞到上方内容

 <style>
	 .box{
		 overflow: hidden; BFC
	 }
	 .left {
		 float: left;
		 width: 200px;
		 background-color: gray;
		 height: 400px;
	 }
	 .right {
		 margin-left: 210px;
		 background-color: lightgray;
		 height: 200px;
	 }
</style>
<div class="box">
	 <div class="left"> </div>
	 <div class="right"> </div>
</div>

还有一种更简单的使用，采用flex布局

<style>
	 .box{
		 overflow: hidden; BFC
	 }
	 .left {
		 float: left;
		 width: 200px;
		 background-color: gray;
		 height: 400px;
	 }
	 .right {
		 margin-left: 210px;
		 background-color: lightgray;
		 height: 200px;
	 }
</style>
<div class="box">
	 <div class="left"> </div>
	 <div class="right"> </div>
</div>

三栏布局：
实现三栏布局中间自适应的布局方式有

两边使用float，中间使用margin
两边使用absolute，中间使用margin
两边使用 float 和负 margin
display:table 实现
flex 实现
grid 网格布局

6、css选择器有哪些？优先级？哪些属性可以继承？

自己回答：
id选择器，class选择器，标签选择器，元素选择器，后代选择器，属性选择器
内联样式，!important，css样式文件
可以继承的属性：font-size，color，background-color，line-height，font-width

标准回答：

关于css 属性选择器常用的有:

id选择器(#box)，选择id为box的元素
类选择器(.one)，选择类名为one的所有元素
标签选择器(div)，选择标签为div的所有元素
后代选择器(#box div)，选择id为box元素内部所有的div元素
子选择器(.one>one_1)，选择父元素为.one的所有.one_1的元素
相邻同胞选择器(.one+.two)，选择紧接在.one之后的所有.two元素
群组选择器(div,p)，选择div、p的所有元素

还有一些使用频率相对没那么多的选择器:

伪类选择器

:link：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover：鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素

伪元素选择器

:first-letter:用于选取指定选择器的首字母
:first-line :选取指定选择器的首行
:before :选择器在被选元素的内容前面插入内容:
after :选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attributel=value] 选择attribute属性以value开头的元素

css3新增的选择器有如下：

层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n)根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n)匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从未尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector)选择与<selector> 不匹配的所有元素

属性选择器

 [attribute*=value]:选择attribute属性值包含value的所有元素
 [attribute^=value]:选择attribute属性开头为value的所有元素
 [attribute$=value]:选择attribute属性结尾为value的所有元素

优先级：

内联>ID选择器>类选择器>标签选择器，!important最高

继承属性：
字体系列属性：font、font-size、font-family等
文本系列属性：text-algin、line-height、color、letter-spacing等
元素可见性：visibility
表格布局属性：caption-side、border-collapse等
列表属性：list-style-type、list-style
引用：quotes
光标属性:cursor

7、css中，有哪些方式可以隐藏页面元素？区别

自己回答：
opacity：0；元素还在，只是不可见
dispaly：none；元素消失不见

标准回答：

dispaly:none；元素完全消失，不占据空间
visibility:hidden; 元素隐藏，DOM还在，不能响应点击事件
opacity:0; 元素隐藏，DOM还在，可以响应点击事件
设置height、width模型属性为0；元素不占据空间
position:absolute；将元素移出可视区域，元素不可见
clip-path；通过裁剪的形式，元素不可见，占据页面空间，不能响应点击事件

最常用的还是 dispaly:none；和 visibility:hidden;
在这里插入图片描述

8、如何实现单行/多行文本溢出的省略样式？

自己回答：
单行：
text-overflow：eclipse；
overflow:hidden;
多行：
text-overflow：eclipse；
overflow:hidden;
text-xxx：3；
标准回答：

单行：

text-overflow：eclipse；
overflow:hidden;
white-space:nowrap;

多行：

基于高度截断
基于行数截断

基于高度截断

伪元素+定位

position:relative: 为伪元素绝对定位
overflow:hidden:文本溢出限定的宽度就隐藏内容
position:absolute: 给省略号绝对定位
line-height:20px: 结合元素高度，高度固定的情况下，设定行高，控制显示行数
height:40px: 设定当前元素高度
::after {} :设置省略号样式

 <style>
 .demo {
	 position: relative;
	 line-height: 20px;
	 height: 40px;
	 overflow: hidden;
 }
 .demo::after {
	 content: "...";
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 padding: 0 20px 0 10px;
 }
</style>
<body>
	 <div class='demo'>这是一段很长的文本</div>
</body>

实现原理：通过伪元素绝对定位到行尾并遮住文字，再通过 overflow:hidden隐藏多余文字
这种实现具有以下优点

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置 word-break:break-all 使一个单词能够在换行时进行拆分

基于行数截断

纯css实现也非常简单，核心的css代码如下：

-webkit-line-clamp：2；用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的webkit属性
display: -webkit-box; 和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;和1结合使用，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden; 文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis;多行文本的情况下，用省略号”…“隐藏溢出范围的文本

<style>
 p {
	 width: 400px;
	 border-radius: 1px solid red;
	 -webkit-line-clamp: 2;
	 display: -webkit-box;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
	 text-overflow: ellipsis;
 }
</style>
<p>
	 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

可以看到，上述使用了webkit的css属性扩展，所以兼容浏览器范围是pc端的webkit内核的浏览器，由于移动端大多数是使用 webkit，所以移动端常用该形式
需要注意的是，如果文本为一段很长的英文或者数字，则需要添加 word-wrap: break-word 属性，还能通过使用 javascript 实现配合 css

9、css如何画一个三角形？原理是什么？

自己回答：
画边框，利用透明度
标准回答：
盒子模型在默认情况下是一个矩形

<style>
 .border {
	 width: 50px;
	 height: 50px;
	 border: 2px solid;
	 border-color: #96ceb4 #ffeead #d9534f #ffad60;
 }
</style>
<div class="border"></div>

效果如下：
在这里插入图片描述
将border设置 50px，width和height设成0，效果如下：

此时得到4个不同颜色的正方形，如果需要下方三角形，设置上边框为0，上左右边框颜色透明，即

.border {
	 width: 0;
	 height: 0;
	 border-style:solid;
	 border-width: 0 50px 50px;
	 border-color: transparent transparent #d9534f;
}

10、如何使用css完成视差滚动效果

看这篇解析

视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现：background-attachment和transform:translate3D

background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。它的属性值的含义如下：
在这里插入图片描述
对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。子元素word随着页面滚动显示，对子元素bg设置 background-attachment: fixed，使其在当前视口固定。

<template>
    <div class="css_demo">
        <div class="word">视差滚动</div>
        <div class="bg bg1"></div>
        <div class="word">二</div>
        <div class="bg bg2"></div>
        <div class="word">三</div>
        <div class="bg bg3"></div>
        <div class="word">四</div>
        <div class="bg bg4"></div>
        <div class="word">五</div>
        <div class="bg bg5"></div>
        <div class="word">六</div>
        <div class="bg bg6"></div>
        <div class="word">七</div>
        <div class="bg bg7"></div>
        <div class="word">八</div>
        <div class="bg bg8"></div>
        <div class="word">九</div>
        <div class="bg bg9"></div>
    </div>
</template>
<style lang='scss' scoped>
.css_demo {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .bg {
        background-position: center center;
        background-size: cover;
        background-attachment: fixed;
        &.bg1 {
            background-image: url("/src/assets/img/1.jpeg");
        }
        &.bg2 {
            background-image: url("/src/assets/img/2.webp");
        }
        &.bg3 {
            background-image: url("/src/assets/img/3.webp");
        }
        &.bg4 {
            background-image: url("/src/assets/img/4.webp");
        }
        &.bg5 {
            background-image: url("/src/assets/img/5.webp");
        }
        &.bg6 {
            background-image: url("/src/assets/img/6.webp");
        }
        &.bg7 {
            background-image: url("/src/assets/img/7.webp");
        }
        &.bg8 {
            background-image: url("/src/assets/img/8.webp");
        }
        &.bg9 {
            background-image: url("/src/assets/img/9.webp");
        }
    }
}
div {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    line-height: 100vh;
    text-align: center;
    font-size: 20vh;
}
</style>

2、transform:translate3D

涉及到的CSS属性如下：

transform 可以对元素进行变换(2d/3d)，包括平移 translate、旋转 rotate、缩放 scale等
perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0
时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective 可以让我们眼睛看到 3d 立体效果，有空间感。
transform-style设置元素的子元素是位于 3D 空间中还是平面中。

通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

<template>
    <div class="transform_container">
        <div class="container">
            <div class="one">一一一一</div>
            <div class="two">二二二二</div>
            <div class="three">三三三三三</div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.transform_container {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.container {
    transform-style: preserve-3d;
    height: 150%;
    .one {
        font-weight: 600;
        transform: translateZ(-1px);
        position: absolute;
        top: 20%;
        left: 20%;
    }
    .two {
        font-weight: 600;
        transform: translateZ(-2px);
        position: absolute;
        top: 20%;
        left: 35%;
    }
    .three {
        font-weight: 600;
        transform: translateZ(-3px);
        position: absolute;
        top: 20%;
        left: 50%;
    }
}
</style>