2021 前端面试总结 --CSS篇

515

一、布局类问题

1.css 实现两边定宽,中间自适应布局

(1) 绝对定位 + margin

原理是将左右两侧进行定位,让其脱离文档流。 中心区域自然流动到它们下面,再为其设置margin值

<div class="content">
	<div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.sides(){
    position: absolute;
    top: 0;
    width: 200px;
    min-height: 800px;
    background-color: red;
}
.content {
	position: relative;
}

.left {
    .sides();
    left: 0;
}
.right {
    .sides();
    right: 0;
}
.center {
    margin: 0px 210px;
    min-height: 800px;
    background-color: green;
}

(2) 浮动

1.两边向左和右浮动,中间margin两边宽度距离

.sides(){
    width: 200px;
    min-height: 800px;
    background-color: red;
}
.content {
	position: relative;
}

.left {
    .sides();
    float: left;
}
.right {
    .sides();
    float: right;
}
.center {
    min-height: 800px;
    margin: 0px 210px;
    background-color: yellow;
}

2.float + overflow

.left { float: left; width: 100px; background: red; } 
.content { background: yellow; height:300px; overflow: hidden; }
.right { float: right; width: 100px; background: blue; }

(3) 圣杯布局(margin负值法,BFC)

<div class = “wrap”>  
   <div class = “center”></div>  
</div>  
<div class = “left_margin”></div>  
<div class = “right_margin”></div>  

.wrap{
    center{ 
    margin:0 210px;  //避免被遮住
    height: 100px; 
    }  
} 
.sides(){
    width: 200px;
    height: 100px;
}
.left_margin {
    .sides();
    float: left;  //浮动的关系,center会占据整个container,左右两块区域被挤下去了
    margin-left: -100%;  //设置leftmargin-left: -100%;,让left回到上一行最左侧
 }  
.right_margin{
    .sides();
    float: left;
    margin-left: -200px;  //回到最右边
}  

(4) flex布局 --- 流动布局实现三栏布局

.content{
	width:100%;
	height:100px;
	display:flex;
	margin:10px;
}
.left .right{
	width:200px;
	height:100px;
	margin:10px;
	background-color:#999;
}

.middle{
	flex:1; //flex: flex-grow flex-shrink flex-basis的缩写,内容区则会自动放大占满剩余空间
	height:100px;
	margin:10px;/*左右margin不会叠加*/
	background-color:#f00;
}

2.(SHEIN)CSS实现瀑布流

(1) multi-columns 方式

.masonry {
  column-count: 3; //将子元素设置为3column-gap: 2em; //设置子元素列间距
  width: 80%;
  margin: 2em auto;
}
.item {
  padding: 2em;
  margin-bottom: 2em;
  break-inside: avoid; //避免元素内部出现换行符,不加的话会出现当只有一列时,原列会被分成3列呈现
  background: #f60;
}

(2) flexbox 方式

.masonry { 
    height: 800px;
    display: flex; 
    flex-flow: column wrap;
    width: 80%;
    margin:2em auto;
}

3.各种水平以及垂直居中的方式 --(杭州端点)绝对定位实现水平垂直居中

(1)文字图片居中

  .textx-center() {
    text-align: center;
  }
  .texty-center() {
    display: table-cell;// 此元素会作为一个表格单元格显示(类似 <td> 和 <th>);vertical-align: middle; 把此元素放置在父元素的中部。
    vertical-align: middle;
  }

(2)定宽居中页面布局

 .layout-page(@width: 1200px) {
    width: @width;
    margin:0 auto;
  }

(3)块级元素水平居中

 .box-center() {
    display: block; //此元素将显示为块级元素,此元素前后会带有换行符。
    margin-left: auto;
    margin-right: auto;
  } 

