css 小技巧

01 Apr 2016

• font-family: -apple-system; 默认使用ui字体

• 设置html中文字不可选, 鼠标右键没有复制

	
// 需要浏览器前缀  不支持IE8,9
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

• 更改html中当文字被选中时的样式 — 比如下面代码表示 当文字被选中时, 红字绿底

::-moz-selection {
	background: green;
	color: red;
}
::selection {
	background: green;
	color: red;
}

• 更改浏览器默认样式 appearance : none | button | icon ;

   div {							// 需要浏览器前缀  
       appearance: button;			// 会将div描绘出button基本样式
   }
  

• pointer-events : none; 取消鼠标的点击事件, 无法点击 > <a href="" title=""> </a> 中 键盘的Tab键会通过focus触发, 解决方案 在css上设置pointer-events: none; 属性, 然后移出a标签中的href属性(removeAttribute)

• input标签中设置datalist联想信息

    <label>
        <input type="text">
        <datalist>
            <option value="11">
            <option value="22">
            <option value="33">
        <datalist>
    </label>
  

• 当img图片过小 无法撑开整个容器的高度的时候 可以使用一个内联块级元素来撑开这个高度

    <img src="">
    <i class="vline"></i>
    .vline {
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    } 就可以解决这个问题
  

• form.elements

  全局对象 包含表单中所有元素的数组 form 对象

对象属性

1. action 设置返回表单的action属性
2. length 返回表单中的元素数目
3. method 返回或者设置 数据发送到服务器的http方法
4. name 返回或设置 表单名称
5. elements[] 包含表单中的所有元素的数组

方法

1. reset() 把表单的所有输入元素重置为默认值
2. submit() 提交表单

———–华丽丽的分割线———-

• 一些css经验之谈

.test-checkbox:checked ~ .test-label     // 选择全部后面的同级节点元素
.test-checkbox:checked + .test-label 	  // 选择相邻的后面的兄弟节点
:first-child  匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素
:first-of-type 	匹配的是该类型上的第一个元素
* { cursor: none !improtant; } 			 // 鼠标样式消失
position: relative;    top: 50%;   transform:  translateY(-50%);           // 垂直居中