1. 介绍一下 CSS 的盒子模型？
1. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2. 类型： IE 盒子模型、标准 W3C 盒子模型；
3. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)
4. 而IE盒模型的宽高是指content+padding+border。
5. 设置盒模型的方式是：设置box-sizing
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型
6. 盒子模型的定位
网页默认的布局方式
浮动
Position定位
2. css 选择器优先级？
!important > 行内样式（比重1000）> ID 选择器（比重100） >
类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性
3. 垂直居中几种方式？
1. 单行文本: 设置 line-height 等于 height
2. 图片: vertical-align: middle;
3. position：absolute; top:50%; transform:translateY(-50%)
4. display:flex; align-items: center
4. 水平居中几种方式？
1. 行内元素: text-align: center
2. 块级元素: margin: 0 auto
3. position: absolute; left:50%; transform:translateX(-50%)
4. display: flex; justify-content: center
左右布局
父容器：display: flex;
右边容器：flex: 1;
5. position 的值， relative 和 absolute 分别是相对于谁进行定位的？
relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static:默认值，没有定位，元素出现在正常的文档流中。
sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
5.0 弹性布局 https://www.runoob.com/w3cnote/flex-grammar.html
一. flex-direction属性
flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
二、flex-wrap 属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap 属性定义，
如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
三、 flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
四、 justify-content 属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
五、align-items 属性
align-items 属性定义项目在垂直方向上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
六、align-content 属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between |
space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
七、 flex-shrink 属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
6. 简明说一下 CSS link 与 @import 的区别和用法？
1. link 是 XHTML 标签，除了加载CSS外，还可以定义 RSS 等其他事务；
@import 属于 CSS 范畴，只能加载 CSS。
2. link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
3. link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4. link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。
7. rgba 和 opacity 的透明效果有什么不同
opacity 会继承父元素的 opacity 属性，而 RGBA 设置的元素的后代元素不会继承不透明属性。
8. display: none 和 visibility: hidden 的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就
当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
8-1. 隐藏一个 button 的方法（2种） 写出一个 button 的按钮（2种）
1、隐藏
display: none;
visibility：hidden；
2、html
<input type = button>
<button>这是一个按钮 </button>
9. 常见兼容性问题？
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
10. 1rem、1em、1vh、1px各自代表的含义？
1. rem
rem 是全部的长度都相对于根元素 <html> 元素。通常做法是给 html 元素设置一个字体大小，
然后其他元素的长度单位就为 rem。
<div id="app">
<div id="son></div>
</div>
html{ font-size:20px;}
#app{
width :4rem; ===>4*20=80px
}
#son {
width :2rem; ===>2*20 =40px
}
2. em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
<div id="app">
<div id="son></div>
</div>
#app{
font-size:10px;
}
#son{
font-size:1em; ==>1*10=10px
}
3. vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度
和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
h1{font-size:8vw;}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
4. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
11. 画一条 0.5px 的直线？
// scale 缩放
height: 1px;
transform: scale(0.5);
12. 画一个三角形？
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>
13. 清除浮动的三种方式及其原理
一. 浮动元素的特性
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
二. 浮动元素带来的问题
因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素
自身的高度塌陷（失去浮动元素占据的高度）。
三. 清除浮动的三种方式
1. 使用空标签清除浮动 clear: both。
原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度
优点：通俗易懂，容易掌握
缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
2. 父级 div 定义 overflow: hidden
原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器
会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用 position 或对 overflow: hidden 理解比较深的朋友使用
3. 父级div定义伪类:after 和 zoom (用于非IE浏览器)
原理：IE8 以上和非IE浏览器才支持 :after，原理和方法 1 有点类似，zoom
( IE 转有属性)可解决 ie6, ie7 浮动问题
优点：浏览器支持好，不容易出现怪问题
（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少 CSS 代码
<div class="div1 clearfloat"></>
/*清除浮动代码*/
.clearfloat: after{ display: block; clear: both; content: ""; visibility: hidden;
height: 0 }
.clearfloat{ zoom: 1 }
4、父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题
14. css3 的新特性
1、@font-face 加载字体样式，
2、文字渲染，text-decoration, text-fill-color: 文字内部填充颜色，
text-stroke-color: 文字边框填充颜色，text-stroke-width: 文字边界宽度。
3、css3的多列布局 Column-count：表示布局几列。
Column-rule：表示列与列之间的间隔条的样式 Column-gap：表示列于列之间的间隔
4、边框圆角的布局。border-radius: 50px;
5、css3 的渐变效果， （ gradient ）
6、 css3 的阴影效果图 （ shadow 反射和 reflect 反射效果）
7、css3 的多背景图片
8、css3 的动画效果 animation
15. 行内元素有哪些？块级元素与那些？
块级元素：div / p / form / ul / li / ol / hr / fieldset / table / dd / dt / dl
行内元素：span / strong / a / b / em / img / input / lable / small / sub
16. 请简述web开发中的兼容问题
1、浏览器默认的内外边距不一样，所以用通用选择器 * 设置 margin 和 padding 来设置。
2、块标签设置浮动后，有设置 margin 的情况下，在 ie6 下的 margin 比别的浏览器大。
3、img 标签会有默认的间距，需要用浮动去设置
4、火狐浏览器中的点击事件和滚动事件需要加（event）来兼容
5、div 里的内容，ie 默认为居中，firefox 默认为左对齐，需要用 margin: 0px auto 来调节
6、css3 的动画效果不兼容 ie8 以下。需要使用 js 去写动画。
7、ie6的双倍边距，比如设置了 margin: 10px, ie6 中默认为 20px，需要使用 display: inline,block.
17. 中间定宽，两边自适应布局的三种实现方法
- 浮动加定位
<body>
<div class="parent">
<div class="left">
<div class="item"></div>
</div>
<div class="right">
<div class="item"></div>
</div>
<div class="center">
<div class="item"></div>
</div>
</div>
</body>
<style type="text/css">
html,body,div{
height: 100%;
}
.parent{
position: relative;
overflow: hidden;
}
.left{
float: left;
width: 50%;
margin-left: -150px;
background-color: red;
}
.right{
float: right;
width: 50%;
margin-right: -150px;
background-color: yellow;
}
.center{
position: absolute;
left:50%;
transform:translateX(-50%);
width: 300px;
background-color: green;
}
.left .item{
margin-left: 150px;
}
.right .item{
margin-right: 150px;
}
</style>
- calc计算法
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
<style type="text/css">
html,body,div{
height: 100%;
}
.left{
width: calc(50% - 150px);
float: left;
background-color: red;
}
.right{
width: calc(50% - 150px);
float: right;
background-color: yellow;
}
.center{
width: 300px;
float: left;
background-color: green;
}
/*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
</style>
- 弹性盒子法
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
<style type="text/css">
html,body,div{
height: 100%;
}
.parent{
display: flex;
}
.left{
flex:1;
background-color: red;
}
.right{
flex:1;
background-color: yellow;
}
.center{
width: 300px;
background-color: green;
}
</style>
利用 flex: 1; 确实实现了三个不同内容的 div 平分空间
那么 ** flex: 1; === flex: 1 1 auto; 吗？**
第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为
auto, 即项目本身的大小
