题目总结
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的背景覆盖了橘黄色,不推荐使用