html css笔记(view:3221)

1.取消表单元素的浏览器默认样式

input,button,select,textarea{outline:none} 
textarea{resize:none}
//:hover,:active,:focus{}

2.table设置边框

<table border="1" cellspacing="0" cellpadding="0" bordercolor="#eee"></table>

3.td宽度设置无效，内容超出

table{table-layout: fixed;word-wrap:break-word;}

4.letter-spacing

5.input的伪元素(:before,:after)无效，因为它没有结束标签

6.q 与 blockquote 的区别
q 标签在本质上与 blockquote 是一样的。不同之处在于它们的显示和应用。q 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 blockquote 标签。

7.calc运算符两边要有空格否则无效

width: calc(100%-30px);    /*错误*/
width: calc(100% - 30px);  /*正确*/

8.white-space

white-space: pre;    //代码部分不换行，并且保留空格缩进

9.伪类attr

a:after{
  content:attr(href);
}

10.取消文本双击后的蓝色背景,常用于分页导航按钮上

span{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

11.行内元素靠左居中缩小

display: inline-block;
transform-origin: left center;
transform: scale(.75);

12.flex item设置了flex-grow:1后width属性会失效，但是min-width可以生效

flex-grow:1;
min-width:120px;

13.title属性换行
在换行的地方添加
或
实现换行

<tr title="第一行&#10;第二行&#13;第三行">