(4) 居中, 不确定尺寸, 不兼容 IE6

 .unknown-center() {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .unknown-x-center() {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .unknown-y-center() {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }

(5) 居中, 确定尺寸, 兼容 IE6

.known-center(@w, @h) {
    .size(@w, @h);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -(@w / 2);
    margin-left: -(@h / 2);
  }
  .known-x-center(@w) {
    width: @w;
    position: absolute;
    left: 50%;
    margin-left: -(@h / 2);
  }
  .known-y-center(@h) {
    height: @h;
    position: absolute; 
    top: 50%;
    margin-top: -(@w / 2);
  }

(6) 居中, CSS3 平移方式, 兼容性不行

.translate-center() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

(7) 居中, Flex 方式, 兼容性不行

.flex-center() {
    display: flex;
    align-items: center;
    justify-content: center;
  }

(8) 伪元素实现垂直居中(伪元素:before搭配vertical-align:middle实现元素垂直居中)

.parent() {
    display: inline-block;
    font-size: 0;
    text-align: center;
}
.parent():before {
    display: inline-block;
    content: '';
    vertical-align: middle;
 }
.child() {
   display: inline-block;
   vertical-align: middle;
}

二 、 定位类问题

1.(杭州端点)position取值及应用场景

position属性

  • 1.static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明),相当于没有定位,基本上用不到这个属性。
  • 2.relative:位置被设置为 relative 的元素,可将其移至相对于其原来位置的地方,原来的位置遗留空白区域。
  • 3.absolute 位置设置为 absolute 的元素,可位置相对于最近的已定位父元素(一般与用),如果元素没有已定位的父元素,那么它的位置相对于window。 已定位的元素会脱离文档流(相当于浮动),不占据空间。
  • 4.fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。 对于浏览器的位置是固定的。

position :fixed 运用场景:

  • 1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告,功能按钮等)
  • 2.导航栏浮动置顶。
  • 3.隐藏div实现弹窗功能(登陆注册界面)
  • 4.全屏背景(图片,视频等)

position :absolute基于哪个点定位

定位于父元素的左上角

2. position 设置 topleft、translateX、translate3d 设置三种方式有什么区别

简单说明区别:

  • top/left是布局类的样式,会影响到元素在文档中的布局,当对布局(layout)进行动画时,该元素的布局改变可能会影响到其他元素在文档中的位置,就导致了所有被影响到的元素都要进行重新布局,浏览器需要为整个层进行重绘并重新上传到 GPU,所以这类的样式变化必然会导致重排,也就是说会对这些节点以及受到这些节点影响的其他节点重新进行 CSS计算->布局->重绘 这个过程,而css计算和重新布局是需要消耗大量资源的
  • transform 属于合成属性(composite property),对合成属性进行 transition/animation 动画将会创建一个合成层(composite layer),这使得被动画元素在一个独立的层中进行动画。通常情况下,浏览器会将一个层的内容先绘制进一个位图中,然后再作为纹理(texture)上传到 GPU,只要该层的内容不发生改变,就没必要进行重绘(repaint),浏览器会通过重新复合(recomposite)来形成一个新的帧。(不会引起整个页面的回流重绘,不需要进行CSS计算和重新布局,所以在性能上会比top/left要好得多)
  • translate3D传说因为走的是3D,所以能得到更完整的GPU加速的支持,在GPU中还有贴图缓存等手段帮你优化性能,所以更快。且现在大部分手机浏览器支持对translate3d的元素进行GPU加速,浏览器会把这个元素单拎出来作为一个绘图层,这一层交给GPU渲染,完了再回来正常做混合(composite),这样可以利用GPU加速。于是乎甚至有给元素加上translate3d(0, 0, 0)来动触发GPU加速

应用场景

一般可以在移动端使用transform: translate代替top left marg等做位移,甚至会给元素加上translate3d(0, 0, 0)来触发GPU加速

总结

对布局属性进行动画,浏览器需要为每一帧进行重绘并上传到 GPU 中 对合成属性进行动画,浏览器会为元素创建一个独立的复合层,当元素内容没有发生改变,该层就不会被重绘,浏览器会通过重新复合来创建动画帧

注:transform的局限性提到,transform实际上也是用到了GPU加速,也就是说占用了内存。由此可见创建GraphicsLayer,虽然节省了计算、布局和重绘阶段的性能,但合成层创建的越多,占用内存就会越大,而过多的渲染开销会超过性能的改善。因此,当且仅当需要的时候,才会为元素创建渲染层。

