HTML和CSS你可能不知道的技巧

快来打我* 2022-06-05 00:59 294阅读 0赞

### 转自:[http://blog.csdn.net/chemmuxin1993/article/details/52594739][http_blog.csdn.net_chemmuxin1993_article_details_52594739] ###

### 1. 禁止鼠标双击选中文本 ###

<div onselectstart="return false;" style="-moz-user-select:none;">不被双击选中文字的区域</div>
    
     
      
       1
       2

### 2. 自定义li样式 ###

li:{ list-style: none; }
    li:before{ content: "◆"; display: block; float: left; font-size: 1rem; margin-right: 0.5rem; }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

效果如图：![这里写图片描述][20160920114443880]

### 3. IE条件注释 ###

加载CSS2
    
     
      
       1
       2
       3
       4

### 4. 图片base64表示法 ###

> 编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件
> 
> [在线base转换直通车][base]

### 5. 浏览器页面渲染优化 ###

<meta name="renderer" content="webkit"/>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     
      
       1
       2
       3
       4
       5
       6
       7
       8

### 6. 边框和内边距的反向绘制 ###

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 */
     
      
       1
       2
       3

### 7. 纯css绘制三角形和气泡框 ###

三角形利用边框重叠效果，三个边框为透明时，第四个边款的位置将呈现三角形效果。

