css相关的面试题前端css常见的面试题，css基础、页面布局、定位与浮动几个大的分类，伪类和伪元素的区别、BFC机制、

css的基础

1、伪类和伪元素的区别

我认为区分伪类和伪元素就看是不是可以用dom元素的实现，用dom元素可实现的可称为伪元素，例如::after、::before等。伪类例如：:link、:visited、:hover、:active、:last-child等。
单冒号还是双冒号？css3规范要求（::）表示伪元素，（:）表示伪类。
更多资料参考总结伪类与伪元素

2、 css常用选择器以及三大特性

选择器：标签选择器、id选择器、类选择器、后代选择器、子选择器（>）、并集选择器、兄弟选择器（+、～）、属性选择器、通配符选择器（*）。
三大特性:
1)继承性：不是所有属性都可继承，只有text-/font-/color/line-可继承，儿子可继承、其他后代也可以继承。
2）层叠性：解析从上到下、出现冲突以最后定的为准。
3）优先级: 从高到低，行内样式>ID选择器>类选择器>元素选择器
important>行内样式>ID选择器>类选择器>标签>通配符>继承

3、盒模型的概念

盒模型的构成包括：content、padding、border、margin
IE盒模型 width = content+padding宽度+border宽度
标准盒模型 width = content

 box-sizing:border-box|content-box|inherit

其中border-box怪异模式或者IE模式来解析计算、content-box标准模式、inherit从父元素继承box-sizing

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

block: 块类型。默认是父元素宽度，和内容宽度无关，可设置宽高、换行显示。
none: 元素不显示、从文档流中移除。
inline: 行内元素。默认为内容宽度，不可设置宽高、同行显示。
inline-block: 默认宽度为内容宽度，可设置宽高、同行显示。
list-item: 像块类型一样显示、并添加样式列表标记。
table: 块级表格显示。
inherit: 从父元素继承。

5、行内元素和块级元素的区别

块级元素：可设置宽高、可设置margin、padding、自动换行、从上到下排列
行内元素：宽高无效、可设置水平方向的margin、padding、不自动换行

6、link和@import的区别

link是使用HTML头部的标签引入外部的css文件。

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

@import 使用css规则引入外部css文件

<style>
@import url(style.css)
</style>

@import 'style.css'
@import url(style.css)

区别1 @import是css的语法规则，只能导入样式。link是html提供的标签，不仅可定义css，还可以定义RSS、rel连接属性等
区别2 加载顺序加载页面时，link标签引入的css被同时加载；@import引入css在页面加载完毕后被加载
区别3 link无兼容性问题，@import低版本浏览器不兼容
区别4 link支持通过javascript控制dom改变样式，@import不支持。

7、css中如何实现动画的？

css3增加了transition和animation两种方式，在css3之前是通过hover伪类属性，另一种是使用js改变css属性。

hover

.test{
  width:100px;
  height:100px;
  background-color: red;
}
.test:hover{
  background-color: yellow;
}

元素状态立即发生变化，没有一个过渡的过程，增加transition就可以解决

transition

.test {
  width:100px;
  height:100px;
  background-color: red;
  transition: 1s;
}
.test:hover {
  background-color: yellow;
}

语法：transition：property | duration | timing-function | delay;
property:设置过渡效果的css名称
duration:完成过渡效果需要多少秒或者毫秒
timing-function：什么方法进行过渡效果
delay：过渡动画的延迟时间。

.test{
  width:100px;
  height:100px;
  background: red;
  transition: background 1s,width 2s,height 3s;
}
.test:hover {
  width:200px;
  height:200px;
  background: yellow;
}

animation更强大

.test{
  width:100px;
  height:100px;
  background: red;
}
.test:hover {
 animation:div-anim 1s linear;
}
@keyframes div-anim{
  100%{
    width:200px;
    height:200px;
   background: yellow;
  }
}

语法： animation：name duration timing-function delay iteration-count direction play-state fill-mode;
name:调用@keyframes定义好的动画名
duration: 动画持续时间
timing-function: 什么方法进行过渡效果
delay: 过渡动画的延迟时间。
iteration-count: 动画的播放次数
direction: 动画播放方向 normal-顺序 reverse-反方向 alternate-轮流（来回往复） alternate-reverse(先反运行，再正运行，交替反复)
play-state：动画播放状态，paused-暂停、running-继续
fill-mode：动画结束后动画的样式，none-动画没开始的样式 forwards-动画结束后动画停留在结束状态 backwards-动画回到第一帧的状态 both-根据direction轮流应用forwards和backwards

