搜狗：
1、触发BFC的方法：
1）float的值不为none。
2）overflow的值不为visible。
3）position的值不为static或releative中的任何一个。
4）display的值为table-cell、table-caption和inline-block之一。
2、css选择器
p:first-child：p标签的父元素的首个子p元素。
p~ul：选择前面有 <p> 元素的每个 <ul> 元素。
div+p：选择紧接在 <div> 元素之后的<p> 元素。
p:first-of-type：选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
3、padding-top:50%的含义
定义基于父元素宽度的百分比上内边距。
4、常见的块级元素：p标签
常见的行内元素：span标签
5、ul子元素不允许放置除除li外的任何元素
6、CSS3 box-sizing属性
content-box:默认属性，宽度和高度不包括 内边距和边框。
border-box:宽度和高度包括内边距和边框。
inherit:从父元素继承box-sizing属性。
7、promise用法
8、let命令和const命令
let命令
1）let用法类似var，用于声明变量。但是所声明的变量只在let命令所在的代码块内有效。
2）不存在变量提升，所以变量一定要在声明后使用，否则报错。
3）暂时性死区。只要块级作用域内存在let命令，它所声明的变量就“绑定”在这个区域，不再受外部的影响。比如 ：
var a = 1;
if(true){
a = 2; //报错
let a;
}
上面的代码中存在全局变量a，但是块级作用域中let又声明了一个局部变量a，导致后者绑定这个块级作用域，所以在let声明变量前，对a赋值会报错。
4）不允许重复声明。let不允许在相同的作用域内声明同一变量。
function( ){
let a = 1;
var a =2;
} //报错
const命令
1）const用来声明常量。一旦声明其值不能改变。这就意味着const一旦声明常量，就必须初始化，不能留到以后赋值。
2）与let命令相同，只在声明所在的块级作用域内有效。
3）const命令声明的变量也不提升，同样存在暂时性死区，只能在声明后使用。同样不可重复声明变量。
4）对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const命令只是指向的地址不变，并不保证改地址的数据不变，所以将一个地址声明为变量需要非常小心。
const foo = {}；
foo.prop = 123;
foo= { }; // 报错
上面的代码，常量foo存储的是一个地址，指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加属性。如果想使对象不可变，可以将对象冻结，使用object.freeze方法。
5）跨模块常量的写法。
//constants.js模块
export const A = 1;
export const B = 2;
export const C = 3;
//text1.js模块
import * as constants from './constants';
console.log(constants.A ); // 1
console.log(constants.B ); // 2
//text2.js模块
import {A, B} from './constants';
console.log(constants.A ); // 1
console.log(constants.B ); // 2
参考文献：ES6学习笔记--let和const命令
7、reflow和repaint
reflow：对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置。
repaint：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了。
引起Repain和Reflow的一些操作:
1）增加、删除、修改 DOM 结点
2）移动 DOM 的位置，或动画
3）修改 CSS 样式
（例如：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化）
4） Resize 窗口（移动端没有这个问题），或滚动窗口
5）修改网页的默认字体
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。
优化方法：
1）不要一条一条地修改 DOM 的样式。可以预先定义好 css 的 class，然后修改 DOM 的 className。
2）把 DOM 离线后修改。
3）不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4）尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。
5）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。
6）尽量不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
参考文献:[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)
8、下图实现方法
.div{
width:10px;
height:0px;
border:10px solid red;
border-right:10px solid yellow;
}
<div class="div"></div>
9、移除display:inline-block水平空隙的方法
问题描述：
1）真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距；
2）使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
问题原因：
标签段之间存在空格或换行
解决：
1）移除标签段之间的空格
方式1：
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>
方式2：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
方式3：借助HTML注释。
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>
2）使用margin负值
.space a {
display: inline-block;
margin-right: -3px;
}
3）让闭合标签吃胶囊
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>
4）使用font-size:0
.space {
font-size: 0;
-webkit-text-size-adjust:none;//Chrome兼容性处理，Chrome默认有最小字体大小限制。
}
.space a {
font-size: 12px;
}
5）使用letter-spacing(Opera下存在兼容性问题：最小间距1像素)
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
6）使用word-spacing
.space {
display: inline-table;//解决chrome兼容性问题
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
参考文献：去除inline-block元素间间距的N种方法
10、左图右文排版
<div>
<div id="left">图片</div>
<div id="right">文字</div>
</div>
要求：左边固定宽，右边自适应。
参考文献：
CSS面试题(一)
11、单行、多行文本溢出省略号
单行文本溢出省略号：
.div{
border:1px solid black;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
<div class="div">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。</div>
text-overflow:当文本溢出包含元素时发生的事情。
text-overflow:ellipsis.显示省略号来代表被修改的文本。
white-space:这个属性声明建立布局过程中如何处理元素中的空白符。
white-space:nowrap:文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
多行文本溢出省略号：
.div{
border:1px solid black;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
<div class="div">-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。</div>
Paste_Image.png
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
12、html如下面所示，编写CSS实现下面效果。
<div class="ul-container">
<ul>
<li>你好</li>
<li>同学</li>
<li>搜狐</li>
<li>公司</li>
<li>欢迎</li>
<li>你的</li>
<li>到来</li>
</ul>
</div>
每排有3个，第3个和最后一排没有右边的间隔线。
.ul-container{
width:304px;/*这里宽度=3个li标签的宽度+2个间隔线的宽度*/
}
/*div最后要清除浮动否则父元素包不住ul和li*/
.ul-container:after{
content:'';
display:block;clear:both;
}
/*清除ul和li的原始格式*/
ul,li{
list-style-type:none;
margin:0px;
padding:0px;
}
li{
float:left;
border-right:2px solid gray;
width:100px;
height:40px;
line-height:40px;
text-align:center;
margin-bottom:10px;
}
li:nth-of-type(3n+3){
border-right:0px;
}
li:nth-last-of-type(1){
border-right:0px;
}
网友评论