div { width: 0px; height: 0px; border-width: 100px; border-style: solid; border-color: #00f #ff0 #f00 #0f0; }
     
      
       1
       2
       3
       4
       5
       6
       7

![效果图][20161019153614795]   
当三个边框为透明只保留一个边框的颜色时：

div { width: 0px; height: 0px; border: 100px solid transparent; border-bottom-color: #f00; }
     
      
       1
       2
       3
       4
       5
       6

![效果图][20161019153925147]   
运用在边框上 - 拼接：

.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; }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17

![效果图][20161019155124944]   
镂空：

.triangle:before { content: ""; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #fff; position: absolute; bottom: -9px; left: 50%; margin-left: -10px; }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

![效果图][20161019155448317]

### 8. css单位rem ###

px为一个单位像素点，em为当前元素父标签的font-size大小，rem为html标签的font-size大小。   
所有单位如果统一使用rem可以方便的适配不同屏幕分辨率，因为只需使用js按照规则改动html的font-size值，整个页面都会随之改变。   
当使用了

时，手机端的页面px不再表示一个像素点，而是被映射为一个合适的值。同时也会影响rem的大小，因为1rem=?px，px单位值变了，rem自然也会跟着变。

### 9. 同级元素选择器 ###

: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;
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13

//html
    <div></div> <div></div> <div></div> <div></div>
     
      
       1
       2

效果图：![效果图][20161020105255059]   
四个div标签都是作为nth-child选择器选择范围的同级元素（非指兄弟元素）。参数可为值，可为表达式。

`匹配同级元素中的第一个元素。
    div : nth-child(1)
    `匹配偶数元素
    div : nth-child(even)
    `匹配奇数元素
    div : nth-child(odd)
    `逢3的倍数匹配
    div : nth-child(n*3)
     
      
       1
       2
       3
       4
       5
       6
       7
       8

nth-last-child与nth-child相反，为倒序同级选择器。所谓同级，即不分是否兄弟元素，只要级别一致便参与选取。first-child和last-child见名知意，相对应nth-child(1)和nth-last-child(1)。注意：索引从1开始

### 10. 伪元素:before和:after ###

这两个伪元素用于在元素前后插入内容，例：

`style
    span:before{ content: "问候："; }
     
      
       1
       2
       3
       4

//html
    <span>你好啊</span>
     
      
       1
       2

![效果图][20161020110853221]   
伪元素作为元素的子级元素，通常用于插入整体固定的内容，例如自定义列表样式就是一个不错的选择。当把元素的inline属性破坏(position:absolute/float)，那么:after和:before也就只存在名字的区别了。一些特殊的样式可以利用它们做到，但使用有些注意的地方：   
1. 空元素不支持伪元素：input img textarea select等，内部无法包裹内容   
2. 伪元素使用时必须有content属性，哪怕为空字符串   
另，css伪类(nth-child等)和伪元素在css2中都使用单冒号 : ，但在css3中提倡伪元素使用双冒号 :: ，伪类使用单冒号 : ，具体是为了遵循标准还是更在意兼容全凭个人。

### 11. 要不讲讲冷门的css属性选择器？ ###

常见的css选择器，比如类选择器、id选择器，看厌了就来点小清新。

//匹配input标签，type属性为submit的元素
    input[type="submit"] => <input type="submit" value="提交" />
    
    //title属性准确等于Hello
    [title="Hello"] => <div title="Hello"></div>
    
    //title属性包含Hello，但Hello必须为独立词汇，也即其前后要么为空格符要么为空，",Hello"、"Hello3"、"Helloa"都是匹配不到的。
    [title~="Hello"] => <div title="Today , Hello Blurooo!"></div>
    
    //包含Hello即可
    [title*="Hello"] => <div title="aaaaHelloaaaa"></div>
    
    //要么匹配单独的zh，要么匹配zh-*开头的字符串，无法匹配zh *
    [title|=zh] => <div title="zh"></div>
    
    //匹配zh开头
    [title^=zh]
    
    //匹配cn结尾
    [ttile$=cn]
    
    //匹配带title属性的元素，哪怕title并没有给值
    [title] => <div title></div>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23

### 12. css后代选择器和子选择器的区别 ###

//后代选择器：选择div下的所有p标签
    div p{ color:#f00; }
    
    <div><p>被选择</p><section><p>被选择</p></section></div>
    
    //子选择器：选择div的直接子p标签，非直接性的子标签不选择
    div>p{ color:#f00; }
    
    <div><p>被选择</p><section><p>不被选择</p></section></div>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9

### 13. 自定义字体 ###

IE9+支持.eot字体，其它主流浏览器基本都支持.ttf字体，所以自定义字体理论上至少要备齐这两种类型。声明方法如下：

@font-face{ font-family: "custom_font"; src: ulr("custom_font.ttf"), url("custom_font.eot"); }
     
      
       1
       2
       3
       4
       5

声明完成就可以跟正常字体一样被引用了，但是对于特殊字符没有统一unicode码的那些，例如图标类字体，使用方式相对也比较特别，例如一个自定义字体文件有一个字符，unicode编码”e600”（十六进制表示）：

> html转义字符使用方式

//css声明使用自定义字体
    .use_custom_font{
        font-family: "custom_font";
    }
    
    //html直接使用转义形式，&#x + unicode编码 + ;（十进制表示的编码不加x）
    <div class="use_custom_font"></div>
     
      
       1
       2
       3
       4
       5
       6
       7

> css声明方式

//css
    .is_custom_font {
        font-family: "custom_font";
    }
    .is_custom_font: before {
        content: "\e600";
    }
    
    //html
    
    <i class="is_custom_font"></i>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

> js输出方式

// \u + 十六进制unicode编码，需保证字体输出的位置使用的是自定义字体。
    document.write("\ue600");
     
      
       1
       2

附：

//js获取文字的十进制unicode编码
    "字".charCodeAt();  //输出23383
    
    //js获取十进制unicode编码对应的字符
    String.fromCharCode(23383)  //输出"字"
     
      
       1
       2
       3
       4
       5

最后推荐一个矢量图标字体网：[阿里巴巴矢量图标库][Link 1]

### 14. chrome跨域ajax请求 ###

跨域问题实际上都是作为一种浏览器安全策略运行，当我们把安全策略关闭时自然就不会有跨域阻拦，此时可以随意的访问不同站点资源。   
在”chrome.exe”运行时带上参数”–disable-web-security”即可，例如windows下，参数添加在chrome的启动快捷图标（右键-属性-快捷方式-目标）中即可。

### 15. 不固定宽度的块状元素居中法门 ###

//html
    <div class="parent">
        <div class="children">这算什么呢</div>
    </div>
    
    //css
    .parent {
        text-align: center;
        width: 100%;
        background: #eee;
    }
    .children {
        display: inline-block;
        border: 1px solid #666;
        border-radius: 5px;
        padding: 10px;
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17

效果：![这里写图片描述][SouthEast]

重点：有定宽的块状元素居中很容易，或者用绝对定位设置left为50%，再margin-left修正到中间。或者直接设置margin左右auto都可以。而单纯的行内样式，例如p标签，居中只要设置text-align为center即可，但牺牲了块状元素的特性。将元素设置为inline-box则可兼顾它们的特性。但重点还是在于父元素的text-align必须设置为center。

[http_blog.csdn.net_chemmuxin1993_article_details_52594739]: http://blog.csdn.net/chemmuxin1993/article/details/52594739
[20160920114443880]: /images/20220605/8d21bb0e7b2142bab446c5cd0928731a.png
[base]: http://tool.css-js.com/base64.html
[20161019153614795]: /images/20220605/96c816ca3f9f4e26a303e97fdc703696.png
[20161019153925147]: /images/20220605/9f18db4c53ba42b487a883af72c9a25c.png
[20161019155124944]: /images/20220605/b94f11bd9c2d445b95172d0e6f9f8193.png
[20161019155448317]: /images/20220605/64ad78e218e94c49a2c829f331a20ca1.png
[20161020105255059]: /images/20220605/7647946fb90548f8a4ab6fc53c11b8c5.png
[20161020110853221]: /images/20220605/00d4b0fb4f1148cd9fb2df62cd2f2435.png
[Link 1]: http://www.iconfont.cn/
[SouthEast]: /images/20220605/14c21d0d99ab49769d1d5d2f3c8923c3.png