动画实现易混淆的概念
animation、transition、tranform：旋转、缩放、移动、倾斜，和设置样式动画没什么关系、translate只是transform的一个属性值。

相关问题扩展：transtion和animation区别

8、css常见隐藏元素的方法，区别？

display:none 不在页面占据位置，也不会相应绑定的监听事件。
visibility:hidden 元素仍占据空间，但不会响应绑定的监听事件。
opcity:0 元素透明度为0，占据空间，响应绑定的监听事件。
z-index:负值，用其他元素来盖住该元素。
tranform:scale(0,0);将元素缩放为0，元素在页面占据位置，但不会相应绑定的监听事件。

9、overflow:scroll时不能平滑滚动应怎么处理？

```css
    -webkit-overflow-scrolling:touch;// 启用硬件加速特性、滑动的流畅
```

10、如何实现单行和多行文本的溢出？

参考如下

11、什么是重排重绘？哪些操作会引起重排重绘？

页面的生成过程

HTML被HTML解析器解析成DOM树；
CSS被CSS解析器解析成CSSOM树
结合DOM树和CSSOM树，生成一颗渲染树(Render Tree);
生成布局（flow），浏览器在屏幕上画出渲染树中的所有节点；
将布局绘制（paint）在屏幕上，显示出页面。

概念

当我们改变一个元素的尺寸位置属性时，会重新进行样式计算、布局、绘制等，这种行为就是重排，重排也叫回流，简单说就是重新生成布局、重新排列元素。当改变了某个元素的颜色属性时不会触发布局，会触发样式计算和绘制，这就是重绘。

触发的一些因素

触发重排

页面首次进入的渲染
添加/删除可见的DOM
改变元素的位置和尺寸，例如边距、边框、宽度、高度等
改变元素内容，如图片大小、文字数量等
改变字体大小
改变浏览器窗口尺寸，如resize
激活css伪类，如hover
设置 style 属性的值，通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性” 常见引起重排的属性、方法： width、height、margin、padding、border、display、position、overflow、font-size、min-height、clientWidth、clientHeight、clientTop、clientLeft、offsetTop、scrollTo()等

2.触发重绘

元素的外观改变，不触发页面布局常见引起重绘的属性： color、border-color、visibility、background、background-image、background-position、border-radius、background-repeat、box-shadow等

如何进行优化

减少重排次数

样式集中改变

// bad
var el = document.querySelector('.el');
el.style.padding='5px';
el.style.border = '1px solid red';

// good
var el = document.querySelector('.el');
el.style.cssText = 'padding:5px;border:1px solid red';

// good
.active {
    padding:5px;
    border-left:1px;
    border-right:2px;
}
var el = document.querySelector('.el');
el.className = 'active';

批量修改DOM 方法： 1.隐藏元素，修改之后，再显示该元素。
2.使用文档片段创建子树，再拷贝到文档中
3.复制节点到副本上，在副本上操作，然后覆盖该元素

//html 
<ul id="mylist">
  <li><a href="https://www.mi.com">xiaomi</a></li>
  <li><a href="https://www.miui.com">miui</a></li>
</ul>

// js
let data = [
  {
    name: 'tom',
    url: 'https://www.baidu.com',
  },
  {
      name: 'ann',
      url: 'https://www.techFE.com'
  }
]
// 公共的js方法
// javascript
function appendNode($node, data) {
  var a, li;
  for(let i = 0, max = data.length; i < max; i++) {
    a = document.createElement('a');
    li = document.createElement('li');
    a.href = data[i].url;
    a.appendChild(document.createTextNode(data[i].name));
    li.appendChild(a);
    $node.appendChild(li);
  }
}

// bad
let ul = document.querySelector('#mylist');
appendNode(ul, data);

// 方法一

let ul = document.querySelector('#mylist');
ul.style.display = 'none';
appendNode(ul, data);
ul.style.display = 'block';

// 方法二
let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);

//方法三
let old = document.querySelector('#mylist');
let clone = old.cloneNode(true);
appendNode(clone, data);
old.parentNode.replaceChild(clone, old);

分离读写 DOM的多个读操作，应该放在一起，不要两个读操作之间，加入一个写操作。

//bad 四次重排+重绘
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1 + 'px';

// good 缓存布局信息 相当于读写分离 触发一次重排+重绘 
var curLeft = div.offsetLeft;
var curTop = div.offsetTop; 
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;


div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px'; 
div.style.bottom = curBottom + 1 + 'px';