对元素进行动画的一些要点:

  • 1,尽量使用keyframes和transform进行动画,这样浏览器会自身分配每帧的长度,并作出优化
  • 2,如果非要使用js来进行动画,使用requestAnimateFrame
  • 3,使用2d transform而不是改变top/left的值,这样会有更短的repaint时间和更圆滑的动画效果
  • 4,移动端的动画效果可能会比pc端的差,因此一定要注意性能优化,尽量减少动画元素的DOM复杂性,待动画结束后异步执行DOM操作

三 、浮动和清除浮动

1.浮动导致父级高度塌陷及清浮动的方式(BFC、伪元素、兄弟结点)

父元素高度塌陷

当父元素不设置‘height’属性时,向其中添加子元素,父元素会拥有子元素的高度 但是当其中的子元素添加’float‘属性时,子元素会脱离文档流,父元素会失去支撑其的高度,也就是所谓的 ‘高度塌陷’

(1)设置父元素高度

这种方式比较简单直接,但是需要确定父元素准确的高度,并且后期不会更改

(2)设置clear属性

为什么要用clear:both clear有四个主属性值:‘none(默认无)’,‘left(左侧无浮动)’,‘right(右侧无浮动)’,‘both(两侧无浮动)’ clear有一个规则,那就是只作用于当前元素的前一个兄弟元素,而前一个元素只会存在于当前元素的左边或者右边,无论那一边,’clear:both‘都能完美的替代

(3)开启BFC模式

  • overflow设为hidden、scroll、auto
  • float值不为none
  • display设为inline-block、tabole-cell、table-caption
  • position不为relative、static

一旦开启元素的BFC后,元素将会具有以下特性:

  • 父元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素可以包含浮动的子元素

(4)在高度塌陷的父元素后面添加一个空的div元素 弊端:会添加很多空标记,增加结构负担,产生代码冗余;

(5)给父元素设置overflow:hidden,解决高度塌陷并能实现高度自适应的方法(遵循BFC的显示原则) 弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏;

(6)display:table; 给父元素添加display:table;让父元素转换元素类型跟表格的特性一样; 弊端:会改变当前元素的元素类型;

(7)通过after伪类元素添加一个空白的块元素,css加下列属性,并给要清除的div加上clear_fix的类名。 推荐使用的方式,没有什么副作用。

content: ""; /* 添加内容 */ 
clear: both; /* 清楚两侧浮动 */ 
display: block; /* 转换元素类型为块元素 */ 
height: 0; 
overflow: hidden; /* 溢出隐藏属性 */ 
visibility: hidden;/* 隐藏属性 */

(8)br标签清除浮动

br标签存在一个属性clear。这个属性就是能够清除浮动的利器,在br标签中设置属性clear,并赋值all,即能清除浮动。但这种方法与第二种一样,同样会使页面结构冗余。

四、盒模型、元素、边距问题

1.(杭州端点)css盒模型

个人认为可以从盒模型去聊到边距重叠,BFC和层叠上下文

(1) CSS盒模型

(2) CSS设置标准盒模型和IE盒模型

标准盒模型:box-sizing:content-box
IE盒模型:box-sizing:border-box

(3)margin重叠(外边距塌陷)问题

1.兄弟级的垂直块之间,margin这个属性上下边距,会发生重叠的情况

解决办法:float浮动或display:inline-block

2.父子级的块之间,子级的上下margin会与父级上下margin重叠

解决办法:父级加overflow:hidden或加padding或加border,子级加position:absolute

2.行内元素和块级元素有那些 区别是什么

  • 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
  • 行内元素:span, strong, em, br, img , input, label, select, textarea, cite,

1.块级元素会独占一行,其宽度自动填满其父元素宽度

行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化

2.块级元素可以设置 width, height属性,行内元素设置width, height无效

【注意:块级元素即使设置了宽度,仍然是独占一行的】

3.块级元素可以设置margin 和 padding.

行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。 (水平方向有效,竖直方向无效)

对行内元素设置padding,margin有什么效果?

水平方向有效,竖直方向无效

3.display

(1) inline-block的缺陷是什么

设置为display:inline-block后,元素与元素之间会多出空格间隙

1.空隙产生的原因

当元素有行内元素的特性时,元素间的空白符都会被解析,回车换行会被解析成一个空白符,如果字体不为零那么就会占一定的宽度,并且这些间距会随字体的大小而变化

