面试题总结之CSS篇

发表于 | 分类于 | 阅读

概念基础类

一个div，宽度是100px，此时设置padding是20px，添加一个什么css属性可以让div的实际宽度仍然保持在100px，而不是140px？

1
selector{box-sizing: border-box;}

清除浮动的方式，提供尽可能多的方案。

清除浮动全总结

行内元素能否设置宽高？能否设置padding和margin？

行内元素不能设置宽高，
行内元素只能设置左右的padding和左右的margin

CSS的引入一般有三种

  • 外部资源引入
  • style标签
  • 内联style属性

使用link和@import的区别：

  • link属于标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS
  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  • import是CSS2.1 提出的，只在IE5以上才能被识别，而link是 标签，无兼容问题

BFC、IFC

IFC、BFC、GFC 与 FFC

对栅格的理解

全局采用IE盒模型
每个容器分为行（row）和列（column）组成，容器可以嵌套容器，所有列都左浮动，按照百分比做多可以分为12列，每一行撑满了会自动换行

1像素边框问题

造成原因：在 Retina 屏下，设置 1px 边框，实际显示 2px，是因为部分移动设备中devicePixelRatio属性不为1，如苹果5s为2，CSS设置的1px实际上是物理像素，也就是设备屏幕的1px，devicePixelRatio为2的设备屏幕宽高都会显示为2px，devicePixelRatio为3的设备屏幕宽高都会显示为3px

解决办法：viewport + rem
动态加载页面的viewport，如devicePixelRatio = 2 时，动态输出viewport：

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

描述CSS reset和normalize.css，并说一下他们的不同之处？

Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。

Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。

单行文本溢出加 …如何实现?

1
2
3
4
5
E{
  overflow: hidden;  /*超出隐藏*/
  white-space: nowrap;  /*不换行*/
  text-overflow: ellipsis;  /*用“...”表示超出的文本*/
}

什么是 CSS 继承? 哪些属性能继承，哪些不能？

CSS继承就是子标签继承了上级标签的CSS样式的属性。

可继承的属性：font-size，font-style，font-family，font-weight，text-align，text-indent，color，visibility，opacity；
不可继承的属性：border，padding，margin， width， height， display， background，overflow

px, em, rem 有什么区别

px是像素，是固定单位
em是相对于直接父元素单位的大小，em就是倍数，是相对单位
rem是相对于根元素的大小，rem也是倍数，是相对单位

CSS外边距合并是什么？有哪些情况？如何解决？

元素的外边距和另一元素的外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，叫做外边距合并

比如兄弟元素的上下margin合并，以及父子之间的上margin合并

兄弟元素外边距合并可以用生成BFC的方法，可以会阻止元素外边距合并，也可以包一层wrapper
父子之间的外边距合并可以给父元素加一个padding-top: 0.1px来解决，更好的方法是避免子元素使用margin，改用父元素使用padding

CSS样式的优先级怎么计算？

!important > 内联样式 > id > class > 标签

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

1
2
3
body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

代码表示设置body字体大小为12px，行高为字体的1.5倍，后面是设置字体以及备选字体，中间用逗号隔开，首选字体为tahoma，没有的话选用arial，以此类推。
‘Hiragino Sans GB’加引号是因为中间有空格，不加引号的话会被认为是两个字体； ‘\5b8b\4f53’加引号是因为需要转义。
字体里\5b8b\4f53代表宋体的unicode码。不写成”宋体”是为了防止用户页面解码方式不一致造成乱码。

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align: center是让行内元素或行内块元素水平居中。一般作用于文本元素或img元素。作用在块元素，会使块元素里的行内子元素水平居中； 作用在行内元素的时候直接水平居中。

盒模型有哪几种？有什么区别?

  • border-box盒模型
    盒模型的width和height的值是border+padding+content的和。在IE8以下版本的浏览器中不添加doctype时会是border-box盒模型

  • content-box盒模型
    盒模型的width和height的值是content的值（不包括border和padding）。在Chrome和ie9及以上，以及IE8以下版本的浏览器中添加doctype时会是content-box盒模型

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但opacity作用于元素和所有子元素的透明度，而rgba()只作用于元素自身的颜色和透明度（即子元素不继承透明度），可以认为rgba()就是颜色值

CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing（字间距）或者word-spacing（单词间距）

inline-block有什么特性？如何去除缝隙？

  • 去除空格，即去除标签之间的空格和换行(不美观，代码可读性差)
  • 设置font-size:0 (目前应用较多)
  • letter-spacing和word-spacing (因为字体大小不一样，所以设置不能统一兼容，根据情况来变化)

高度不一样的inline-block元素如何顶端对齐?

设置vertical-align: top可以使顶端对齐

CSS sprite 是什么?

