一些不常用但又很有用的css小tips
2018-10-19 06:13:03来源:博客园 阅读 ()
1.box-sizing:border-box
box-sizing有三个属性:content-box(默认值) || border-box || inhreit。第一个自然不用说,比如我们设置一个div,宽度和高度都是100px,此时你给它加了padding:2px和border:1px solid #333,最后这个元素的总宽度是106px,这是W3C关于盒子模型的基本定义,即width和height指的是内容(content)的宽高。而border-box则是回到了IE盒子模型的旧标准,也就是说这里的width规定的是总长度(content+padding+border),虽然是旧标准,但不得不承认有时候为了方便我们去还原一些设计稿时,还是有帮助的。
2.user-select:none
这个主要是针对一些按钮的吧,至少在我做过的项目中就是这样,比如说一个按钮,你疯狂点击它,点快了有时候鼠标有滑动,那么按钮上的文字就会变成这样:
这样就有些尴尬,像一个文本一样,给人的感觉不太好。所以要使得这些文本无法被选中,在这个按钮的css样式中添加user-select:none即可。
3.pointer-event:none
这个属性主要用在一些点击穿透的场景上,比如在一个父元素中有两个子元素,position都为absolute,其中子元素1是主体的内容,z-index:1;子元素2是一个滤镜,z-index:2。
两个子元素宽高都是100%,这时候因为这个滤镜挡在子元素1的上方。使得我们无法点击子元素1的各种内容。这时候就需要给子元素2这个滤镜元素加上pointer-event:none;使得它变成一个“幽灵元素”。鼠标点击可以轻易地穿透它的身体,从而点击到被它挡在身后的子元素1。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:驴妈妈旅游菜单导航带源码
- CSS常用属性(入门级),持续更新 2020-05-22
- CSS选择器的优先级 2020-05-18
- 【2020Python修炼记】前端开发之 HTML常用标签汇总 2020-05-12
- CSS中的一些细节 2020-04-17
- HTML CSS百科及常用嵌入方式 2020-03-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash