在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
为了让大家高效率的进行工作,本文归纳总结了十个实用的CSS代码技巧,希望对大家能有所帮助。简单来说,这十大技巧分别是注意外边距折叠,使用flex进行布局,所有元素设置为Border-box,重置元素的CSS样式,使用transform属性来创建动画,短横线命名,不要使用!important,使用AutoPrefixer达到更好的兼容性,Caniuse和验证。
1、注意外边距折叠
与其他大多数属性不同,上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时,只会保留两个margin值中较大的那个。例如:
HTML<div class="square red"></div>
<div class="square blue"></div>
CSS.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
2、使用flex进行布局
flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果,但它们本质上是文本和块元素布局的工具,而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。
flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性,一旦你学会了它们,做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的,所以你应该多多使用flex布局。
.container {
display: flex;
}
3、所有元素设置为Border-box
大多数初学者都不知道box-sizing这个属性,但实际上它非常重要。box-sizing属性有两个值:content-box(默认) - 当我们设置一个元素的宽度或高度时,就是设置它的内容的大小。所有的padding和边框值都不包含。例如,一个div的宽度设置为100,padding为10,于是这个元素将占用120像素(100+2*10)。
border-box - padding与边框包含在元素的宽度或高度中,一个设置为width: 100px和box-sizing:
border-box的div元素,他的总宽度就是100px,无论它的内边距和边框有多少。
将所有元素都设置为border-box,可以更轻松的改变元素的大小,而不必担心padding或者border值会将元素撑开变形或者换行显示。
4、重置元素的CSS样式
尽管这些年来有了很大的改善,但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码,这样你是在没有任何默认内外边距的基础上进行布局,于是所产生的效果也就是统一的。
网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题,例如normalize.css、minireset和ress,你可以在你的项目中引用它们。如果你不想使用第三方代码库,你可以使用下面的样式来进行一个非常基本的CSS reset:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
上面的代码看起来有些霸道,将所有元素的内外边距都设置为0了,而正是没有了这些默认内外边距的影响,使得我们后面的CSS设置会更加的容易。同时box-sizing: border-box也是一个很棒的设置,我们紧接着就会介绍它。
5、使用transform属性来创建动画
最好使用transform()函数来创建元素的位移或大小动画,尽量不要直接改变元素的width,height以及left/top/bottom/right属性值。
下面的例子中,我们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* 不建议 */
.ball.slide-out {
left: 500px;
}
/* 建议 */
.ball.slide-out {
transform: translateX(450px);
}
transform以及它的所有函数(translate, rotate, scale等)几乎没有浏览器兼容性问题,可以随意使用。
6、短横线命名
当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。
/* 正确 */
.footer-column-left { }
/* 错误 */
.footerColumnLeft { }
.footer_column_left { }
7、不要使用!important
说真的,不要使用!important。现在看起来可以快速的解决问题,但最终可能会导致大量的重写。相反,我们应该花点时间找到CSS选择器不工作的原因并更改它。
唯一可以使用的!important的地方是当您想要覆盖HTML中的内联样式时,但是内联样式同样也是一个坏的习惯,应该尽量的避免。
8、使用AutoPrefixer达到更好的兼容性
浏览器前缀是CSS中最烦人的事情之一,每个属性需要的前缀是不一致的,你永远不知道到底需要哪一个,如果真的要把它一个一个手动添加到样式表中,那无疑是一个无聊的噩梦。
值得庆幸的是,有工具可以自动为我们提供添加浏览器前缀的功能,甚至可以决定需要支持哪些浏览器:
在线工具:Autoprefixer
文本编辑器插件:Sublime Text, Atom
代码库:Autoprefixer (PostCSS)
9、Caniuse
对于CSS的属性Web浏览器仍然存在许多兼容性不一致的地方。使用caniuse来检查您使用的属性是否得到了广泛的支持?是否需要前缀?或者是否在某个浏览器中使用有要注意的地方?有了caniuse你在写CSS时就会更得心应手了。
10、验证
验证CSS可能不像验证HTML或JavaScript代码那么重要,但是通过工具运行一下你的代码仍然非常有用。它会告诉你是否犯了任何错误,警告错误的用法,并为您提供改进代码的提示。
就像压缩和Autoprefixer一样,有免费的工具可以利用:
在线
工具:W3 Validator, CSS Lint
文本编辑器插件:Sublime Text, Atom
代码库:stylelint (Node.js, PostCSS), css-validator (Node.js)
以上就是十个实用的CSS代码技巧整理。这些规则和实践经验,或多或少能帮助大家提高工作效率。关于前端的更多知识的学习和了解,大家可以上博学谷观看海量的学习视频资源。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
CSS六大基本选择器介绍
CSS是一种格式化网页的标准方式,用于设置网页的样式,并允许样式信息与网页内容分离的一种技术。要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。本文将向大家介绍六大基本选择器,即元素选择器、类选择器、ID选择器、通用选择器、伪类选择器、伪元素选择器。
5193
2019-08-12 17:58:27
Web前端开发常用工具推荐
随着互联网发展的愈加深入,前端作为公司的门面,人才需求会越来越大。正因如此,才吸引了那么多的人投身前端行业。对于刚入门前端的新手和一些资深的前端开发人员来讲,掌握一些常用的Web前端开发工具是十分有必要的。好用的工具可以帮助大家更好的完成工作,并且提高开发的效率。下面我就来推荐一些Web前端开发常用工具。
4479
2020-03-26 20:33:32
学前端开发应该从哪里入手?
学前端开发应该从哪里入手?移动互联网的快速发展,多屏互动和多端兼容友好的界面成为目前所有系统重要的需求,前端开发工程师成为目前市场紧俏、火爆的人才。零基础入门先了解前端学习路线,明确学习前端的路径、入门学习前端基础,了解未来发展趋势,避免走弯路。
4078
2020-07-08 09:50:35
JS数据结构与算法基础知识在线学习
以前常常听到前后端分离的说法,近几年有了翻天覆地的变化。在前、后端界限融合,效率当先的时代,掌握数据结构与算法知识变得尤其重要。因此博学谷推出了可以帮助前端工程师进阶的相关课程,现在让我们一起来在线学习, JS数据结构与算法的基础知识吧!
3151
2020-07-24 18:30:27
必备的Web前端技术有哪些?
必备的Web前端技术有哪些?需要掌握Web前端开发必备核心技能,在IT行业快速更新迭代的行业,保持不断地学习钻研,才能在前端之路上走得更远。你需要打好HTML、CSS、和JavaScript前端开发的三大基础知识,熟练掌握主流的前端框架有Vue、React和Angular,了解服务端开发,掌握前端工程化。
4089
2021-11-18 16:20:36