2.空隙的解决办法

  • 1、写代码时元素间不换行,中间不留空隙,但这样 会导致代码的可读性变差。
  • 2、父元素设置font-size:0px;在子元素上设置想要的字体大小,但万一后面有很多的子元素,这种方法会导致代码冗余。
  • 3、父元素设置display:table;word-spacing:-1em;
  • 4、子元素设置浮动,如果这样做会显得display:inlline-block有点多余,因为块元素设置浮动就能在同一行了,为什么还要设display:inlline-block呢?而且都要清除浮动带来的父盒子塌陷问题。
  • 5、子元素设置margin-left:负数px;(不兼容,不推荐)

3.用font-size为0解决间隙问题有什么弊端

font-size有继承性,在父元素设置了font-size子元素的所有元素都受到其影响

(2) display:none,visibility:hidden,opactiy:0的区别

display: none;

  • DOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;
  • 事件监听:无法进行 DOM 事件监听;
  • 性能:动态改变此属性时会引起重排,性能较差;
  • 继承:不会被子元素继承,毕竟子类也不会被渲染;
  • transition:transition 不支持 display。

visibility: hidden;

  • DOM 结构:元素被隐藏,但是会被渲染不会消失,占据空间;
  • 事件监听:无法进行 DOM 事件监听;
  • 性 能:动态改变此属性时会引起重绘,性能较高;
  • 继 承:会被子元素继承,子元素可以通过设置 visibility: visible; 来取消隐藏;
  • transition:visibility 会立即显示,隐藏时会延时

opacity: 0;

  • DOM 结构:透明度为 100%,元素隐藏,占据空间;
  • 事件监听:可以进行 DOM 事件监听;
  • 性 能:提升为合成层,不会触发重绘,性能较高;
  • 继 承:会被子元素继承,且,子元素并不能通过 opacity: 1 来取消隐藏;
  • transition:opacity 可以延时显示和隐藏

4.BFC

(1)BFC是什么

BFC(Block Formatting Context)直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用 当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。 也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干。

(2)怎样才能形成BFC

  • 1.float的值不能为none
  • 2.overflow的值不能为visible
  • 3.display的值为table-cell, table-caption, inline-block中的任何一个
  • 4.position的值不为relative和static 

(3)BFC的约束规则(利用方式)

  • 1.内部的Box会在垂直方向上一个接一个的放置
  • 2.垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关)
  • 3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
  • 4.BFC的区域不会与float的元素区域重叠
  • 5.计算BFC的高度时,浮动子元素也参与计算
  • 6.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

(4)BFC的作用

1.不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,很多自适应的两栏布局就是这么做的。

2. 清除元素内部浮动

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

3.防止垂直 margin 重叠

//Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 可以在外面包裹一层容器,并触发该容器生成一个BFC。那么两个元素便不属于同一个BFC,就不会发生margin重叠了

4.解决高度塌陷

5.层叠上下文

(1)元素层叠顺序是如何计算的(层叠上下文和层叠顺序,概念与BFC类似)

层叠准则

1.谁大谁上: 当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

2.后来居上: 当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

(2)层叠上下文的创建

  • 1.页面根元素天生具有层叠上下文,称之为“根层叠上下文”。

  • 2.z-index值为数值的定位元素的传统层叠上下文。

  • 3.其他CSS3属性:

    z-index值不为auto的flex项(父元素display:flex|inline-flex).

    元素的opacity值不是1.

    元素的transform值不是none.

    元素mix-blend-mode值不是normal.

    元素的filter值不是none.

    元素的isolation值是isolate.

    will-change指定的属性值为上面任意一个。

    元素的-webkit-overflow-scrolling设为touch

(3)层叠上下文元素特性

  • 1.层叠上下文的层叠水平要比普通元素高;
  • 2.层叠上下文可以阻断元素的混合模式;
  • 3.层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 4.每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
  • 5.每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

五、CSS基础问题

1.CSS选择器

1.标签选择器(如:body,div,p,ul,li)

2.类选择器(如:class="head",class="head_logo")

3.ID选择器(如:id="name",id="name_txt")

4.全局选择器(如:*号)

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如:div p,注意两选择器用空格键分开)

9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

