CSS篇

ChenZehong 发布于

  • CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

  • em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
  • rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕分辨率间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

  • vw：相对于视窗的宽度，视窗宽度是100vw；
  • vh：相对于视窗的高度，视窗高度是100vh；
  • vmin：vw和vh中的较小值；
  • vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：

  1. 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
  2. vw/vm：相对于视窗的尺寸
  • 怎么判断元素在页面中的可视范围内：

1、offsetTop：表示元素的上边框至包含元素的上内边框的距离

scrollTop：表示这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离

使用offsetTo-scrollTop是否小于等于视窗高度来判断

2、使用getBoundingClientRect来获取元素的信息，包括大小与相对于视窗的位置

3、使用IntersectionObserver来判断两个元素是否重叠，因为不会触发回流重绘所以性能比上一个好；主要分为创建观察者与传入观察者。

  • 2.link与@import标签的区别

link属于xhtml标签，而@import是css提供的

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。

link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

link方式样式的权重高于@import的。

link支持使用JS控制DOM去改变样式，而@import不支持

  • 说说盒子模型：

盒子是CSS布局的对象和基本单位，一个页面由很多个盒子组成，元素的类型与display属性决定了这个盒子的类型。不同的盒子会参与不同的Formatting Context（它是页面中的一块渲染区域，并且有一套渲染规则，它决定子元素如何定位，以及和其他元素的关系和相互作用），因此盒子内的元素会以不同的方式渲染。

盒子模型有两种：

标准盒子：width指的是内容区域content的宽度，盒子大小=content+padding+border+margin

怪异盒子：width指的是content+padding+border，盒子大小=content+padding+border+margin

  • 3.什么是BFC

BFC就是块级格式化上下文，可以理解为时一个独立的块，在这个块中浮动元素会被计算高度，所有元素垂直沿着父元素边框排列。

BFC作用：

1、不和浮动元素重叠

2、清除元素内部浮动

3、防止垂直外边距重叠

  • 如何开启BFC：

1、float设置不能为none

2、overflow设置不能为visible

3、display设置不能为table-cell，table-caption，inline-block

4、position不能为relative，static

  • 4.垂直居中的方法

快速水平垂直居中：

父元素display:flex，子元素margin设置为auto即可

(1)margin:auto法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>

定位为上下左右为0，margin：0可以实现脱离文档流的居中.

(2)margin负值法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}

补充：其实这里也可以将marin-top和margin-left负值替换成，
transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
css:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}

(4)利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
css:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
  • 如何垂直居中一个img：
1
2
3
4
5
.container {
	 display:table-cell
     text-align:center
     vertical-align:middle
}
  • 5.多行文本的文本省略
1
2
3
4
5
6
7
8
9
10
11
12
使文字数量不同在相同的地方显示，给盒子加固定高度
 
overflow：hidden;
 
display：-webkit-box; 将盒子转换为弹性盒子
 
-webkit-line-clamp：2; 设置显示多少行
 
text-overflow：ellipsis; 文本以省略号显示   
 
-webkit-box-orient：vertical; 文本显示方式，默认水平

  • 6.visibility=hidden, opacity=0，display:none的区别

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

在CSS3的transition中支持visibility属性但是不支持 display，因为transitin可以延迟执行，配合visbility使用纯CSS实现hover延时显示效果可以提高用户体验。

  • 7.垂直外边距重叠

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

  1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  3. 两个外边距一正一负时，折叠结果是两者的相加的和。
  • 说说浮动：

元素设置浮动后脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。

为什么需要清除浮动：

1、父元素高度无法被撑开，影响与父元素同级的元素

2、与浮动元素同级的非浮动元素（内联元素）会紧随其后

  • 8.清除浮动
  1. 给父级div定义height属性
  2. 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
  3. 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
  4. 使用 :after 伪元素
  • 9.offset/scroll/client 各类属性

clientX clientY

  • 鼠标相对于浏览器窗口可视区域的 X，Y 坐标

pageX pageY

  • 类似于 clientX，clientY，但它们使用的是文档坐标而非窗口坐标。具体来说,pageY = clientY + 页面滚动高度。

