禁止鼠标双击选中文本不被双击选中文字的区域
自己设置li样式li:{
list-style: none;
}
li:before{
content: "◆";
display: block;
float: left;
font-size: 1rem;
margin-right: 0.5rem;
}
效果如图：
HTML/CSS,说点你可能不知道的技巧
IE条件注释加载CSS2
图片base64表示法
编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或者js插件
浏览器页面渲染优化
边框和内边距的反向绘制
css默认边框border和内边距padding绘制在盒的外部，定义的高度和宽度一旦应用了其中一个属性便会被撑大，导致不好把握盒的真实宽高。css3提供了一个新的样式：box-sizing。
默认为content-box，提供一个属性border-box，可使边框内边距绘制在盒内部，盒被定义的宽高不会被改变。box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
纯css绘制三角形和气泡框
三角形利用边框重叠效果，三个边框为透明时，第四个边款的位置将呈现三角形效果。div {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: #00f #ff0 #f00 #0f0;
}
HTML/CSS,说点你可能不知道的技巧
当三个边框为透明只保留一个边框的颜色时：div {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-bottom-color: #f00;
}
HTML/CSS,说点你可能不知道的技巧
运用在边框上 - 拼接：.border_div {
width: 200px;
height: 50px;
border: 1px solid #666;
border-radius: 20px;
position: relative;
}
.triangle {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #666;
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -10px;
}
HTML/CSS,说点你可能不知道的技巧
镂空：.triangle:before {
content: "";
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #fff;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -10px;
}
HTML/CSS,说点你可能不知道的技巧
css单位rem
px为一个单位像素点，em为当前元素父标签的font-size大小，rem为html标签的font-size大小。
所有单位假如统一使用rem可以方便的适配不同屏幕分辨率，由于只要使用js按照规则改动html的font-size值，整个页面都会随之改变。
当使用了
时，移动端的页面px不再表示一个像素点，而是被映射为一个合适的值。同时也会影响rem的大小，由于1rem=?px，px单位值变了，rem自然也会跟着变。
同级元素选择器
:nth-child为同级元素正序选择器，例如//style:
div {
width: 20px;
height: 20px;
float: left;
margin: 0 10px;
}
div : nth-child(even) {
background: #0062CC;
}
div : nth-child(odd) {
background: #24E150;
}//html
效果图：
HTML/CSS,说点你可能不知道的技巧
四个div标签都是作为nth-child选择器选择范围的同级元素(非指兄弟元素)。参数可为值，可为表达式。`匹配同级元素中的第一个元素。
div : nth-child(1)
`匹配偶数元素
div : nth-child(even)
`匹配奇数元素
div : nth-child(odd)
`逢3的倍数匹配
div : nth-child(n*3)
nth-last-child与nth-child相反，为倒序同级选择器。所谓同级，即不分能否兄弟元素，只需级别一致便参加选取。first-child和last-child见名知意，相对应nth-child(1)和nth-last-child(1)。注意：索引从1开始
伪元素:before和:after
这两个伪元素用于在元素前后插入内容，例：`style
span:before{
content: "问候：";
}//html
你好啊
伪元素作为元素的子级元素，通常用于插入整体固定的内容，例如自己设置列表样式就是一个不错的选择。当把元素的inline属性破坏(position:absolute/float)，那么:after和:before也就只存在名字的区别了。少量特殊的样式可以利用它们做到，但使用有些注意的地方：
1. 空元素不支持伪元素：input img textarea select等，内部无法包裹内容
2. 伪元素使用时必需有content属性，哪怕为空字符串
另，css伪类(nth-child等)和伪元素在css2中都使用单冒号 : ，但在css3中提倡伪元素使用双冒号 :: ，伪类使用单冒号 : ，具体是为了遵循标准还是更在意兼容全凭个人。
要不讲讲冷门的css属性选择器？
常见的css选择器，比方类选择器、id选择器，看厌了就来点小清爽。//匹配input标签，type属性为submit的元素
input[type="submit"] =>
//title属性精确等于Hello
[title="Hello"] =>
//title属性包含Hello，但Hello必需为独立词汇，也即其前后要么为空格符要么为空，",Hello"、"Hello3"、"Helloa"都是匹配不到的。
[title~="Hello"] =>
//包含Hello就可
[title*="Hello"] =>
//要么匹配单独的zh，要么匹配zh-*开头的字符串，无法匹配zh *
[title|=zh] =>
//匹配zh开头
[title^=zh]
//匹配cn结尾
[ttile$=cn]
//匹配带title属性的元素，哪怕title并没有给值
[title] =>
css后代选择器和子选择器的区别//后代选择器：选择div下的所有p标签
div p{ color:#f00; }
被选择被选择
//子选择器：选择div的直接子p标签，非直接性的子标签不选择
div>p{ color:#f00; }
被选择不被选择
自己设置字体
IE9+支持.eot字体，其它主流浏览器基本都支持.ttf字体，所以自己设置字体理论上至少要备齐这两种类型。公告方法如下：@font-face{
font-family: "custom_font";
src: ulr("custom_font.ttf"),
url("custom_font.eot");
}
公告完成即可以跟正常字体一样被引用了，但是对于特殊字符没有统一unicode码的那些，例如图标类字体，使用方式相对也比较特别，例如一个自己设置字体文件有一个字符，unicode编码”e600”(十六进制表示)：
html转义字符使用方式//css公告使用自己设置字体
.use_custom_font{
font-family: "custom_font";
}
//html直接使用转义形式， + unicode编码 + ;(十进制表示的编码不加x)
?
css公告方式//css
.is_custom_font {
font-family: "custom_font";
}
.is_custom_font: before {
content: "\e600";
}
//html
js输出方式// \\u + 十六进制unicode编码，需保证字体输出的位置使用的是自己设置字体。
document.write("\\ue600");
附：//js获取文字的十进制unicode编码
"字".charCodeAt(); //输出23383
//js获取十进制unicode编码对应的字符
String.fromCharCode(23383) //输出"字"
最后推荐一个矢量图标字体网：阿里巴巴矢量图标库(http://www.iconfont.cn/)
chrome跨域ajax请求
跨域问题实际上都是作为一种浏览器安全策略运行，当我们把安全策略关闭时自然就不会有跨域拦截，此时可以随便的访问不同站点资源。
在”chrome.exe”运行时带上参数”–disable-web-security”就可，例如windows下，参数增加在chrome的启动快捷图标(右键-属性-快捷方式-目标)中就可。
不固定宽度的块状元素居中法门//html
这算什么呢
//css
.parent {
text-align: center;
width: 100%;
background: #eee;
}
.children {
display: inline-block;
border: 1px solid #666;
border-radius: 5px;
padding: 10px;
}
效果：
HTML/CSS,说点你可能不知道的技巧
重点：有定宽的块状元素居中很容易，或者者用绝对定位设置left为50%，再margin-left修正到中间。或者者直接设置margin左右auto都可以。而单纯的行内样式，例如p标签，居中只需设置text-align为center就可，但牺牲了块状元素的特性。将元素设置为inline-box则可兼顾它们的特性。但重点还是在于父元素的text-align必需设置为center。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