原来操作会导致四次重排，读写分离之后实际上只触法一次重排，主要因为浏览器的渲染机制。

    当我们修改元素的几何属性，导致浏览器触发重排或者重绘。浏览器通常会把多次重排操作放入一个队列中，
    等过一段时间或操作达成一定的临界值，然后才会批量执行这些操作。
    但是在获取布局信息操作的时候，会强制将队列清空，也就是强制回流。

12、说一下css预处理，less带来哪些好处？

为css增加编程特性的扩展语言，可以使用变量、简单逻辑判断、函数等基本的编程技巧。css预编译输出还是标准的css样式。
less、sass都是动态的样式语言，是css预处理器，css上的一种抽象层，都是一种特殊的语法/语言而编译成的css。less变量符号是@，Sass变量符号是$
带来的好处：

代码更加整洁、易维护、代码量少
修改更快，基础颜色使用变量，一处动处处动
变量、混入提高样式的复用性
使用代码块，节省大量的代码
一些额外的工具lighten、darken、loops、mixins等这些方法，让css更像一个真正的编程语言。

13、如果需要手动写动画，你认为最小时间间隔是多少？

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

14、什么是响应式布局？响应式布局的原理是什么？

页面布局

1、 flex布局是什么？平时使用flex布局吗

概念：flex是Flexible Box的缩写，弹性布局，用来为盒状模型提供最大的灵活度。
采用flex布局的元素，称之为flex容器，它所有的子元素自动成为容器成员，称为flex项目。
游戏闯关学习flex
容器的属性

flex-direction: row | row-reverse | column | column-reseverse   // 项目的排列方向
flex-wrap:nowrap | wrap | wrap-reverse   // 项目是否都在一条线上，不换行
justify-content: flex-start | flex-end | center |space-between | space-around  //项目在主轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch  // 项目在交叉轴上的对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch // 多根轴线的对其方式
flex-flow: flex-direction 和 flex-wrap属性的简写。

项目的属性

order: 项目的排列顺序，越小越靠前
flex-grow:项目的放大比例。默认0，即使存在剩余空间，也不放大
flex-shrink:项目的缩小比例。默认为1，如果空间不足，项目缩小
flex-basis :项目占据主轴的空间，默认auto，项目本身大小
flex: flex-grow | flex-shrink | flex-basis ,默认为 0 1 auto。
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

平时常用的布局方式
左右两列、上下两行
其他相关问题：
flex:1 什么意思，省略了什么？flex-basis设置auto和0有什么不同？
完整写法：1.flex-grow:1;flex-shrink:1;flex-basis:0%;[参考文章] (www.zhangxinxu.com/wordpress/2…)
2.flex:1在尺寸不足时会优先最小化内容尺寸，flex:auto在尺寸不足时会优先最大化内容尺寸。

2、css实现多列等高布局，要求元素实际占用的高度以多列中较高的为准。

flex布局

<style>
.wrap {
  display:flex;
}
.item {
    flex:1;
    background-color: beige;
    border: 1px solid red;
  }
</style>
<div class="wrap">
          <div class="item">left</div>
          <div class="item">
            <div>center</div>
            <div>center</div>
          </div>
          <div class="item">
            right
          </div>
        </div>

table-cell布局

<style>
.wrap {
  display:table;
  width:100%;
}
.left,.center,.right {
  display:table-cell;
  background-color: aqua;
}
</style>
<div class="wrap">
  <div class="left">left</div>
  <div class="center">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="right">
    right
  </div>
</div>

内外边距距底部的正负值

