这是上一篇文章的后续。。。。上一篇居然被推荐到首页了，其实我写的可能别人看不懂，我写下来只是为了帮助我自己梳理一下知识点而已。这次依然是一些基础知识。
1. 怎么清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
clear: both: 在最后一个浮动标签后，新加一个标签，给其设置属性clear：both。overflow: hidden: 给浮动元素的父标签添加样式overflow: hidden。- 给父元素定义高度。根据content的内容来定义高度。
- 使用after伪元素清除浮动。
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*兼容IE*/
}
- 使用before和after双伪元素清除浮动。
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom: 1;
}
2. CSS3的新特性
CSS3的新特性有很多，包括边框、背景、文本效果及字体等，多数我都没用过更是没见过，简单地列举我见过的东西，加强记忆。
** 1. CSS3弹性布局，这个我单独写一篇文章吧~ **
** 2. CSS3 边框（Borders） **
| 属性 | 描述 |
|---|---|
| border-image | 设置所有边框图像的速记属性 |
| border-radius | 边框圆角 |
| box-shadow | 附加一个或多个下拉框的阴影 |
** 3. 2D转换方法 **
| 方法 | 描述 |
|---|---|
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素 |
| translateX(n) | 沿着 X 轴移动元素 |
| translateY(n) | 沿着 Y 轴移动元素 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度 |
| scaleX(n) | 改变元素的宽度 |
| scaleY(n) | 改变元素的高度 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度 |
| translateY | 沿着 Y 轴移动元素 |
** 4. 3D转换方法 **
| 方法 | 描述 |
|---|---|
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 仅使用用于 X 轴的值 |
| translateY(y) | 仅使用用于 Y 轴的值 |
| translateZ(z) | 仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 通过给定一个 X 轴的值 |
| scaleY(y) | 通过给定一个 Y 轴的值 |
| scaleY(Z) | 通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
** 5. CSS3动画 **
** @keyframes规则是创建动画，@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 **
例如：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst{
0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: blue;
}
100% {
background: green;
}
}
3. 常见的CSS预处理器
我只听过和见过或者用过这三个：Sass、LESS和Stylus。
4. px, em, rem, %, vw, vh, vm都是什么单位？
- px: 固定的像素，是相对于显示器屏幕分辨率而言的。
- em: 相对于父元素字体大小。所有未经调整的浏览器都符合: 1em=16px。
- rem: rem是CSS3新增的一个相对单位，它是相对于根目录（HTML元素）的。
- %: 一般来说就是相对于父元素的，对于普通定位元素就是我们理解的父元素；对于position: absolute;的元素是相对于已定位的父元素；对于position: fixed;的元素是相对于ViewPort（可视窗口）。
- vw: css3新单位，view width的简写，是指可视窗口的宽度。1vw等于视口宽度的1%，例如：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
- vh: css3新单位，view height的简写，是指可视窗口的高度。1vh等于视口高度的1%，例如：浏览器高度900px, 1 vh = 900px/100 = 9 px。
- vm: css3新单位，相对于视口的宽度或高度中较小的那个。例如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
5. 图片的alt和title属性有什么区别？
图片的alt属性起到替代文字的作用，当图片不存在或者载入出错时，那么会显示该文字。title指的是当图片不存在或者载入出错时，在本来显示图片的位置里也会显示出alt的内容，并且当图片名字、路径都正确时，当鼠标移到图片的区域范围内，也会显示出title的信息。
6. CSS哪些属性可以继承？
很多属性都是可以自动继承的，如元素可见性visilility、光标属性cursor等，这里举例我常用的属性。
字体系列属性：font-family, font-weight, font-size等；
文本系列属性： text-align, color, line-height等。
7. position的值有哪些？
- static（默认）：不脱离文档流，top，right，bottom，left等属性不生效。
- relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
- absolute(绝对定位)：元素会脱离正常文档流，不在占据空间，参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
- fixed(固定定位)：所固定的参照对像是可视窗口。
- sticky(粘性定位)。
8. 什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 解决办法：在简书上看到的，地址：www.jianshu.com/p/1bd7e6993…
9. 用纯CSS创建三角形
还是在简书上看到的，通过这篇文章才知道了实现原理。指路：www.jianshu.com/p/9a463d50e…
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
10. 几种常见的布局
- 固定布局：宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化。这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。
- 流式布局：以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多。
- 浮动布局：浮动布局关键词，float，可以设置left或者right，使元素脱离文档流进而达到布局的目的，使用浮动的结束以后，要清除浮动。
- 弹性布局：比较常见的一种布局，我再单独写一篇文章帮助我理解~