CSS sprite是将许多页面图片放入单个图片中的集合。
具有许多页面图片的网页可能需要很长时间才能加载并有多个服务器请求。
使用CSS sprite将减少服务器请求的数量并节省带宽。
CSS sprite也叫CSS精灵。

让一个元素”看不见”有几种方式？有什么区别?

display：none;彻底消失（看不见也摸不到），不占据原来位置；
visibility: hidden;隐藏（看不见但摸得到），占据原来的位置；
opacity: 0;元素透明度为0，只是不显示，但是元素还在，还占据原来的位置

::before 和 :before中双冒号和单冒号 有什么区别？

在CSS3中，为了区分伪类和伪元素，明确规定单冒号(:)用于CSS伪类，双冒号(::)用于CSS伪元素。（伪元素由双冒号和伪元素名称组成）

考虑到兼容性的问题，现在的浏览器支持的伪元素中单冒号的写法。

所以说，目前在CSS中对伪元素使用单冒号和双冒号在效果上是没有任何区别的。

但是，我们为了写出更规范的代码，应该用双冒号的伪元素写法来区别伪类，养成良好习惯。

解释一下::before和::after这2个伪元素的作用。

想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

CSS3新增伪类有那些？

1
2
3
4
5
6
7
8
9
10
p:first-of-type  /*选择属于其父元素的首个p元素的每个p元素*/
p:last-of-type /*选择属于其父元素的最后p元素的每个p元素*/
p:only-of-type /*选择属于其父元素唯一的p元素的每个p元素*/
p:only-child   /*选择属于其父元素的唯一子元素的每个p元素*/
p:nth-child(2) /*选择属于其父元素的第二个子元素的每个p元素*
:after     /*在元素之前添加内容,也可以用来做清除浮动*/
:before      /*在元素之后添加内容*/
:disabled    /*控制表单控件的禁用状态*/
:checked        /*单选框或复选框被选中*/

display有哪些值？说明他们的作用。

display的值有几十种（可以看MDN），列举几种常用的

1
2
3
4
5
6
7
8
9
block         /*块类型。默认宽度为父元素宽度，可设置宽高，换行显示*/
none          /*缺省值。象行内元素类型一样显示*/
inline        /*行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示*/
inline-block  /*默认宽度为内容宽度，可以设置宽高，同行显示*/
list-item     /*象块类型元素一样显示，并添加样式列表标记*/
table         /*此元素会作为块级表格来显示*/
inherit       /*规定应该从父元素继承 display 属性的值*/
flex          /*生成flex box盒模型*/
grid          /*生成栅格盒模型*/

position值为relative和absolute以及fixed时的定位原点是？

  • relative
    生成相对定位的元素，相对于其正常位置进行定位，原点在border内，包含padding区域（不给偏移值时默认在content原点）。
  • absolute
    生成绝对定位的元素，相对于position值不为static的第一个祖先元素进行定位，原点在border内，包含padding区域（不给偏移值时默认在content原点）。
  • fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器视窗进行定位，原点在浏览器左上角（不给偏移值时默认在content原点） 。

CSS3有哪些新特性？

CSS3选择器 (伪类选择器nth-child/)
圆角 (border-radius)
阴影和滤镜 (box-shadow/filter)
文字阴影 (text-shadow)
文字渲染 (text-decoration)
背景色渐变 (linear-gradient)
3D (translate3d)
缩放,偏移,倾斜,旋转 （transform) 如:transform: scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\ rotate(30deg)
过渡动画 (animation)
动画 (transition)

综合实战类

如何让两个div分别以40%和60%的比例排在一行内，提供尽可能多的方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .wrap{
  margin: 0 auto;
  height: 300px;
  background-color: #ccc;
}
.first{
  background-color: pink;
}
.second{
  background-color: #777;
}
</style>
<body>
  <div class="wrap">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</body>

  • 方法一：flex

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .wrap{
      display: flex;
    }
    .first{
      flex-grow: 2;
    }
    .second{
      flex-grow: 3;
    }

  • 方法二：百分比

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .first{
      height: 100%;
      float: left;
      width: 40%;
    }
    .second{
      height: 100%;
      float: left;
      width: 60%;
    }

  • 方法三：左列定位，右列浮动+margin

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .wrap{
      position: relative;
    }
    .first{
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      width: 40%;
    }
    .second{
      height: 100%;
      float: left;
      width: 60%;
      margin-left: 40%;
    }

如何用css实现一个div的一秒内向右平滑移动100px的动画 .

预览链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
selector{
	width: 100px;
	height: 100px;
	background-color: #000;
	position: relative;
}
selector:hover{
	animation: loops 1s linear forwards;
}
@keyframes loops{
	0%{
	left: 0;
	}
	100%{
	left: 100px;
	}
}

左右布局：左边定宽、右边自适应，不少于3种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .wrap{
  margin: 0 auto;
  height: 300px;
  background-color: #ccc;
}
.first{
  background-color: pink;
  width: 100px;
}
.second{
  background-color: #777;
}
</style>
<body>
  <div class="wrap">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</body>

