css面试题

盒模型

常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css3 新特性

常问：

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子阴影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制

css选择器及优先级

!important
内联样式
ID选择器
类选择器属性选择器伪类选择器
元素选择器关系选择器伪元素选择器
通配选择器
1，class选择符：10，id选择符：100，内联样式权值最大，为1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
CSS选择器有哪些？哪些属性可以继承？

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)
子选择器（ul > li）、
后代选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）

可继承的属性：

font-size,
font-family,
color

不可继承的样式：

border,
padding,
margin,
width,
height

BFC

BFC是块级格式化上下文。

计算BFC高度时，浮动元素也会参与计算、
在BFC这个元素垂直方向的边距会发生重叠
BFC的区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容器，其里外的元素不会互相影响
BFC应用:
防止margin重叠
清除内部浮动
自适应两栏布局
防止字体环绕

BFC的生成条件：

根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixed

弹性盒

display:flex;
align-items:center;
justify-conter:center;

图片整合技术的优势

减少对服务器的请求次数
减少图片体积，提高加载速度
元素垂直水平居中
不需要知道宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

需要知道宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

元素水平居中

margin:0 auto;

css定位方式

position：static;//默认定位
position：relative;//相对定位 （参照物是自身,不脱离文档流）
position:absolute;//绝对定位 （参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素进行定位。）
position:fixed;//固定定位 （参照物是可视区窗口，脱离文档流）相对于浏览器窗口进行定位。
position:sticky;//

display：none和visibility：hidden区别？

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生重排和重绘
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生重绘，但不可触发绑定事件

rem和em的区别

总而言之，就是浏览器把谁转化成“px”
rem 依据的是html的font-size值。1rem=16px
em 依据的是父元素的font-size值。

清除浮动

方法一:clear:both

clear:both;

方法二:万能清除浮动

    .clean{
        content:'.';
        height:0;
        display:block;
        clear:both;
        overflow:hiddden;
        visibility:hidden;
    }

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

inline默认。此元素会被显示为内联元素，元素前后没有换行符。

block此元素将显示为块级元素，此元素前后会带有换行符。

none此元素不会被显示（隐藏）。

inline-block行内块元素。（CSS2.1 新增的值）

list-item此元素会作为列表显示。

table此元素会作为块级表格来显示（类似table），表格前后带有换行符

为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

移动端1像素问题

一般来说，在pc端浏览器中，设备像素比dpr等于1,1个css像素就等于1个物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1个css像素不在等于一个物理像素，因此在实际设计稿中粗不少。

伪元素+scale

.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

border-image

div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

做移动端开发有没有遇到不兼容的问题?如何解决？(https://yq.aliyun.com/articles/587092)

1.使用背景图来代替img标签

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

防止手机中网页放大和缩小
设置meta标签中的viewport;
```
 
```
浮动子元素撑开父元素盒子高度
解决方法如下：
1.父元素设置为 overflow: hidden;
2.父元素设置为 display: inline-block;等
如何解决移动端滚动条卡顿问题？
安卓或者ios
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 */
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

link 与 @import 的区别

a.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
b.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
c.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
d.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

常见的布局方式

圣杯布局

body{
min-width: 550px;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
}
#center{
width: 100%;
}
#left{
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right{
width: 150px;
margin-right: -150px;
}


    center
    left
    right

双飞翼布局

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}


    center

left
right