CSS常见面试题（要是看完没收获，你来打我）

saving_
652 阅读25分钟

一、说说你对盒子模型的理解?

盒子分为：
    1.标准盒子模式（经典盒子模型）：
        盒子总宽度：content的width+padding+boder+margin
        盒子总高度：content的height+padding+border+margin
    2.IE怪异盒子模式
        盒子总宽度：width+margin
        盒子总高度：height+margin
        其中`width/height` 包含了 `padding`和 `border`值
    
 因此引出box-sizing属性：可以设置为content-box,border-box
 通常页面设置为*{box-sizing:border-box;}

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

 选择器：1.子选择器；
        2.后代选择器；
        3.类选择器；
        4.ID选择器；
        5.属性选择器；
        6.伪类；
        7.伪元素；
        8.相邻兄弟选择器；
        9.元素选择器；
        10.层次选择器

`

选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2
element+element div+p 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性以 en 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<p>元素的第一个字母 1
:first-line p:first-line 选择每一个<p>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
` 
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

继承：是指的是给父元素设置一些属性，后代元素会自动拥有这些属性（说实话我也记不住这个，大致知道就行）
关于继承属性，可以分成：
  • 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本系列属性
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
  • 元素可见性
visibility
  • 表格布局属性
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
  • 列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
  • 引用
quotes：设置嵌套引用的引号类型
  • 光标属性
cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

  • a 标签的字体颜色不能被继承
  • h1-h6标签字体的大下也是不能被继承的

无继承的属性

  • display
  • 文本属性：vertical-align、text-decoration
  • 盒子模型的属性：宽度、高度、内外边距、边框等
  • 背景属性：背景图片、颜色、位置等
  • 定位属性：浮动、清除浮动、定位position等
  • 生成内容属性：content、counter-reset、counter-increment
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline
  • 页面样式属性：size、page-break-before、page-break-after

三、说说em/px/rem/vh/vw区别?

1.px,即css像素，正常情况下，1px=1设备像素
2.em,相对长度单位，相对父级元素来计算字体大小。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（即16px）。
3.rem,css3新增的相对单位，可理解为`root em`, 相对根节点`html`的字体大小来计算。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（即16px）。
4.vh/vw,视口的高度和宽度，主要用于页面视口大小布局，在页面布局上更加方便简单

这里详细的讲下em跟rem:

  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（`1em = 16px`）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

特点：

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小
  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
  • 任意浏览器的默认字体高都是 16px

举个例子

<div class="big">
    我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

样式为

<style>
    html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
</style>

这时候.big元素的font-size为14px，而.small元素的font-size为12px

rem

rem，相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点：

  • rem单位可谓集相对大小和绝对大小的优点于一身
  • 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

四、说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

1.设备像素，由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变；
2.设备独立像素，一般情况下1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）
3.css像素，无缩放情况下，1个CSS像素等于1个设备独立像素
4.dpr(设备像素比)= 设备像素 / 设备独立像素
5.ppi(每英寸像素)，值越大，图像越清晰

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

1.display属性；display:none;
2.visibility属性；visibility:hidden;
3.opacity属性；opacity:0;
4.设置width跟hight为0；
5.使元素脱离文档流，position:absolute;

关于`display: none`、`visibility: hidden`、`opacity: 0`的区别，如下表所示：
display: nonevisibility: hiddenopacity: 0
页面中不存在存在存在
重排会不会不会
重绘会会不一定
自身绑定事件不触发不触发可触发
transition不支持支持支持
子元素可复原不能能不能
被遮挡的元素可触发事件能能不能

六、怎么理解回流跟重绘？什么场景下会触发？

  • 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
  • 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候（这避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle方法，原理是一样的

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

  • 颜色的修改
  • 文本方向的修改
  • 阴影的修改

如何减少

  • 如果想设定或者改变元素的样式，通过改变或者合并元素的 class 类名 (尽可能在 DOM 树的最里层)
  • 避免设置多项内联样式
  • 避免使用 table 布局
  • 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
  • 离线操作：通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，（这样只触发了一次回流重绘，而不是每次改变样式都去触发回流重绘）如下：
let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'

七、谈谈你对BFC的理解？

`BFC`（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

-   内部的盒子会在垂直方向上一个接一个的放置
-   对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
-   每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
-   BFC的区域不会与float的元素区域重叠
-   计算BFC的高度时，浮动子元素也参与计算
-   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

应用场景

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候，边距则不会重叠：

清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生效才能BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

八、元素水平垂直居中的方法有哪些？

  • 利用定位+margin:auto
  • 利用定位+transform
  • table布局
  • flex布局
  • grid布局

利用定位+margin:auto

先上代码：

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

利用定位+transform

实现代码如下：

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical-align和text-align可以让所有的行内块级元素水平垂直居中

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex弹性布局

还是看看实现的整体代码：

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

grid网格布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

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

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

内联元素居中布局

水平居中

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

垂直居中

  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：display: 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(不定高，不定宽)，兼容性相对比较差

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

双栏布局

实现思路也非常的简单：

  • 使用 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弹性布局

flex弹性布局

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

flex可以说是最好的方案了，代码少，使用简单

注意的是，flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

三栏布局

  • 两边使用 float，中间使用 margin
  • 两边使用 absolute，中间使用 margin
  • flex实现
  • grid网格布局

两边使用 float，中间使用 margin

需要将中间的内容放在html结构最后，否则右侧会沉在中间内容的下方 实现代码如下：

<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

两边使用 absolute，中间使用 margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;//注意这里是110px，而不是10px
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="main">中间自适应</div>
</div>

