CSS用法的一些总结_html/css_WEB-ITnose
程序员文章站
2024-01-28 11:05:10
...
有时我都不敢相信自己是一个python程序员,以python工程师的名义进了公司之后,除了Django和一些并不复杂的脚本以外,其余时间写了大量的CSS和jQuery,现在回头看之前的一些代码,写得十分丑陋又低效,其中的CSS就有很大改进空间。
正如多数人的认知一样,HTML和CSS并不难学难用,从学习曲线上来说确实如此,难度甚至不如使用VIM。但是写不写得好又是另一回事,好的CSS代码能用最少的代码量实现功能,易修改且性能佳。易修改,举个最简单的例子,比如要求修改一个div的高宽且保持其子div自适应高宽,若是写死了子div的高宽,修改工作很麻烦,所以最好是将子div在需求下尽可能写成自适应,这样修改时就只需要修改父div的高宽即可。性能佳,能用CSS实现的绝对不用js实现,不管是网页布局还是动画效果,原生的CSS都是快速又具备高度兼容性的选择。
正如多数人的认知一样,HTML和CSS并不难学难用,从学习曲线上来说确实如此,难度甚至不如使用VIM。但是写不写得好又是另一回事,好的CSS代码能用最少的代码量实现功能,易修改且性能佳。易修改,举个最简单的例子,比如要求修改一个div的高宽且保持其子div自适应高宽,若是写死了子div的高宽,修改工作很麻烦,所以最好是将子div在需求下尽可能写成自适应,这样修改时就只需要修改父div的高宽即可。性能佳,能用CSS实现的绝对不用js实现,不管是网页布局还是动画效果,原生的CSS都是快速又具备高度兼容性的选择。
清除浮动
清除浮动是个常见问题,不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动
.clear-fix { overflow: hidden; zoom: 1; }.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
DIV同行排列
最容易想到的是将一行div全设置为display:inline-block,但这种做法会使得两个div之间存在“间隔”,这个“间隔”的大小通常由font-size决定。清除间隔可以通过使用注释的方法实现。
更好的方式自然还是使用float
.item {float: left}
上一篇: php 根据数据库ip段显示ip归属地
下一篇: linux 下yum安装mysql
推荐阅读
-
国外酷站欣赏:10个使用图像的网页设计作品_html/css_WEB-ITnose
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
CSS用法的一些总结_html/css_WEB-ITnose
-
这段代码在IE6下不正常,是IE6的bug么?_html/css_WEB-ITnose
-
请教各位师傅下面代码是怎么加密的?_html/css_WEB-ITnose
-
Material UI:非常强大的CSS框架_html/css_WEB-ITnose
-
请问高手,关于div+css的问题._html/css_WEB-ITnose
-
HTML之dl、dt、dd(也许这是你还没用过的标签,但它们非常实用)_html/css_WEB-ITnose
-
CSS等高布局的6种方式_html/css_WEB-ITnose
-
关于 CSS3 backface-visiable 与 overflow 属性的冲突_html/css_WEB-ITnose