正文

一些css知识

IP云
IP云V管理员/0 阅读
11/25
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

两个“::”和一个“:”在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:;

}

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

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

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

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

::-webkit-scrollbar {

  width:;

}

同样的，还可以改变滚动条的样式，参考：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:;

}

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:; }

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

.clearfix { *zoom:; }.

新版清除浮动 

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix:after { *zoom:; }   /* 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;

}

相关阅读

目录[+]