前端面试之http协议和html，css篇

css画一条0.5px的线
1.设置视口viewport。缩放
2.transform：scale（0.5,0.5）

网络七层协议
应用层，表现层，会话层，传输层，网络层，数据链路层，物理层

实现一个两列等高布局
1.纯css实现
外面的wrap元素设置overflow：hidden
左边的元素设置padding-bottom：9999px;margin-bottom:-9999px;
2.js实现
function setHeight(){
var h = $(’.right’).height();
console.log(h);
$(’.left’).height(h);
}
setHeight();
$(window).resize(function(){
setHeight();
})

左边固定，右边自适应
1.左边浮动，右边margin-left
2.固定绝对定位，右边margin-left
3.flex布局
4.table布局
5.双浮动加自适应width：calc(100%-200px)

三个元素都自适应等高
最外层包裹table
中间table-row
最里面table-cell

三栏布局
1.左右浮动，中间margin
2.绝对定位，左右0，中间margin
3.flex布局，中间flex-grow：1
4.gird布局 grid-template-columns
5.table

link标签和import标签的区别
1.兼容性 link是html标签 &import是css提出来的
2.加载顺序link同时加载，而import是页面加载完之后加载
3.link权重高于@import

transition和animation区别
1、transition需要去触发比如：点击事件、鼠标移入事件；而animation则是在页面加载后就触发
2、transition触发一次播放一次；而animation则是可以设置播放次数可以一直播放
3、transition关注的是样式属性的变化，而animation作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果。

BFC块级格式化上下文，用于清除浮动和防止margin重叠。页面上的一个独立容器，里面的子元素不会影响到外面。
哪些会创建bfc：
根元素 float不为none，display为inline-block或者flex，overflow不为visible，position为fixed或absolute

垂直居中的方法
1.绝对定位➕四面都是0，margin：auto
2.绝对定位 左上都50%，transform：translate（-50%，-50%）或者margin负值法
3.flex布局
4.父元素设置display：table-cell，vertical-align:middle

js动画和css3动画区别
1.js比较复杂，但是效果丰富，控制能力强，后者实现简单的比较流畅
2.js在主线程上还有其他任务时可能会受阻塞丢失帧
3.js没有兼容性问题
Css实现动画方式：animation,transition @keyframes

块级元素和行内元素区别
块级独占一行，可以设置宽高和內边距外边距
行内不会独占一行，宽高，內外边距会失效

多行元素的文本省略号(自己试试)
.textEllipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /显示的行数/
overflow: hidden;
word-break:break-all; /可择/
}
单行
.textEllipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

Css3新属性
边框border-radius,box-shadow背景background-size,transform，animation,媒体查询，新增选择器，弹性布局，透明

怎么让一个元素消失
Display:none，visibility：hidden，opacity：0

通过box-sizing：birder-box触发IE盒子模型，使其宽度包含padding和 border

image标签行内元素但是可以设置宽高愿意：可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。