首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML/CSS,说点你可能不知道的技巧

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

作者头像
用户5997198
发布2019-08-12 17:13:09
1.1K0
发布2019-08-12 17:13:09
举报
文章被收录于专栏:蚂蚁开源社区蚂蚁开源社区

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。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-10-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档