几个常用的CSS对比

1、隐藏元素

常见的方法：dispaly、opacity、visibility，区别如下：
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的，子元素受影响。
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，通过对子元素设置可以更改掉
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样，子元素受影响。

2、盒模型

有两种，IE 盒子模型、W3C 盒子模型；
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
区别：IE的content部分把 border 和 padding计算了进去;
怪异(IE)盒模型：元素宽度 = width + padding + border + margin
标准(W3C)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高，

3、获取伪元素

<div>

<p>第一个子元素</p>

<h1>第二个子元素</h1>

<span>第三个子元素</span>

<span>第四个子元素</span>

</div>

//p:first-child 匹配到的是p元素，因为p元素是div的第一个子元素；

//h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；

//span:first-child 匹配不到任何元素，因为span和h1一样，都不是div的第一个子元素；

//p:first-of-type：匹配到的是p元素，因为p是div所以类型为p的子元素中的第一个；

//h1:first-of-type：匹配到的是h1元素，因为h1是div所以类型为h1的子元素中的第一个；

//span:first-of-type：匹配到的是第一个span元素，这里div有俩个span子元素，匹配到第一个；

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

4、透明效果

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

5、CSS3有哪些新特性？

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

6、伪元素和伪类

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。如：after，新标准中用“::”双冒号表示
伪伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。如：hover，用“:”单冒号表示

补充两个表单中的常见问题

1、input获取焦点后出现边框，去掉：

1	input{ outline:none; }

2、搜索框后面单图标美化

input[type="search"]::-webkit-search-cancel-button{

-webkit-appearance: none;

//设置宽高和背景

}

3、自动填充表单的黄色背景

1	input{ input:-webkit-autofill { background-color: transparent; } }

或者有必要可以在form标签上直接关闭了表单的自动填充：autocomplete=”off”

持续更新…

参考：https://segmentfault.com/a/1190000014994892