offsetX offsetY

  • 鼠标相对于事件源元素（srcElement）的 X，Y 坐标

  • 10.选择器上的优先级

对于选择器的优先级：

  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类选择器、属性选择器：10
  • id 选择器：100
  • 内联样式：1000

注意事项：

  • !important 声明的样式的优先级最高；
  • 如果优先级相同，则最后出现的样式生效；
  • 继承得到的样式的优先级最低；
  • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0；
  • 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

简单记住结论：!important>行内样式>id 选择器>class 选择器/属性选择器>标签选择器>通配符*

  • 绝对定位

当元素开启绝对定位后会脱离文档流，如果不设置偏移量，则元素位置不会发生变化。绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，开启了绝对定位后内联元素会变为块元素，块元素的宽度和高度会默认被内容撑开。

  • 脱离文档流

在HTML中所有的元素都是盒模型，他们一次排放在HTML中形成文档流。脱离文档流的意思就是元素在文档流中不再占据空间，而是出于浮动的状态。

  • margin和padding的区别：

padding是作用于自身，margin是作用于外部对象。

  • 实现一个渐变色动画：
1
2
3
4
5
6
7
8
9
10
11
12
#jianbian{
    width:100%;
    height:1000px;
    background:linear-gradient(45deg,#aabbcc,pink,yellow);
    animation:name 10s infinite alternate
        (infinite是循环，alternate是轮流反向播放)
}
@keyframes name {
	100% : {
        filter:hue-rotate(360deg)
	}
}
  • 给五个div实现以下布局：

1 1 1

1 1

1
2
3
4
5
6
7
<div id = “a”>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>   
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
第一种：flex布局
#a{
    width:900px;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
}
#a > div{
    width:300px;
    height:300px
}

第二种：grid布局
#a{
	width: 900px;
	display: grid;
	grid-template-columns: 300px 300px 300px;
    //（也可以用fr作为单位，则是按元素宽度比例）
    //（也可以使用repeat（3,300px）实现重复的单元格）
	grid-template-rows:300px 300px;
   }
  • 伪类和伪元素的区别：

伪类用于选择处于特定状态的元素，比如鼠标指针悬浮(:hover)、第一个子元素(:first-child)等等，它是以一个:开头的。（没有创建新的元素）

伪元素是以两个:开头的，是指DOM树没有定义的虚拟元素，比如::before表示选择元素内容之前的内容。（创建了新的元素）

  • 实现圣杯布局（左右两边固定宽，中间自适应，使用float、负外左边距和相对定位实现）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style>
        *{
            padding: 0;
            margin: 0;
        }
        #header,#footer{
            width: 100%;
            height: 100px;
            background-color: aqua;
        }
        #main{
            width: 100%;
            height: 100px;
            clear: both;
            padding: 0 100px;
        }
        #center,#left,#right{
            height: 100px;
            float: left;
        }
        #center{
            width: 100%;
            height: 100px;
            background-color: rgb(160, 55, 55);
        }
        #left{
            width: 100px;
            height: 100px;
            margin-left: -100%;
            background-color: #aaa;
            position: relative;
            left: -100px;
        }
        #right{
            width: 100px;
            height: 100px;
            margin-left: -100px;
            background-color: #aaa;
            position: relative;
            left: -100px;
        }
    </style>
</head>
    <body>
        <div id = "header">header</div>
        <div id = "main">
            <div id = "center">center</div>
            <div id = "left">left</div>
            <div id = "right">right</div>
        </div>
        <div id = "footer">footer</div>

    </body>
</html>
  • 实现双飞翼布局：（左右两边固定宽，中间自适应，使用float、负外左边距实现，和圣杯布局相比这里的main只包裹center，而圣杯布局main包裹center、left、right三个元素）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
        *{
            padding: 0;
            margin: 0;
        }
        #header,#footer{
            width: 100%;
            height: 100px;
            background-color: aqua;
        }
        #main{
            width: 100%;
            background-color: rgb(160, 55, 55);
        }
        #main,#left,#right{
            height: 100px;
            float: left;
        }
        #center{
            margin: 0 100px;
        }
        #left{
            width: 100px;
            height: 100px;
            margin-left: -100%;
            background-color: #aaa;
        }
        #right{
            width: 100px;
            height: 100px;
            margin-left: -100px;
            background-color: #aaa;
        }
        #footer{
            clear: both;
        }
    </style>