方法一：左列浮动

1
2
3
4
5
6
7
8
9
.first{
  float: left;
  height: 100%;
}
.second{
  width: 100%;
  height: 100%;
  padding-left: 100px;
}

方法二：flex布局

1
2
3
4
5
6
7
8
9
10
.wrap{
  display: flex;
}
.first{
  height: 100%;
}
.second{
  flex-grow: 1;
  height: 100%;
}

方法三：左列定位

1
2
3
4
5
6
7
8
9
10
11
12
.wrap{
  position: relative;
}
.first{
  position: absolute;
  height: 100%;
}
.second{
  height: 100%;
  width: 100%;
  padding-left: 100px;
}

方法四：左右都定位，左侧层级更高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
  position: relative;
}
.first{
  position: absolute;
  height: 100%;
  z-index: 1;
}
.second{
  position: absolute;
  height: 100%;
  width: 100%;
  padding-left: 100px;
}

（水平）居中有哪些实现方式

块级元素水平居中：

margin：0 auto；
绝对定位并用负边距居中；
行内元素居中：

text-align:center；

（垂直）居中有哪些实现方式

垂直居中几种方法

水平垂直居中有哪些方式？

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
/*水平垂直居中一*/
/*确定容器的宽高 宽500 高 300 的层*/
/*设置层的外边距*/
 div {
 	position: relative;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */
  }
/*水平垂直居中二*/
/*未知容器的宽高，利用 `transform` 属性*/
 div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */
 }
/*水平垂直居中三*/
/* 利用 flex 布局*/
/* 实际使用时应考虑兼容性*/
 .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */
 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }

如何自定义滚动条？

不加选择器时是全局自定义滚动条
前面加选择器是局部自定义滚动条

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-scrollbar {
    width: 4px; /*垂直方向滚动条宽度*/
    height: 4px; /*水平方向滚动条高度*/
}
/*滚动条轨道*/
::-webkit-scrollbar-track {
    background-color: pink;
} 
/*滑块*/
::-webkit-scrollbar-thumb {
    background-color: red;
}

CSS3 实现一个幻灯片

预览效果

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
<head>
    <style type="text/css">
      .box{
            width: 800px;
            height: 400px;
            margin: 0 auto;
            animation: loops 10s infinite;
         }
         @keyframes loops {
            0% {
                background:url(https://unsplash.it/800/400?image=11) no-repeat;             
            }
            25% {
                background:url(https://unsplash.it/800/400?image=12) no-repeat;
            }
            50% {
                background:url(https://unsplash.it/800/400?image=13) no-repeat;
            }
            75% {
                background:url(https://unsplash.it/800/400?image=14) no-repeat;
            }
            100% {
                background:url(https://unsplash.it/800/400?image=15) no-repeat;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

img元素怎样垂直居中？

1
2
3
4
5
/*img父元素*/
selector{
  vertical-align: middle;
  display: table-cell;
}

多列等高布局

规定下面的布局，实现多列等高布局。

1
2
3
4
<div id="container">
    <div class="left">多列等高布局左</div> 
    <div class="right">多列等高布局右</div>
</div>

多列等高布局，算是比较常见的一种布局，要求两列布局看上去高度一致（就是通常是两列背景色一致）。

如果只是两列背景颜色高度一致，有很多方法可以实现。

  • 使用 display:flex 的方式实现
  • 使用正负 margin 与 padding 相冲的方式实现
  • 父容器设置背景色实现
  • 父容器多重背景色–线性渐变
  • display:table-cell 实现

CSS 斜线的实现

方法一：旋转

1
2
3
4
5
6
selector{
  height: 1px;
  background: #222;
  width: 80px;
  transform:rotateZ(45deg) scale(1.414);
}

方法二：三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
selector{
  position: relative;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: orange;
  border-left-color: orange;
}
selector::before{
  content:"";
  position:absolute;
  left: -50px;
  top: -48px;
  border: 49px solid transparent;
  border-bottom-color: #000;
  border-left-color: #000;
}

方法三：clip-path
css3新属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
selector{
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
    background: deeppink;
}
selector::before{
  content:"";
  position:absolute;
  left: 0;
  top: 1px;
  border: 49.5px solid transparent;
  border-bottom-color: #000;
  border-left-color: #000;
}

方法四：线性渐变

1
2
3
4
5
selector{
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%); 
}

纯CSS实现如图效果


在线预览

代码：

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
<style>
  li{
    list-style: none;
    width: 24px;
    height: 24px;
    background-color: #ccc;
    border-radius: 50%;
    float: left;
    margin-right: 4px;
  }
  ul:hover li{
    background-color: #555;
  }
  
  li:hover~li{
    background-color: #ccc;
  }
</style>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

0%