CSS总结之易错易忘点
来源:互联网 发布:北风网大数据2017视频 编辑:程序博客网 时间:2024/05/21 19:23
一,清除浮动;
二,设置margin:0 auto;后,元素仍不居中;
一, clear float
作为一个前端菜鸟,常常在为了让两个div水平排列,或者想让一些元素在其父元素框内靠左或靠右时,使用css float 属性。而又常常因为忘记 清除浮动 而导致看到自己做出来界面时,实力懵逼加不解,这才知道“样式表”也不是好惹的。
因为给元素设置了float属性之后,会自动生成块级框,不管元素本身是什么是何种元素;其次浮动框不会在文档的普通流中(从文档流中脱离,无法撑开父元素)。这也是为什么忘记清楚浮动会导致做出来的界面和预期不一样的原因。
经过各方参考了解了清楚浮动方法,主要是参考w3cplus 上的解决方案。
w3cplus Clear Float
- clear:both;
clear属性规定元素的哪一侧不允许其他浮动元素,而属性值both,表示在元素的左右两侧均不允许出现浮动元素。
使用这种方法清除浮动的具体操作时,给浮动元素添加一个额外的兄弟元素div或者br,并定义样式为”clear: both”。
.clear { clear:both; /*兼容IE,不让ie具有一定的空间*/ height: 0; line-height: 0; font-size: 0; }
一般来讲记住此方法的核心,clear:both;就可以了,但是作为前端应可能的处理浏览器兼容性问题,而且后面三个属性并不难理解,所以我每次都会写上。这种方法,有一个我觉得不完美的地方,就是添加了一个额外的元素只是为了清除浮动。
2. overflow
.includeFloat {overflow: auto;zoom: 1;/*触发IE浏览器的haslayout,解决ie下的浮动*/}
overflow属性指出如果内容溢出一个元素的框发生什么。其属性值,auto,hidden都可用来清除浮动,但前者据说对seo比较友好(前端好像老会提到这个SEO,打算之后写一篇来探究一下)。
在这里我第一次看到zoom属性,不明白是什么意思,一番网上冲浪之后,我了解到这是一个ie专有的属性,用来解决一些,ie兼容性问题。
关于zoom,传送门
上面的清除浮动据说还可以,这样写:
.includeFloat { o\verflow: auto;/*仅ie6以下不识别*/ }* html .includeFloat { height: 1%;/*ie5-6*/ }
3. clearfix
这种方法据说是目前最拉风的一种清除浮动方法,我认为主要是因为此方法用到了css伪类。
.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix: after { clear: both;}.clearfix { /*ie<8*/ zoom: 1;}
这种方法的原理和第一种clear:both;一样。
上面这种方法有个优化升级版本,也是我现在在使用的:
.clearfix:before,.clearfix:after { content: ""; dispaly: table;}.clearfix:after { clear: both; overflow: hidden;}.clearfix { zoom: 1;}
这段代码我每次 在重置css的时候就会写上了,一来是怕自己忘记了,二来是在需要清除浮动的时候,直接添加一个clearfix类名就可以了,不需要再去写css代码了。
二,设置margin:0 auto;后,元素仍不居中
设置margin:0 auto;后,元素仍不居中原因应该是忘记给元素设置width值,
刚开始使用css时,发现给一个元素设置其左右外边距值为auto时,居然可以让元素居中,也是欣喜了好一阵,毕竟刚开始时,感觉什么让元素水平,垂直居中,分分钟让我生无可恋。(传送门 大神带我玩转居中)但是使用这个属性时,我老是忘记设置元素的width值,而且往往不想给元素一个固定的宽度,所以也就看不到居中的效果。
好啦,这次先记录到这,see you next time!
如有错误,请多指教。
- CSS总结之易错易忘点
- J2EE 之 css 总结
- css之BFC总结
- CSS总结之background
- CSS基础知识总结之基本概念
- css全总结之布局
- css之滑动门总结与心得
- 【牛腩新闻发布系统】之CSS总结
- css样式之_class和style总结
- 牛腩新闻发布系统之Css总结
- css样式基础之选择器的总结
- CSS总结--百度面试之表格排序
- CSS基础知识总结之颜色、单位
- CSS之图片水平垂直居中总结
- Web前端H5之CSS样式总结
- 【CSS】CSS样式总结
- 【CSS+DIV】CSS总结
- CSS总结
- dlmalloc 2.8.6 源码详解—[6]调试分析
- Opencart 扩展安装功能分解
- Java 权限修饰符
- Linux指令(三)
- laravel和数据库的那点事2
- CSS总结之易错易忘点
- 关于Markdown
- 以太坊开发--geth的使用入门
- 基于TCP客户端和服务器的I/O多路复用
- [ATPG]解读report_nonscan_cells -summary得到的report
- HIVE 介绍
- C语言中fread(),fwrite(),fseek()用法和功能
- 代码混淆详解
- 正则表达式