css 平时遇见CSS的一些小技巧 不定添加
2014-07-17 20:13
239 查看
清除浮动的三种方法
1.使用clear 样式清除
样例:
.clear-float {clear:both;}
clear 属性是 CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,忽略其 margin-top 设置。这样,父容器高度未设定(值是 auto)时,由于定义的清理浮动样式元素所在位置处于浮动元素之下,容器计算后的实际高度就包含了浮动元素。
2.使用伪元素:after 清除
样例:.after-clear-float :after{content:””; display:block; clear:both;}
:after 伪元素是在 CSS 2 规范内提出的,IE 6/7 并不支持。它的作用是在指定该伪元素元素内,所有子元素最后自动生成一个伪元素,并可以为这个伪元素设定样式。在设定样式中,使用 clear 属性即可达到与手工添加元素指定清理的效果。
3.使用 overflow 清除
样例:
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}
overflow 样式值为非visilbe 时,实际上是创建了CSS 2.1 规范定义的Block Formatting Contexts。创建了它的元素,会重新计算其内部元素位置,从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩,在 CSS 3 草案中被变更为名词Root Flow,顾名思义,是创建了一个新的根布局流,这个布局流是独立的,不影响其外部元素的。实际上,这个特性与早期IE 的hasLayout 特性十分相似。
注意兼容问题:
Block Formatting Contexts 概念是在CSS 2.1 规范内被提出。因此IE6/7 中并不被支持,这是由于之前的IE 版本仅完全实现了CSS 1 规范标准,以及一部分CSS 2.0 规范。
在IE 7 中,overflow 值为非visible 时,可以触发hasLayout 特性。这同样使得IE 7 同样可以使容器包含浮动元素。此部分详细内容可参考:RM8002: 不在IE6 IE7 IE8(Q) 中触发
4.使用 display:table 清除
样例:
.table-clear-float {display:table}
或者.table-clear-float {display:table-cell}
hasLayout 并在其他浏览器中创建Block Formatting Context 的元素在各浏览器中的表现会有差异
当元素display 值被设定为table 或table-cell 时,同样也创建了CSS 2.1 规范定义的Block Formatting Contexts。这样父容器也就包含了浮动元素高度。
注意兼容问题:
除去Block Formatting Contexts 在IE 6/7 中的兼容性外,display:talbe 系列样式设定也不在IE6/7 的支持范围之内。此部分详细内容可参考:RM8001:
各浏览器对'display' 特性值的支持程度不
5.当前激活的箭头
效果图:
View Code
1.使用clear 样式清除
样例:
.clear-float {clear:both;}
clear 属性是 CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,忽略其 margin-top 设置。这样,父容器高度未设定(值是 auto)时,由于定义的清理浮动样式元素所在位置处于浮动元素之下,容器计算后的实际高度就包含了浮动元素。
2.使用伪元素:after 清除
样例:.after-clear-float :after{content:””; display:block; clear:both;}
:after 伪元素是在 CSS 2 规范内提出的,IE 6/7 并不支持。它的作用是在指定该伪元素元素内,所有子元素最后自动生成一个伪元素,并可以为这个伪元素设定样式。在设定样式中,使用 clear 属性即可达到与手工添加元素指定清理的效果。
3.使用 overflow 清除
样例:
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}
overflow 样式值为非visilbe 时,实际上是创建了CSS 2.1 规范定义的Block Formatting Contexts。创建了它的元素,会重新计算其内部元素位置,从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩,在 CSS 3 草案中被变更为名词Root Flow,顾名思义,是创建了一个新的根布局流,这个布局流是独立的,不影响其外部元素的。实际上,这个特性与早期IE 的hasLayout 特性十分相似。
注意兼容问题:
Block Formatting Contexts 概念是在CSS 2.1 规范内被提出。因此IE6/7 中并不被支持,这是由于之前的IE 版本仅完全实现了CSS 1 规范标准,以及一部分CSS 2.0 规范。
在IE 7 中,overflow 值为非visible 时,可以触发hasLayout 特性。这同样使得IE 7 同样可以使容器包含浮动元素。此部分详细内容可参考:RM8002: 不在IE6 IE7 IE8(Q) 中触发
4.使用 display:table 清除
样例:
.table-clear-float {display:table}
或者.table-clear-float {display:table-cell}
hasLayout 并在其他浏览器中创建Block Formatting Context 的元素在各浏览器中的表现会有差异
当元素display 值被设定为table 或table-cell 时,同样也创建了CSS 2.1 规范定义的Block Formatting Contexts。这样父容器也就包含了浮动元素高度。
注意兼容问题:
除去Block Formatting Contexts 在IE 6/7 中的兼容性外,display:talbe 系列样式设定也不在IE6/7 的支持范围之内。此部分详细内容可参考:RM8001:
各浏览器对'display' 特性值的支持程度不
5.当前激活的箭头
效果图:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> /*箭头*/ .emotions-text1{ position:absolute; top:-8px; left: 13px; border-right: 10px solid transparent; border-bottom: 8px solid #E8E8E8; border-left: 10px solid transparent; } .emotions-text2{ position:absolute; top:-6px; left: 13px; border-right: 10px solid transparent; border-bottom: 8px solid #ffffff; border-left: 10px solid transparent; } /*超链接*/ #link { position: absolute; left: 93px; top: 35px; min-height: 80px; min-width: 300px; font-size: 12px; padding: 10px 20px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; background: none repeat scroll 0 0 #ffffff; border: 1px solid #e8e8e8; } </style> <body> <div id="link"> <span><i class="emotions-text1" style=""></i></span> <span><i class="emotions-text2" style=""></i></span> </div> </body> </html>
View Code
相关文章推荐
- css的一些小技巧
- CSS添加边框小技巧
- CSS的一些小技巧
- 整理一些css在使用中的小技巧(进行中)
- css学习的一些小技巧
- 一些css有关处理浏览器兼容问题上的小技巧
- css一些小技巧收集(未完待续)
- HTML+CSS笔记 CSS中级 一些小技巧
- css 一些会用到的小技巧
- 收集的一些DIV+CSS小技巧
- CSS的一些小技巧
- 第八章 开始学习CSS 添加一些样式
- 移动端CSS一些小技巧
- iOS 代码开发的小技巧(在别人博客的继承上添加一些方法)
- css+div开发网站的一些小技巧
- 一些易忘记的常识--CSS,不定期添加
- CSS中的一些小技巧
- 一些CSS兼容的小技巧
- 关于css中的一些小技巧
- 一些平时能用到的CSS效果(ZT+YC)