link 与 @import 的区别
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" >
<style type="text/css" >
@import url("./myCss.css");
</style>
</head>
</html>
1. link是html标签，@import 是css标签。
2. 并且link的还有rel,rev属性，不仅可以加载css文件还可以定义连接属性。@impot只有导入样式表的作用。
3. link是和html页面一起加载的，而@import是等页面加载好以后加载的。
4. link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式 短暂失效)
介绍下 BFC 及其应用
BFC(Block Formatting Context)块级格式上下文。css渲染定位的一个概念。
包含在父元素中的元素按道理是不能影响父元素旁边的元素，但是并不总是会这样。所以就有了BFC，BFC的目的是为了形成一个完全独立的空间，让空间中的子元素不会影响外部的布局。
触发BFC的条件：
float不为none
position不为relative 和 static
overflow为flow auto 和 hidden
display的值为table-cell和inline-block
应用：
1.父元素坍陷，清楚浮动。（子元素设为浮动，超出了父元素的高度）
BFC解决：1. overflow: hidden 2. display: table-cell; 3.display: block 4. postion: absolute 5.position: fixed （父级元素）
父元素触发了BFC ,所以子元素就不能影响外部的元素，所以子元素必须再父元素内部
其他解决方案: 1. 让父元素也浮动起来 （可能会影响后面的布局） 2. 给父元素添加固定高度。3. 在浮动的子元素后面加一个空元素，设置clear: both来清楚浮动 （增加无意义标签）
2.解决自适应布局（两栏布局）
BFC解决
3. 解决两个块级元素margin-top的问题
怎么让一个 div 水平垂直居中
1. 父级元素为flex布局 然后将子元素居中就行justify-content: center;align-items: center;
<div class="parents"
style="border: 1px solid red; height: 50px;display: flex;justify-content: center;align-items: center;"
> <div class="child">你好</div> </div>
2.父元素为 position：relative然后让子元素设置为absolute，然后让子元素的高度位移到父元素的一半，top=50% 然后让子元素想上位移自己高度的一半，transform；translate(0,-50%),同理水平方向也是如此left=50%,transform；translate(-50%,-50%)
<div style="border: 1px solid red; height: 50px;position: relative;"> <div style="position: absolute;top: 50%;transform: translate(-50%,-50%);left: 50%;">你好</div> <!-- 垂直方向上相当于父级元素向下移动50%，然后相对于本身的高度移动百分之50 水平方向上同理--> </div>
3.父元素为 display为flex布局 子元素相对父元素margin水平和垂直居中
<div style="border: 1px solid red; height: 50px;display: flex;"> <div style="margin: auto;">你好</div> </div>
4.父元素display为grid布局 子元素justify-self和align-self为center
<div style="border: 1px solid red; height: 50px;display:grid;"> <div style="justify-self: center;align-self: center;">你好</div> </div>
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
三者都是让节点无法显示出来。其中opacity和visibility 只是不可见，但是还是会在渲染树中，还是会占据空间影响布局，display只会在DOM中出现，不会在渲染树中出现。display,opacity 是会影响子元素，如果父元素的opacity 为0或者display:none，不管其子元素为什么都不会显示出来，如果父元素是visibility:none,子元素的visibility:visible,则子元素会显示出来。然后display会引起回流和重绘，opacity和visibility则只会引起重绘，更好一点。
已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。
<img src="1.jpg" style="width:480px!important;”>
1. max-width = 300px;
2. width:300px!important;
3.transform:scale(0.625,1) //480*0.625=300px
如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
单行：overflow:hidden text-overflow:ell...;white-space: nowrap;多行：div{width: 300px;position: relative;line-height: 1.4em;height: 4.2em;overflow: hidden;}div::after{content: "...";position: absolute;right: 0;bottom: 0;}
你能描述⼀下渐进增强和优雅降级之间的不同吗
渐进增强和优雅降级主要是css3出现以后，才出来的概念，主要是因为低级浏览器不能使用css3,但是css3有特别好用有不愿意放弃。所以才有了渐进增强和优雅降级这个概念。
渐进增强是指一开始针对低浏览器开发，满足最基本更能，再为了高等级的浏览器不断增强功能和样式。向上兼容。开发周期长资金消耗多。
优雅降级是指一开始针对高级浏览器开发，把功能和页面开发成最好的状态。然后再去测试低版本的浏览器，修改成低版本也能用的。向下兼容。
css sprite是什么,有什么优缺点（雪碧图）
雪碧图就是把几张图片放到一张图片上，通过 background-position 和元素尺⼨调节需 要显示的背景图案。这样能优化图片的加载,减少http请求次数（减少三次握手四次挥手的次数）。但是如果图片要修改起来很麻烦，合并的时候也挺麻烦的。
display有哪些值？说明他们的作⽤
block 转换成块状元素。
inline 转换成⾏内元素。
none 设置元素不可⻅。
inline-block 象⾏内元素⼀样显示，但其内容象块类型元素⼀样显示。
list-item 象块类型元素⼀样显示，并添加样式列表标记
table 此元素会作为块级表格来显示
inherit 规定应该从⽗元素继承 display 属性的值
PNG\GIF\JPG\SVG的区别及如何选
图片分为：位图和矢量图。位图是由一个个发光的像素点组成的，每个像素点由二进制数据来描述，一般是png gif jpg,占用内存较大。矢量图是由点线面组成的，内存较小，一般svg。
PNG: 是无损压缩（压缩的时候像素点都不会消失），占用内存较大，放大以后也会比较清晰。一般用来做小的logo
JPG: 是有损压缩（压缩的时候很多不是很重要的像素点都会给它去掉，下载速度较快），占用内存较小，图片放大以后，会比较模糊。
GIF： 支持动图
SVG:内存比较小 ，不失真，兼容性好 因为是代码来写的SVG图片学习成本高，渲染消耗性能。用途：阿里巴巴矢量图标
animation和transition和transform的区别
transiform:将元素放大缩小旋转移动
transition:元素过度的效果
animation:用来定义多个中间态的一系列的动画过渡效果
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性， 而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
画三角形和画圆形
三角形:用border-right /left/top/bottom来画。
圆形：用border-radius来画
css中单位px和em和rem有什么区别？
三者都是相对长度。
px是相对屏幕分辨率。
em是相对于当前对象内文本的字体尺寸。一般默认是1em=16px.
rem是相对于根元素的的字体大小，很适合全体字体大小的改变。
为什么css放在顶部而js写在后面
因为js渲染使用到了两条线程，一条是js引擎线程一条是js渲染线程，js是单线程操作的，两条线程一起运作会相互通信，增加性能，js放在顶部可以先让渲染线程先操作，加载DOM,如果js放在css前面可能会阻塞DOM的加载，导致首屏白屏。
三栏布局
第一种是绝对定位的方法：左右两边使用绝对定位absolute,分别设置right和left为0。
<body> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div></body><style>body,html{ height:100%; padding: 0px; margin:0px;}/* //左右绝对定位 */.left,.right{ position: absolute; top:0px; background: red; height:100%;}.left{ left:0; width:100px;}.right{ right:0px; width:200px;}/* //中间使用margin空出左右元素所占据的空间 */.main{ margin:0px 200px 0px 100px; height:100%; background: blue;}</style>
第二种是浮动的方法：左边的往左边浮动，右边的往右边浮动，中间的因为会被左边的盖住，所以要空出左边的宽度来
<body> <div class="left">Left</div> <div class="right">Right</div> <div class="main">Main</div> </body><style> *{ margin: 0; padding: 0; } .left{ background: red; width:100px; height: 100px; float: left; } .right{ background: blue; width:100px; height: 100px; float: right; } .main{ background: yellowgreen; /* width:100%; */ height: 100px; margin: 0 100px; }</style>
第三种是：圣杯布局，先让三这一起往左浮动，中间先margin一下，空出左右两边的位置，然后让左边的相对中间的向左移动100%，在相对本身向左移动，右边的marginright一下就可以了。
<body> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right</div> <style>body,html{ height:100%; padding: 0; margin: 0}/* //父元素body空出左右栏位 */body { padding-left: 100px; padding-right: 200px;}/* //左边元素更改 */.left { background: yellowgreen; width: 100px; height: 100px; float: left; margin-left: -100%; position: relative; left: -100px;}/* //中间部分 */.main { background: blue; width: 100%; height: 100px; float: left;}/* //右边元素定义 */.right { background: red; width: 200px; height: 100px; float: left; /* margin-left: -200px; position: relative; right: -200px; */ margin-right: -200px;}
第四种双飞翼布局
<body> <div class="middle"> <div class="inner-middle"></div> </div> <div class="left"></div> <div class="right"></div> <style> .middle { width: 100%; float: left; background: green; } .inner-middle{ /* width:100%; */ margin: 0 100px; height: 80px; } .left { width: 100px; float: left; height: 80px; margin-left: -100%; background: yellow; } .right { width: 100px; float: left; height: 80px; margin-left: -100px; background: pink } </style></body>
<body> <div class="middle"> <div class="inner-middle"></div> </div> <div class="left"></div> <div class="right"></div> <style> .middle { width: 100%; float: left; background: green; } .inner-middle{ /* width:100%; */ margin: 0 100px; height: 80px; } .left { width: 100px; float: left; height: 80px; margin-left: -100%; background: yellow; } .right { width: 100px; float: left; height: 80px; margin-left: -100px; background: pink } </style></body>
<body> <div class="middle"> <div class="inner-middle"></div> </div> <div class="left"></div> <div class="right"></div> <style> .middle { width: 100%; float: left; background: green; } .inner-middle{ /* width:100%; */ margin: 0 100px; height: 80px; } .left { width: 100px; float: left; height: 80px; margin-left: -100%; background: yellow; } .right { width: 100px; float: left; height: 80px; margin-left: -100px; background: pink } </style></body>
盒模型
盒模型
盒模型
主要分为两种 W3C盒模型 和 IE盒模型。
两者的区别主要是width 和 height的区别。
W3C的盒模型的高度等于 height + pad + mar + border
IE的盒模型的高度等于 height +mar
意思就是IE的盒模型的高度计算中 height包括了 pad 和 border
w3c的兼容性更好，所以建议使用w3c盒模型。
可以通过语法来控制盒模型：
w3c:box-sizing: content-box
IE: box-sizing:border-box
行内元素和块级元素
从HTML标签来讲，标签分为容器标签和文本标签。
文本标签：p h1... span 等
容器标签：div li ul 等
行内元素：除P标签以外的文本标签。（宽高）
块级元素：所有的容器标签。加上p标签
我们可以通过display为inline 和block来将块级元素转化为行内元素，将行内元素转化为块级元素。
Flex
www.ruanyifeng.com/blog/2015/0…
flex布局又叫弹性布局，一个容器设置了弹性布局，那么它的float和clear属性都会无效。
元素被设置成flex布局的。
用flex布局实现九宫格。
首先父容器flex-wrap:wrap，即宽度不够时换行，然后设置主轴和交叉轴上都居中，justify-content和align-item为center。然后在子容器上设置按行排列，flex-direction: column。