实现流程：

  • 左右两边使用绝对定位，固定在两侧。
  • 中间占满一行，但通过 margin和左右两边留出10px的间隔

使用flex实现

利用flex弹性布局，可以简单实现中间自适应

代码如下：


<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        flex: 1;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

实现过程：

  • 仅需将容器设置为display:flex;，
  • 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
  • 盒内元素的高度撑开容器的高度

优点：

  • 结构简单直观
  • 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

grid网格布局

代码如下：

<style>
    .wrap {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        background: coral;
    }

    .right {
        background: lightblue;
    }

    .middle {
        background: #555;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

十、说说flexbox（弹性盒布局模型）

这个推荐去看阮一峰老师的flex系列： www.ruanyifeng.com/blog/2015/0…

十一、介绍一下grid网格布局

这个看W3School的就行：www.w3school.com.cn/css/css_gri…

十二、css3动画有哪些？

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

transition 过渡

语法如下：

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

上面为简写模式，也可以分开写各个属性

transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

举个例子，实现鼠标移动上去发生变化动画效果

<style>
       .base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*简写*/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div class="base"></div>

transform 转变动画

包含四个常用的功能：

  • translate：位移
  • scale：缩放
  • rotate：旋转
  • skew：倾斜

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block

举个例子

<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div class="base base2"></div>

animation 实现自定义动画

animation是由 8 个属性的简写，分别如下：

属性描述属性值
animation-duration指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0
animation-timing-function指定动画计时函数，即动画的速度曲线，默认是 "ease"linear、ease、ease-in、ease-out、ease-in-out
animation-delay指定动画延迟时间，即动画何时开始，默认是 0
animation-iteration-count指定动画播放的次数，默认是 1
animation-direction 指定动画播放的方向默认是 normalnormal、reverse、alternate、alternate-reverse
animation-fill-mode指定动画填充模式。默认是 noneforwards、backwards、both
animation-play-state指定动画播放状态，正在运行或暂停。默认是 runningrunning、pauser
animation-name指定 @keyframes 动画的名称

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

通过 @keyframes 来定义关键帧

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from 表示最开始的那一帧，to 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

十三、如果要做优化，CSS提高性能的方法有哪些？

可以从选择器嵌套、属性特性、减少http请求三方面考虑，同时还要注意CSS代码的加载顺序
  • 选择器的匹配规则是从右到左的，如果嵌套的层级过多，匹配花费的时间更长
  • 看哪些属性是可以继承来的，避免对这些属性进行重复编写
  • 把小的icon图片转成base64编码
  • 将多张图片合并成一张图片，使用图片精灵的方式，减少http请求
  • 资源压缩，对css进行压缩，降低浏览器加载时间

十四、如何实现单行／多行文本溢出的省略样式？

单行文本溢出省略

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
  • white-space：设置文字在一行显示，不能换行
  • overflow：文字长度超出限定宽度，则隐藏超出的内容
<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

多行文本溢出省略

多行文本溢出的时候，我们可以分为两种情况：

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

基于高度截断

伪元素 + 定位

<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>

一般文本存在英文的时候，可以设置`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 >

十五、如何使用css完成视差滚动效果?

视差滚动：各个图层以不同的速度移动，形成视觉差的效果

background-attachment

作用是设置背景图像是否固定或者随着页面的其余部分滚动

值分别有如下：

  • scroll：默认值，背景图像会随着页面其余部分的滚动而移动
  • fixed：当页面的其余部分滚动时，背景图像不会移动
  • inherit：继承父元素background-attachment属性的值

完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动

也就是说，背景一开始就已经被固定在初始的位置

核心的css代码如下：

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

整体例子如下：

<style>
div {
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            line-height: 100vh;
            text-align: center;
            font-size: 20vh;
        }

        .a-img1 {
            background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img2 {
            background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img3 {
            background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
</style>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

十六、CSS如何画一个三角形？原理是什么？

建议看这两篇文章： juejin.cn/post/684490… www.cnblogs.com/echolun/p/1…

十七、让Chrome支持小于12px 的文字方式有哪些？区别？

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

常见的解决方案有：

  • zoom
  • -webkit-transform:scale()

Zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

其支持的值类型有：

  • zoom:50%，表示缩小到原来的一半
  • zoom:0.5，表示缩小到原来的一半

使用 zoom 来”支持“ 12px 以下的字体

代码如下：

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

实现代码如下：

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

十八、说说对Css预编语言的理解？有哪些区别?

主要就是：

  • sass；
  • less；
  • stylus; 这个就不展开说了

十九、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
    1.  chrome中，使用collapse值和使用hidden没有区别。
    2.  firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

二十、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。\
浮动带来的问题：

1.  父元素的高度无法被撑开，影响与父元素同级的元素
2.  与浮动元素同级的非浮动元素（内联元素）会跟随其后
3.  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1.  父级div定义height
2.  最后一个浮动元素后加空div标签 并添加样式clear:both。
3.  包含浮动元素的父标签添加样式overflow为hidden或auto。
4.  父级div定义zoom

二十一、在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。

二十二、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

1.  单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2.  ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

二十三、你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。

二十四、position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

二十五、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

二十六、 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。\
解决方法：

1.  可以将<li>代码全部写在一排
2.  浮动li中float：left
3.  在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

二十七、 display:inline-block 什么时候会显示间隙？

1.  有空格时候会有间隙 解决：移除空格
2.  margin正值的时候 解决：margin使用负值
3.  使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
avatar
文章
阅读
粉丝