Css日常总结

题目总结

1.CSS清除浮动有哪些方法

• 父级元素设置高度，手动撑开
• 浮动元素结尾增加空标签，设置clear:both
• 父元素设置overflow:hidden
• 父元素添加伪类:after和zoom

2.CSS选择器优先级

!import > 内联样式(style) > ID选择器 > 类/属性/伪类 > 元素/关系

3.CSS实现三列布局（左右固定宽度，中间自适应）

• CSS浮动
  第一个float:left，第二个float:right，第三个设置margin-left和margin-right
• 绝对定位法
  第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
• flex布局

.left{   width:200px;   或者   flex:0 0 200px; } 
.right{  width:200px;   或者   flex:0 0 200px; } 
.center{   flex:1; }

4.谈一下flex布局

• flex是一种弹性布局，包含flex-container和flex-item.

常用的属性包括flex-direction、flex-wrap、justify-content、align-items
水平居中 justify-content:center
水平两头居中 justify-content:space-between
垂直居中 align-items:center

5.谈一下盒模型

盒模型包括：content,padding,border,margin
盒模型分为：IE盒模型和标准w3c盒模型

• IE盒模型宽度包含了padding和border，w3c盒模型宽度就是内容宽度。

6.transition动画和animation有什么区别

他们虽然都可以做出动画效果，但是transition主要做简单的过渡效果，
而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。

7.H5自适应方案

H5自适应方案大家在网速能找到很多，我个人推荐一种我非常喜欢的方式，就是rem.
rem是一种相对单位，它基于html的font-size值来进行调整。
通常我们以750为基准，我们会在header中嵌套一段js脚本，
获取手机网页分辨率尺寸除以375，为了方便计算，我们假设750像素下1rem = 100px；所以 我们除以375后需要乘以50.

8.水平垂直居中

• margin: 0 auto;
• position 元素已知宽度
  父元素设置为：position: relative;
  子元素设置为：position: absolute;
  距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
• position transform 元素未知宽度
  如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
  效果如上！
• flex布局

    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中

• table-cell布局
  因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;
  td的背景覆盖了橘黄色，不推荐使用