1、实现一个div在不同分辨率下的水平垂直居中
方法1：table-cell
<div class="box box1">
<span>垂直居中</span>
</div>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2：display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
方法3：绝对定位和负边距
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
方法4：绝对定位和0
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法5：translate
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
方法6：display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
方法7：display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
2、左右固定，中间自适应样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、阐述清楚浮动的几种方式（常见问题）
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示
2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
4、解释css sprites ，如何使用？
1、什么是精灵图
将一些小图标放在一张图上
2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗
3、精灵图的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一个数是x轴， 第二个数是y轴
5、box-sizing常用的属性有哪些？分别有什么作用？
（1）content-box
宽高是元素本身的宽高 不包含border+padding
（2）border-box
元素的宽高已经包含了border+padding
（3）inherit
从父元素继承box-sizing属性
6、CSS样式覆盖规则
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
7、请简要描述margin重合问题，及解决方式
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin
解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block
8、对标签有什么理解
1、meta是html文档头部的一个标签，这个标签对用户不可见，是给搜索引擎看的。
2、meta标签属性用法分成两大类
3、<meta charset="UTF-8"> 使用的编码格式，大部分是utf-8
9、display none visibility hidden区别？
10、重绘和回流（哪些情况重绘，哪些回流）
11、说说你对语义化的理解？
12、为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
13、移动端适配1px问题
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
14、居中为什么要使用transform（为什么不使用marginLeft/Top）
transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些
top/left属于布局属性，会引起页面layout回流和repaint重绘。
15、介绍css3中position:sticky
<div class="div1">
元素一
</div>
<div class="div2">
元素二
</div>
.div1 {
width: 100%;
height: 50px;
background-color: yellow;
position: sticky;
top: 0;
}
.div2 {
width: 100%;
height: 1500px;
background-color: pink;
}
设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），
当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
16、上下固定，中间滚动布局如何实现
<div class="father">
<div class="top">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
.father {
display: flex;
flex-direction: column;
height: 100vh;
}
.header,
.footer {
width: 100%;
height: 100px;
}
.main {
width: 100%;
flex: 1;
overflow: auto;
}
17、css实现border渐变
从上到下的线性渐变（默认情况下）：background-image: linear-gradient(#e66465, #9198e5);
从左到右的线性渐变：background-image: linear-gradient(to right, red , yellow);
从左上角到右下角的线性渐变：background-image: linear-gradient(to bottom right, red, yellow);
带有多个颜色节点的从上到下的线性渐变：background-image: linear-gradient(red, yellow, green);
从左到右的线性渐变，带有透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
一个重复的线性渐变： background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
颜色节点均匀分布的径向渐变：background-image: radial-gradient(red, yellow, green);
18、纯css实现一个高宽比为1：3的盒子 列举几种方式
方法1：使用vh视窗单位；屏幕百分比
方法2：使用padding内边距显示内容
<p class="father">
<img src="./p1.png">
</p>
.father {
width: 100px;
height: 0; /* 设置高为0 */
padding-bottom: 50px;
overflow: hidden;
border: 1px solid red;
}
img {
width: 100%;
}
方法3：使用calc计算属性
div {
width: 100px;
height: calc(100px * 2 / 3); /* 设置高为0,使用padding内边距显示内容 */
border: 1px solid red;
}
方法4：使用伪元素::before或者::after，使其变成块元素,再配合padding或者calc计算宽高比
div::after {
content: "";
display: block;
width: 100px;
/* padding-bottom: 50px; */
height: calc(100px /2);
border: 1px solid red;
}
19、 css实现一个旋转的圆
transform:rotate(7deg);属性
20、BFC，IFC，FFC的区别
BFC:块级格式化上下文
1. 内部的盒子会在垂直方向，一个个地放置；
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4. BFC的区域不会与float重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6. 计算BFC的高度时，浮动元素也参与计算。
哪些元素会产生BFC
* 根元素；
* float的属性不为none；
* position为absolute或fixed；
* display为inline-block，table-cell，table-caption，flex；
* overflow不为visible
IFC:内联格式上下文
框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
GFC（GrideLayout formatting contexts）：网格布局格式化上下文
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制
FFC（Flex formatting contexts）:自适应格式上下文
display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局
21、css3有哪些新特性
CSS3有哪些新特性？
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;
转换
旋转 transform: rotate（20deg）；
倾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
缩放 transform: scale（。5）；
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
22、CSS3新增伪类有那些？
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> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
23、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
在标准盒模型中，元素宽度 = width + padding + border + margin。
怪异(IE)盒模型中，元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
24、display:inline-block 什么时候不会显示间隙？
原因：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，
根据white-space的处理方式（默认是normal，合并多余空白），
原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决方案：
* 将子元素放置在同一行
* 为父元素中设置font-size: 0，在子元素上重置正确的font-size
* 为inline-block元素添加样式float:left
* 设置子元素margin值为负数
* 设置父元素，display:table和word-spacing
25、行内元素float:left后是否变为块级元素？
行内块级元素，
设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%，行内元素默认100%宽度占据一行
这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
26、在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数字号相对更容易和 web 设计的其他部分构成比例关系
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵
27、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
单冒号（：）用于css3的伪类
双冒号（：：）用于css3的伪元素
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。
并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。
起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
28、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
29、CSS3动画（简单动画的实现，如旋转等）
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
30、base64的原理及优缺点
优点可以加密，减少了 HTTTP 请求
缺点是需要消耗 CPU 进⾏编解码
31、流体布局、圣杯布局、双飞翼布局
流式布局:
* 百分比布局，同时搭配 max-width、min-width使用，解决屏幕差异化
* 缺点：页面元素宽度是百分比，但是页面的字体等元素大小是固定的px，导致屏幕如果过大的话，
虽然元素被拉伸边长了，但是字体没有变大，导致页面显示非常不协调。
圣杯布局： 两侧宽度固定，中间宽度自适应的“三栏布局“
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
container包裹中，先展示center，再让left和right的float显示
双飞翼布局：两侧宽度固定，中间宽度自适应的“三栏布局”
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
* 和圣杯布局不同的是，container 容器只是包裹 center 元素，且 container 容器进行浮动
* left 和 right 都在 container 容器外部浮动
flex实现 三栏布局：他们其实都是差不多的
32、stylus/sass/less区别
都是CSS 预处理器技术
Less 使用 .less 扩展名
Sass 使用.scss 扩展名
Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名
Sass 同时也支持老的语法，就是不包含花括号和分号的方式, 缩进式写法：
变量的定义：
Less css中变量都是用@开头的
sass变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的
stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在stylus中不能用@开头
嵌套：
CSS中相同的 parent 引用多个元素
sass，Less，stylus都支持多层嵌套
运算符：
sass，Less，stylus都支持运算
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
颜色函数：
sass的颜色处理函数：
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
Less css颜色处理函数：
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus颜色处理函数：
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
导入 (Import)，预处理css的导入最后都会生成一个css文件
@ import "1.css";
@ import "file.{type}";
继承：
sass可通过@extend来实现， Less 表现的稍微弱一些，更像是混入写法：
sass如下：
.success {
@extend .message;
border-color: green;
}
less如下：
.success {
.message;
border-color: green;
}
Mixins（混入）：：：
Sass 的混入语法：
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); //这里调用默认 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@ include error(5px); //这里调用 border:5px solid #F00;
}
Less CSS 的混入语法：
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); //这里调用默认 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); //这里调用 border:5px solid #F00;
}
.Stylus 的混入语法：
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
在sass中，还支持条件语句：
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
for循环有两种形式：
1.@for $var from <start> through <end>
2.@for $var from <start> to <end>。
同时支持each命令，作用与for类似：
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
33、postcss的作用
它可以被理解为一个平台，可以让一些插件在上面跑
它提供了一个解析器，可以将CSS解析成抽象语法树
通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer
npm install -g postcss-cli //全局安装postcss
npm install -g autoprefixer //全局安装autoprefixer
autoprefixer 插件会帮我们做好兼容处理
34、垂直塌陷及解决方法
.parent {
margin-top: 200px;
width: 200px;
height: 200px;
background: red;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background: black;
}
parant的margintop=200px,正常效果，但是child的margintop=50px却没有给到我们预期的效果
border，给parent加上border，就是说child有了顶部的参考了，所以他的margintop就起效
35、粘性定位通常在什么场景下使用，使用方法，使用条件？
* 场景：场景自定义，我通常用在header，很好用
* 使用方法：设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
* 使用条件：
1. 父元素不能overflow:hidden或者overflow:auto属性。
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度
4. sticky元素仅在其父元素内生效
36、css有哪些内置函数？举两个具体用法？
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()
