HTML/CSS,说点你可能不知道的技巧

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

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

2. 自定义li样式

li:{ list-style: none; } li:before{ content: "◆"; display: block; float: left; font-size: 1rem; margin-right: 0.5rem; }

效果如图:

3. IE条件注释

加载CSS2 <!--[if lt IE 9]> 加载CSS1(可以把要重写的写在这里). <![endif]-->

4. 图片base64表示法

编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件

5. 浏览器页面渲染优化

<!-- 强制360浏览器使用webkit引擎渲染 --> <meta name="renderer" content="webkit"/> <!-- 强制IE浏览器使用最高版本渲染 --> <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" />

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 */

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

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

div { width: 0px; height: 0px; border-width: 100px; border-style: solid; border-color: #00f #ff0 #f00 #0f0; }

当三个边框为透明只保留一个边框的颜色时:

div { width: 0px; height: 0px; border: 100px solid transparent; border-bottom-color: #f00; }

运用在边框上 - 拼接:

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

镂空:

.triangle:before { content: ""; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #fff; position: absolute; bottom: -9px; left: 50%; margin-left: -10px; }

8. css单位rem

px为一个单位像素点,em为当前元素父标签的font-size大小,rem为html标签的font-size大小。

所有单位如果统一使用rem可以方便的适配不同屏幕分辨率,因为只需使用js按照规则改动html的font-size值,整个页面都会随之改变。

当使用了

<meta name="viewport" content="width=device-width, initial-scale=1"/>

时,手机端的页面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; }

//html <div></div> <div></div> <div></div> <div></div>

效果图:

四个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开始

10. 伪元素:before和:after

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

`style span:before{ content: "问候:"; }

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

伪元素作为元素的子级元素,通常用于插入整体固定的内容,例如自定义列表样式就是一个不错的选择。当把元素的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>

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>

13. 自定义字体

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直接使用转义形式,&#x + unicode编码 + ;(十进制表示的编码不加x) <div class="use_custom_font">&#xe600;</div>

css声明方式

//css .is_custom_font { font-family: "custom_font"; } .is_custom_font: before { content: "\e600"; } //html <i class="is_custom_font"></i>

js输出方式

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

附:

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

最后推荐一个矢量图标字体网:阿里巴巴矢量图标库(http://www.iconfont.cn/)

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

效果:

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

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2018-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券