• css 平时遇见CSS的一些小技巧 不定添加


    清除浮动的三种方法

    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.当前激活的箭头

    效果图:

     

    代码:

    1  border-right: 10px solid transparent;
    2  border-bottom: 8px solid #E8E8E8;
    3  border-left: 10px solid transparent;
    View Code

    完成可运行代码

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <style>
     8     /*箭头*/
     9     .emotions-text1{
    10         position:absolute;
    11         top:-8px;
    12         left: 13px;
    13         border-right: 10px solid transparent;
    14         border-bottom: 8px solid #E8E8E8;
    15         border-left: 10px solid transparent;
    16     }
    17     .emotions-text2{
    18         position:absolute;
    19         top:-6px;
    20         left: 13px;
    21         border-right: 10px solid transparent;
    22         border-bottom: 8px solid #ffffff;
    23         border-left: 10px solid transparent;
    24     }
    25     /*超链接*/
    26     #link {
    27         position: absolute;
    28         left: 93px;
    29         top: 35px;
    30         min-height: 80px;
    31         min-width: 300px;
    32         font-size: 12px;
    33         padding: 10px 20px 20px;
    34         -webkit-border-radius: 5px;
    35         -moz-border-radius: 5px;
    36         border-radius: 5px;
    37         display: block;
    38         background: none repeat scroll 0 0 #ffffff;
    39         border: 1px solid #e8e8e8;
    40     }
    41 </style>
    42 <body>
    43 <div id="link">
    44     <span><i class="emotions-text1" style=""></i></span>
    45     <span><i class="emotions-text2" style=""></i></span>
    46 </div>
    47 </body>
    48 </html>
    View Code
  • 相关阅读:
    【1】数据库表如何水平拆分和垂直拆分
    【JUC】JDK1.8源码分析之ReentrantReadWriteLock
    【1】【JUC】JDK1.8源码分析之ArrayBlockingQueue,LinkedBlockingQueue
    【JUC】CopyOnWriteArrayList
    <T extends Comparable<? super T>>什么意思
    深拷贝和浅拷贝及实现
    序列化和反序列化的底层实现原理
    willMoveToParentViewController和didMoveToParentViewController
    自定义 ViewController 容器转场
    iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)
  • 原文地址:https://www.cnblogs.com/qiangmin/p/3851938.html
Copyright © 2020-2023  润新知