11.子选择器 (如:div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

2.css优先级

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器

7.浏览器自定义或继承

总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

3.rem em px vh vw

px(像素 Pixel )

相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

利用 px 设置字体大小及元素宽高等比较稳定和精确。Px 的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。

em

相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(一般为16px)。

rem(root rem)

rem 是 CSS3 新增的一个相对单位(root em,根 em)。与 em 的区别在于使用 rem 为元素设定字体大小时,仍然是相对大小,但相对的只是 HTML 根元素。

rem 的产生是为了帮助人们解决 em 所带来的计算问题。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

vh vw

100vh = 100%屏幕高度 100vw = 100%屏幕宽度

通用准则

px:必须使用固定值防止被缩放的元素,若被缩放,结构会被打碎。

em:优点在于组件模块化,缺点在于计算复杂。

rem:优点在于可以做到避免字体大小逐层复合的连锁反应,缺点在于使组件缺少模块化;使用rem的主要目的是确保无论用户如何设置自己的浏览器字体大小,布局都能调整到合适大小。

注意:在创建布局时,采用 px 为单位更加方便,而部署时应该用 rem 单位;多列布局时,列宽可使用%。

五、CSS动画

1.(杭州端点)css动画怎么实现,transition和animation有什么区别,怎么定义一个动画

(1)transition和animation的区别

transition是过度属性,需要用户自行触发,触发时间比如:点击,鼠标悬浮等

animation是动画属性,其不需要用户触发,网页加载完成后自动执行

(2)定义一个动画

transation{过度属性 过度时间 动画类型 延迟时间}

@keyframes 动画名称{
  0%{css属性列表}

  ......

  100%{css属性列表}

}
div{
  animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
}

2.(欢聚)实现一个小球左右无限摆动

div {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: red;
  animation-name: around; //属性为 @keyframes 动画规定名称
  animation-duration: 10s; //定义动画完成一个周期所需要的时间,以秒或毫秒计
  animation-timing-function: ease-in-out; //动画以低速开始和结束。
  animation-delay: 1s; //定义动画开始前等待的时间,以秒或毫秒计。默认值是 0animation-iteration-count: infinite;  //定义动画播放次数,infinite为无限
}
@keyframes around {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(180px);
  }
  50% {
    transform: translate(180px, 180px);
  }
  75% {
    transform: translate(0, 180px);
  }
  100% {
    transform: translateY(0);
  }
}

六、常见css效果实现

1.(深信服)CSS 画个扇形?画个三角形?

(1)三角形

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;//宽度 solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

border设置100px,宽高设置为0后得到

然后把其他三边的border设置为 0 就可以得到想要方向的三角形

(2)扇形

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

2.(SHEIN)Css 实现圆形进度条

<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <div class="mask">
        <span class="percent">33%</span>
    </div>
</div>
.circle-bar {
    background-image: linear-gradient(#7affaf, #7a88ff);
    width: 182px;
    height: 182px;
    position: relative;
}
.circle-bar-left {
    background-color: #e9ecef;
    width: 182px;
    height: 182px;
    clip: rect(0, 91px, auto, 0);
}
.circle-bar-right {
    background-color: #e9ecef;
    width: 182px;
    height: 182px;
    clip: rect(0, auto, auto, 91px);
    transform: rotate(118.8deg);
}
.mask {
    width: 140px;
    height: 140px;
    background-color: #fff;
    text-align: center;
    line-height: 0.2em;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 21px;
    top: 21px;
}
.mask > span {
    display: block;
    font-size: 44px;
    line-height: 150px;
}
/*所有的后代都水平垂直居中,这样就是同心圆了*/
.circle-bar * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
/*自身以及子元素都是圆*/
.circle-bar,
.circle-bar > * {
    border-radius: 50%;
}

3.CSS单行多行省略号

(1)单行

overflow: hidden;
text-overflow:ellipsis;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;

(2)多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-wrap: break-word;//允许长单词换行到下一行
word-break: break-all; //强制换行

4.实现一个宽高等比的div (高用vw,100vw等于窗口宽度的100%)

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那

5.实现一个左右布局,左边固定100PX,右边可伸缩,高度沾满整个屏幕。右侧正中间有个长方形,长方形长宽比4:3