</head>
    <body>
        <div id = "header">header</div>
        <div id = "main">
            <div id = "center">center</div>
        </div>
        <div id = "left">left</div>
        <div id = "right">right</div>
        <div id = "footer">footer</div>

    </body>
</html>
  • 浏览器重绘与回流：

当DOM树与stylesheet关联生成render渲染树之后，渲染树的一部分会因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就是回流。每个页面至少需要一次回流，就是页面在第一次加载的时候。在页面回流的时候浏览器会使渲染树中受到影响的部分失效，并重新构建这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕上，该过程为重绘。

回流：当渲染树中部分或全部元素的尺寸结构或者某种属性发生变化时，浏览器重新渲染文档的过程就是回流

重绘：当页面中的元素样式改变不会影响它在文档流中的位置时浏览器会将新样式赋予给元素并重新绘制它，这就是重绘

会导致回流的操作有：添加删除可见的DOM元素、元素位置尺寸发生变化、激活CSS伪类、查询一些属性或者调用某些方法（clentWidth,offsetWidth）

如何避免回流：

CSS：避免设置多层内联样式、将动画效果应用在position设置为absolute或者fixed的元素上（脱离文档流），避免使用css表达式（calc()）

JS：避免频繁操作样式、避免频繁操作DOM、避免频繁读取会引发重绘/回流的属性，使用documentfragment

  • 高度塌陷及其解决：

当一个元素设置浮动之后会脱离文档流，如果父元素没有设置高度，下面的元素会上移，浮动元素会覆盖下边的元素内容，这就是高度塌陷。

解决方法：

1、给父元素指定高度

2、给父元素开启BFC：设置定位为绝对定位或开启overflow为非visible属性

3、给父元素添加一个伪元素::after，然后该元素设置清除浮动：clear:both

4、给浮动元素下面一个元素然后该元素设置清除浮动

  • 实现一个三角形：
1
2
3
4
5
6
7
8
//向上
.anjiaoxing{
	width:0;
    height:0;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
	border-bottom:10px solid red;
}
  • 实现毛玻璃效果：

使用backdrop-filter属性的blur方法为一个元素后面区域添加模糊效果，filter则是作用于整个元素

如果为了兼容，可以使用background-attachment:fixed在元素背后叠加一张同样的图片，然后使用filter:blur对其进行模糊处理即可。

  • gpu加速：

当我们在css中做一些对CPU负荷较大的事情，比如css动画、变形和渐变时，可以使用GPU加速的方法来获取更高的渲染性能，同时减少cpu资源的争用。

1、在二维空间中使用translateZ或者translate3d方法来骗取浏览器触发硬件加速。但是这样做使用代价的，就是会占用RAM与GPU存储空间，考虑到移动设备的存储容量有限，所以需要谨慎使用。

2、will-change属性：提前通知浏览器我们要对元素进行什么操作，让浏览器可提前准备合适的优化设置，这样元素就可以更快的改变与渲染，达到页面快速更新，表现更加流畅的效果。但是对太多属性设置will-change会占用太多的资源甚至导致页面奔溃，可以通过js对will-change进行释放。

  • css解析是否阻塞html解析与渲染：

由于在浏览器渲染过程中，html需要解析成dom树，css需要解析成stylesheet，所以html解析与css解析时两个并行的进程，css解析不会影响html解析；由于渲染树是依赖于dom树与stylesheet的，所以所以必须等到stylesheet构建完成才开始渲染，所以css解析会影响html渲染。

由于js可能会操作之前的dom节点与css样式，所以样式表会在js执行前先加载执行完毕，所以css会阻塞后面js的执行。

  • requestAnimationFrame：window.requestAnimationFrame()

