高效的CSS代码(2)

简介: ——阅读笔记,欢迎纠错^_^ 内容比较零散。。。。。 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: /*意思就是最外面的一层是父容器,给他加上清除浮动的功能,clearfix的代码再高效的CSS代码(1)中有*/ 2.

——阅读笔记,欢迎纠错^_^

内容比较零散。。。。。

1.让浮动元素的父容器根据元素的高度而自适应高度的方法:

<div class="clearfix"><div class="fl"></div></div>

/*意思就是最外面的一层<div></div>是父容器,给他加上清除浮动的功能,clearfix的代码再高效的CSS代码(1)中有*/

2.再写代码前不是要先分析一下页面的模块吗,模块的划分也能间接影响代码的效率,写CSS代码划分模块可以遵循:

  1)模块与模块之间尽量不要包含相同的部分,若有相同的部分应将其提出并分成一个独立的模块;

  2)尽量提高模块的重用度,就是模块再保证模块数量尽可能少的原则下做到尽可能简单以提高重用度;

3.想必大家都会有时候命名多的时候就不知道怎么给盒子取名字了

  1)峰驼式:从第二个单词开始讲首字母大写化;(用于区别不同单词)

  2) 划线式:用_或者-来连接命名;(用于表明从属关系)

命名尽量体现从属关系比较好

这两张命名方法不仅仅再CSS中使用再JS或者C等语言也阔以用啊,小杂就只学了两种。。。勿喷。。。。还在努力啊!

PSPSPS:如果是团队合作写代码的话,再写之前团队商量一下,每个人都有自己一个独特的标示符作为前缀避免团队合作代码的冲突啊!!!

3.接下去说个小杂使用后颇有心得而且感觉真真阔以的!——多尝试使用类的组合

!!!记得有段时间再写多个页面,代码命名不言而喻乱七八糟,。。。后来经过类的组合修改。。。代码量大幅度减少,看起来也是一目了然!!!!

4.最好统一使用margin-top或者margin-bottom

为啥?我之前也是乱用,后来再调试浏览器兼容性时候就是个蛋!,经过修改统一margin后竟然好了!具体愿意为啥。。百度有哦~~~

如果不确定模块的上下margin特别稳定,最好不要讲他写到模块里,而是使用类的组合,单独的为上下margin挂用编剧的原子类,而且!!!最好模块不要混用margin-top和margin-bottom,貌似这个后来又修改了只用padding的。。貌似更好;

 

作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
4月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
164 4
|
24天前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
35 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
4月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
46 0
|
25天前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
3月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
52 5
|
2月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
46 0
|
4月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
3月前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
45 0
|
3月前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
43 0