一些不常用但又很有用的css小tips

jone5679 发布于2019-04-23 13:17 / 1965人阅读

摘要：第一个自然不用说，比如我们设置一个，宽度和高度都是，此时你给它加了和最后这个元素的总宽度是，这是关于盒子模型的基本定义，即和指的是内容的宽高。所以要使得这些文本无法被选中，在这个按钮的样式中添加即可。

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。

云服务器 GPU云服务器 linux的一些常用命令 ddos一些比较小的网站 CSS_JS_Tips 有用的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1683.html

FED之必备技能 - 收藏集 - 掘金

摘要：收藏优秀组件库合集前端掘金开源的优秀组件库合集教你如何在应用程序中使用本地文件上传图片前端掘金使用在中添加到的，现在可以让内容要求用户选择本地文件，然后读取这些文件的内容。『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... 教你如何在 web 应用程序中使用本地文件•上传图片file✔ - 前端 - 掘金使用在HTM...

lyning 2019-08-01 16:55 评论0 收藏0
微信小程序初探

摘要：在微信小程序中，要更新视图就只能修改，而视图层也只能通过事件向逻辑层传递交互信息。页面移植到微信小程序要修改的地方也还比较多，主要是标签和的交互及小程序提供的功能部分。小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 —...

teren 2019-08-20 13:57 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0