当使用定时器setTimeout实现动画时，由于定时器的回调函数时异步执行的，所以实际执行时间与设置的延迟时间会存在差异。屏幕的刷新频率一般是60hz，所以我们一般设置动画执行间隔为16.7ms，但是由于定时器的特点可能出现动画出现闪烁的效果，引起用户眼睛疲劳。

使用requestAnimationFrame可以由系统函数来决定回调函数执行的时机，它是跟着屏幕刷新频率走的所以不会出现丢帧的现象。而且相比于定时器开启后即使页面被隐藏或者最小化，只要不清除定时器都是一直在后台执行，完全浪费CPU资源；但是requestAnimationFrame任务在被系统暂停后会停止渲染，节省CPU资源。而且使用requestAnimationFrame可以保证回调函数在页面刷新间隔只执行一次，起到函数节流的效果。唯一的缺点就是浏览器对requestAnimationFrame的兼容性较差，所以可以通过优雅降级的方式根据不同浏览器实现动画效果。

  • CSS3新特性：

1、新增了一些选择器：:nth-child、:first-of-type、:last-child

2、新样式：

边框新增了border-radius、box-shadow、border-image属性

背景新增了background-origin等属性

文字，颜色也有

3、transition过渡

4、transform转换：包括translate位移、scale缩放、rotate旋转、skew倾斜

5、animation动画

6、渐变：线性渐变linear-gradient与径向渐变radial-gradient

。。。。

  • 知道element-ui所使用的CSS样式命名规则吗，说说REM命名规则：

REM是一种前端CSS命名方法论，命名约定的模式是

1
2
3
.block {} 代表更高级别的抽象或组件
.block__element {} 代表.block的后代，用于形容.block的整体
.block--modifier {} 代表.block的不同状态或不同版本

BEM的关键是可以获得更多的描述与更加清晰的结构，从起名字就可以知道某个标记的含义。实例如下：

1
2
3
4
5
6
7
<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>
  • 谷歌浏览器的最小字体显示是12px，如何使其支持小于12px的文字：

使用webkit前缀与transform:scale()这个属性进行缩放（-webkit-transform:scale(0.8)）。

  • JS实现动画与CSS3实现动画的区别：

CSS3动画：

优点：浏览器可以对动画进行优化（requestAnimationFrame或者是GPU加速），对于帧速表现不好低版本浏览器可以做到自然降级

缺点：运行过程中控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画等。代码冗长，复杂的动画CSS代码会比较多。

JS动画：

优点：JS动画控制能力很强，可以在动画播放过程中对动画进行控制；动画效果比CSS3丰富，有些动画效果只有JS动画可以完成；CSS3有兼容性，但是JS没有。

缺点：JS单线程，主线程其他任务容易出现阻塞，出现丢帧的情况。代码复杂度高于CSS动画。

  • 知道CSS选择器的效率高低吗：

CSS选择器效率从高到低的排序如下：

  1. ID选择器 比如#header
  2. 类选择器 比如.promo
  3. 元素选择器 比如 div
  4. 兄弟选择器 比如 h2 + p
  5. 子选择器 比如 li > ul
  6. 后代选择器 比如 ul a 7. 通用选择器 比如 *
  7. 属性选择器 比如 type = “text”
  8. 伪类/伪元素选择器 比如 a:hover
  • 说说外边距溢出：

外边距溢出就是在父元素没有设置边框的情况下，为子元素设置外边距，导致父子元素一起发生位移。

解决方案：

1、父元素触发BFC

2、父元素添加伪元素，使设置外边框的子元素不与父元素直接接触

3、为父元素设置边框

4、为父元素设置内边距

5、在子元素div前添加空的table标签

如何实现自适应布局：

可以使用lib-flexible插件对html根标签根据屏幕尺寸绑定不同的font-size，然后使用post-css实现px自动转化为rem的方式实现自适用。

对于移动端适配，可以通过meta标签的viewpoint来将当前页面的宽度设置为device-width，还可以设置页面的最大缩放比例比例等等。

ChenZehong

ChenZehong

贵在坚持

86
19
0
CATEGORYS
TAGS