.wrap {
  width:100%;
  overflow: hidden;
}
.left,.center,.right {
  float:left;
  width:33.3%;
  background-color: aqua;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
<div class="wrap">
  <div class="left">left</div>
  <div class="center">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="right">
    right
  </div>
</div>

grid布局参考参考文章

.wrap {
  display:grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-auto-flow: column;
  background-color: antiquewhite;
}
.item {
  background-color: aqua;
}
<div class="wrap">
  <div class="item">left</div>
  <div class="item">
    <div>center</div>
    <div>center</div>
    <div>center</div>
  </div>
  <div class="item">
    right
  </div>
</div>

3、如何实现高度自适应

flex

<div class="box">
  <header>头部</header>
  <main>
    <p>中间内容</p>
  </main>
  <footer>底部</footer>
</div>
<style>
.box {
  display:flex;
  flex-direction: column;
  height:100%;
}
header,footer {
  height:100px;
  background-color: red;
}
main {
  flex:1;
  height:100%;
 background-color: chocolate;
}
</style>

position: absolute

    <div class="box-wrap">
        <div class="box">
          <header>头部</header>
          <main>
            <p>中间内容</p>
            <p>中间内容</p>
          </main>
          <footer class="footer">底部</footer>
        </div>
    </div>
    <style>
        .box-wrap {
            height:100%;
        }
        .box {
          height:100%;
          position: relative;
        }
        header {
          width:100%;
          height:100px;
          position:absolute;
          top:0;
          background-color: red;
        }
        .footer {
          width:100%;
          height:100px;
          position:absolute;
          bottom:0;
          background-color: green;
        }
        main {
          width:100%;
          position: relative;
          top:100px;
          bottom: 100px;
          background-color: chocolate;
        }
    </style>

4、em、px、rem的区别

px是固定像素，无法适应页面大小而改变。
em和rem相比较px更灵活，是相对长度单位，长度不固定，更适用于响应式布局。
em是相对于父元素来设置字体大小的，而rem是相对于跟元素。场景应用（TODO）：[rem手机端布局] (caibaojian.com/rem-respons…)

5、css实现一个不知道宽高的div居中有哪些方式？

table

<style>
.parent {
  display:table-cell;
  text-align: center;
  vertical-align: middle;
  width:400px;
  height:400px;
}
.child {
  display: inline-block;
}
</style>
<div class="parent">
  <div class="child">
    文章中心
  </div>
</div>

transform

<style>
.parent {
  position: relative;
  width:400px;
  height:400px;
}
.child {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
</style>
<div class="parent">
  <div class="child">
    文章中心
  </div>
</div>

flex

<style>
.parent {
  display:flex;
  align-items: center;
  justify-content: center;
  height:400px;
}
</style>
<div class="parent">
  <div class="child">
    文章中心
  </div>
</div>

居中的思维导图借用别的作者

6、上下固定，中间滚动布局如何实现？

// 方法一 absolute
.header,.footer {
  position:absolute;
  width:100%;
  height:40px;
}
.header {
  top:0;
  left:0;
  background-color: antiquewhite;
}
.footer {
  bottom:0;
  left:0;
  background-color: red;
}
.content {
  width:100%;
  position:absolute;
  top: 40px;
  bottom: 40px;
  background-color: beige;
  overflow: auto;
}
// 方法二 flex
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .wrap {
            display: flex;
            height: 100%;
            flex-direction: column;
        }
        .header,.footer{
            height:40px;
            line-height:40px;
            text-align: center;
            background-color:cadetblue;
        }
        .main{
            flex:1;
            background-color:chocolate;
            overflow:auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="header">header</div>
        <div class="main">
            main
            <div style="height: 2000px;"></div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

7、动手实现左右固定100px,中间自适应的三列布局？

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3-items双飞翼布局</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            overflow: hidden;
        }
        .main {
            width: 100%;
            height: 100%;
            float: left;
        }
        .middle {
            margin: 0 100px;
            height: 100%;
            background: blueviolet;
        }
        .left {
            width: 100px;
            height: 100%;
            background: red;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 100px;
            height: 100%;
            background: red;
            float: left;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="middle"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            overflow: hidden;
						padding:0 100px;
        }
        .main {
            width: 100%;
            height: 100%;
            float: left;
						background:yellow;
        }
        
         .left {
					  position:relative;
					  left:-100px;
            width: 100px;
            height: 100%;
            background: red;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 100px;
            height: 100%;
            background: blue;
            float: left;
            margin-left: -100px;
						position:relative;
					  right:-100px;
        } 

	</style>
</head>
<body>
<div class="main">
main content main content main content main content
</div>	
<div class="left"></div>
<div class="right"></div>	
</body>
</html>

浮动布局

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
        html,
        body {
					width:100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .main {
            height: 100%;
            margin:0 100px;
						background:yellow;
        }
        
         .left {
            float: left;
            width: 100px;
            height: 100%;
            background: red;
        }
        .right {
            width: 100px;
            height: 100%;
            background: blue;
            float: right;
        } 

	</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>	
<div class="main">
main content main content main content main content
</div>	
</body>
</html>

position定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
        html,
        body {
					position:relative;
					width:100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .main {
            height: 100%;
            margin:0 100px;
						background:yellow;
        }
        
         .left {
					  position:absolute;
            width: 100px;
            height: 100%;
						top:0;
						left:0;
            background: red;
        }
        .right {
					  position:absolute;
            width: 100px;
            height: 100%;
						top:0;
						right:0;
            background: blue;
            
        } 

	</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>	
<div class="main">
main content main content main content main content
</div>	
</body>
</html>

flex布局

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
        html,
        body {
						display:flex;
						flex-direction:row;
					  width:100%;
            height: 100%;
            padding: 0;
            margin: 0;
						background:blue;
        }
         .left {
					  width:100px;
						height:100%;
						background:red;
        }
				 .main {
           flex:1;
					 height:100%;
					 	background:yellow;
        }
        .right {
					  width:100px;
						height:100%;
						background:brown;
        } 

	</style>
</head>
<body>
<div class="left"></div>
<div class="main">
main content main content main content main content
</div>	
<div class="right"></div>	
</body>
</html>

calc函数

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		
        html,
        body {
					  width:100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
         .left {
					  width:100px;
						height:100%;
						background:red;
						float:left;
        }
				 .main {
           width:calc(100%-200px);
					 float:float;
					 height:100%;
					 background:yellow;
        }
        .right {
					  width:100px;
						height:100%;
						background:brown;
						float:right;
        } 

	</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>	
<div class="main">
main content main content main content main content
</div>	
</body>
</html>

8、说一下rem布局的优缺点？

定位与浮动

1、BFC机制（block formating content 格式化上下文）

概念：可以看成一个独立的区域，里面的元素布局与外部元素不相干。
布局规则：
1)内部box一个接一个的放置
2)box垂直方向的间隔由margin决定，属于同一个的BFC的相邻box的margin会发生重叠。 3)计算BFC高度时，浮动元素也参与计算.(包含浮动的块)
4)BFC是一个独立区域，容器中的元素和外部元素互不影响
5)BFC区域不会与float box重叠（其区域不会和float元素重叠）。具体解释参考
触发条件：
满足任一条件就可以触发：
1）body根元素
2）浮动元素：float不为none
3）overflow不为visible
4）display为inline-block、table、table-cell、table-caption
5）position为absolute、fixed
应用：
1）清除浮动，看例子

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: red;float: left;"></div>
</div>
// 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度
//================分割线==========================
// 触发BFC
<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

