一些css知识

两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

 

1、设置 placeholder属性：

// firefox 
input::-moz-placeholder {
    color: red;
    font-size: 18px;
  }
// IE
input:-ms-input-placeholder {
  color: red;
  font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
  color: red;
  font-size: 18px;
}

1. 都要加上各自浏览器的前缀(如 -webkit- )；
2. firefox的 placeholder 的前面没有 input- ；
3. firefox与chrome都是 :: 两个冒号，而IE则是一个 : ;
4. 低版本的浏览器与新版本浏览器可能写法不同；

 

2、select 标签去掉小三角的css (IE中待发掘)：

// chorme
-webkit-appearance: none;

// firefox
 -moz-appearance: none;

 

3、去除input[type=number]右边的spinners（移动端）

input[type=number] 通常用在移动端设备上，浏览器会识别number输入类型，然后改变数字键盘来适应它。但是它会出现spinners，一般不需要它。去掉spinners的css如下：

// firefox
input[type='number'] {
  -moz-appearance:textfield;
}
 
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

 

4、去除点击 a链接或者通过Javascript定义的可点击元素的蓝色边框（移动端），   将其设置为透明

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

 

5、webkit中去掉滚动条的宽度

webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式

::-webkit-scrollbar {
  width: 0;
}

同样的，还可以改变滚动条的样式，参考：http://www.xuanfengge.com/css3-webkit-scrollbar.html

 

6、使用 :not()   比如去掉一排div中最右边div的右边框

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

而不用通过两次来控制

.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

 

7、 继承 box-sizing，让 box-sizing 继承 html：

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

 

8、禁用鼠标事件，设置了以后就不能用鼠标点击了

pointer-events: none; 

 

9、用calc()和百分比 给元素设置动态的值：

/* 案例1 */
.simpleBlock {
  width: calc(100% - 100px);
}
 
/*  案例2 */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

 

10、用flex的时候，想要保证间隔相同，又要使两边贴边，那么试试 justify-content: space-between

.list {
  display: flex;
  justify-content: space-between;
}

 

11、当a标签无内部文本，却又想显示其超链接 href 属性

a[href^="http"]:empty::before {
  content: attr(href);
}

 

12、隐藏元素的5中方法：

Opacity：设置一个元素透明度为0。它不改变元素的边界框，意味着将 opacity为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

.hide {
  opacity: 0;
}

 

Visibility：将它的值设为 hidden 。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。

.hide {
   visibility: hidden;
}

如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素，只要将那个元素的 visibility 显式设置为 visible 即可，同时也可以设置平滑的过渡动画。

 

Display：将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。被隐藏的元素不占据任何空间，该元素直接打用户交互操作都不可能生效。

.hide {
   display: none;
}

请注意，1、通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM 来操作它，就像操作其他的元素

　　　　2、任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效

 

Position：设置很大的值，position不影响布局且可以直接交互（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互）。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

 

Clip-path：隐藏元素的另一种方法是通过剪裁它们来实现，元素自身不再显示，它也依然占据本该占据的大小    参考：http://codepen.io/SitePoint/pen/YWXgdW/

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

 

13、清除浮动：（由于浮动带来了高度塌陷，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象））

　　1) display:block 使生成的元素以块级元素显示,占满剩余空间;

　　2) height:0 避免生成内容破坏原有布局的高度。

　　3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

　　4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:"XXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

　　5）zoom：1 触发IE hasLayout。

　　通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; }
.clearfix {*zoom:1;}

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

新版清除浮动

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; }
.clearfix:after { *zoom:1; }   /* For IE 6/7 (trigger hasLayout) */

 

14、在可点击的项目上 手型

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
    cursor: pointer;
}

 

15、位置宽高的水平和竖直居中

/*display:table-cell配合text-align:center和vertical-align:middle*/
.container{
  width: 600px;
  height: 600px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center{
  background: blue; 
}

/*transform*/
.container{
  width: 100%;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*flex+justify-content: center;+  align-items: center;*/
.container{
  width: 100%;
  height: 400px;
  background: #eee;
  /* flex 布局解决水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}