2）解决垂直方向上margin合并，将其中一个元素嵌套在另一个容器中，并且将这个容器设置为BFC，这样两个元素就在不同的BFC中，margin则不会发生重叠。

<head>
div{
   width: 100px;
   height: 100px;
   background: red;
   margin: 100px;
}
</head>
<body>
   <div></div>
   <div></div>
</body>
//================分割线==========================
<div class="container">
   <p></p>
</div>
<div class="container">
   <p></p>
</div>
.container {
   overflow: hidden;
}
p {
   width: 100px;
   height: 100px;
   background: red;
   margin: 100px;
}

3）自适应两列布局：两列布局中，左侧元素设置浮动之后，右侧元素会和左侧元素发生重叠

<div style="height: 100px;width: 100px;float: left;background: red">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 的元素</div>
//================分割线==========================
<div style="height: 100px;width: 100px;float: left;background: red">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;overflow:hidden">我是一个没有设置浮动, 
也没有触发 BFC 的元素</div>

2、 css中高度塌陷产生的原因以及解决高度塌陷的方案？

原因：默认情况下父元素是包着子元素的，如果父没有设置高度，子元素的高度会撑起父元素的高度，但是当自元素设置为浮动，子元素就会脱离文档流，子元素就撑不起父元素，出现高度坍塌。
解决方案：BFC方案、clear 属性清除浮动两种方案。
具体方法：
1.BFC方案，在父元素上添加 overflow：hidden；
2.clear方案，在父元素的最后，添加空白的div，对该空白的div进行清除浮动的操作。
3.另一种clear方案，通过after伪类向元素的最后添加空白的块元素，然后对其清除浮动。
参考

     .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }

其他相关问题：
clear 属性清除浮动的原理是什么？参考

3、居中为什么使用transform，不使用marginLeft/marginTop、top或者left?

4、css3中position:sticky?

应用

1、用纯css3实现一个三角形？

  .test {
    width:0;
    height:0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent transparent red;
 }

2、css如何实现一个半圆

// 全圆
.semi-circle {
  width:100px;
  height:100px;
  background-color: red;
  border-radius: 50%;
}
// 上半圆
.semi-circle {
  width:100px;
  height:50px;
  background-color: red;
  border-radius:50px 50px 0 0 ;
}
// 左半圆
.semi-circle {
  width:50px;
  height:100px;
  background-color: red;
  border-radius:50px 0 0 50px ;
}

3、实现宽高自适应的正方形？

// 方法一
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
// 方法二
.square {
  width: 10vw;
  height: 10vw;
  background: tomato;
}
// 方法三
.square {
  width: 20%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

4、css画出一个扇形？

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

5、0.5px的线？

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .container::after {
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5); 
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
     }
}

未完待续...

css相关的面试题