HTML&CSS基础-完善clearfix

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.抛出问题

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>完善clearfix</title>

        <style type="text/css">

            .box1{

                width: 300px;

                height: 300px;

                background-color: red;

            }

            .box2{

                width: 300px;

                height: 200px;

                background-color: yellow;

                /**

                 *     子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。

                 *     使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。

                 */

                margin-top: 100px;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.使用空table解决问题

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>完善clearfix</title>

        <style type="text/css">

            .box1{

                width: 300px;

                height: 300px;

                background-color: red;

            }

            .box1:before{

                content: "";

                /*将一个元素设置为表格显示*/

                display: table;

            }

            .box2{

                width: 300px;

                height: 200px;

                background-color: yellow;

                /**

                 *     子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。

                 *     使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。

                 */

                margin-top: 100px;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

三.完善clearfix的最终版本

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>完善clearfix</title>

        <style type="text/css">

            .box1{

                width: 300px;

                height: 300px;

                background-color: red;

            }

            .box2{

                width: 300px;

                height: 200px;

                background-color: yellow;

                /**

                 *     子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。

                 *     使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。

                 */

                margin-top: 100px;

            }

            .box3{

                border: 10px blue solid;

            }

            .box4{

                width: 100px;

                height: 100px;

                background-color: deeppink;

                float: left;

            }

            /**

             *     解决父子元素的外边距重叠

             *

             *     .box1:before{

             *         content: "";

             *          将一个元素设置为表格显示

             *         display: table;

             *     }

            /**

             *     解决父元素高度塌陷

             *

             *     .clearfix:after{

             *         content: "";

                *         display: block;

             *         display: table;

             *         clear: both;

             *     }

             *

             /

             /**

              *  经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

              */

             .clearfix:after, .clearfix:before{

                 content: "";

                 display: table;

                 clear: both;

             }

             /*兼容IE6*/

             .clearfix{

                 zoom: 1;

             }

        </style>

    </head>

    <body>

        <div class="box3 clearfix">

            <div class="box4"></div>

        </div>

        <div class="box1 clearfix">

            <div class="box2"></div>

        </div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果


kafka常见异常汇总的更多相关文章

  1. flume常见异常汇总以及解决方案

    flume常见异常汇总以及解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际生产环境中,我用flume将kafka的数据定期的往hdfs集群中上传数据,也遇到过一系列的坑 ...

  2. java中常见异常汇总（根据自己遇到的异常不定时更新）

    1.java.lang.ArrayIndexOutOfBoundsException:N(数组索引越界异常.如果访问数组元素时指定的索引值小于0,或者大于等于数组的长度,编译程序不会出现任何错误,但运 ...

  3. spark常见异常汇总

    spark常见异常汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 温馨提示:   如果开发运行spark出现问题啦,可能需要运维这边做一些调优,也可能是开发那边需要修改代码.到 ...

  4. 大数据常见端口汇总-hadoop、hbase、hive、spark、kafka、zookeeper等（持续更新）

    常见端口汇总:Hadoop:        50070:HDFS WEB UI端口    8020 : 高可用的HDFS RPC端口    9000 : 非高可用的HDFS RPC端口    8088 ...

  5. salesforce 零基础学习（五十四）常见异常友好消息提示

    异常或者error code汇总:https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_calls_con ...

  6. 【转】Hibernate 常见异常

    转载地址:http://smartan.iteye.com/blog/1542137 Hibernate 常见异常net.sf.hibernate.MappingException        当出 ...

  7. Spring10种常见异常解决方法

    在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...

  8. Hibernate 常见异常

    Hibernate 常见异常net.sf.hibernate.MappingException        当出现net.sf.hibernate.MappingException: Error r ...

  9. 李洪强iOS开发之OC常见错误汇总

    // //  main.m //  16 - 常见错误汇总 // //  Created by vic fan on 16/7/13. //  Copyright © 2016年 李洪强. All r ...

随机推荐

  1. git 命令使用集锦

    使用git mv重命名文件,而不是delete然后再add文件. git format常用命令: git format-patch -4 //从当前分支最新提交点往下共生成4个补丁 git forma ...

  2. python之旅第八篇--异常

    判断类与对象关系 isinstance #判断对象obj是否是由cls类创建的 class Foo(object): pass obj = Foo() print isinstance(obj,Foo ...

  3. [APIO 2009] Atm

    传送门:>Here< 题意:给出一个有向图(有环),每个点有点权.从点S出发,经过每个点Tot可以加上点权,点可以经过多次,然而点权不能重复加多次.先要求走到某个终点E时点权最大.先要求在 ...

  4. Matplotlib学习---用matplotlib画热图（heatmap）

    这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://datasets.flowingdata.com/ppg2008.csv ...

  5. swagger如何测试List类型参数

    使用swagger 时,往往会用到类似下面这样的注解 @ApiImplicitParam(name = "id", value = "主键", dataType ...

  6. 缺省源和 Vim 配置

    缺省源 #include <bits/stdc++.h> #define x first #define y second #define pb push_back #define mp ...

  7. 洛谷P5069 [Ynoi2015]纵使日薄西山（树状数组，set）

    洛谷题目传送门 一血祭 向dllxl致敬! 算是YNOI中比较清新的吧,毕竟代码只有1.25k. 首先我们对着题意模拟,寻找一些思路. 每次选了一个最大的数后,它和它周围两个数都要减一.这样无论如何, ...

  8. Dividing the Path POJ - 2373（单调队列优化dp）

    给出一个n长度的区间,然后有一些小区间只能被喷水一次,其他区间可以喷水多次,然后问你要把这个区间覆盖起来最小需要多少喷头,喷头的半径是[a, b]. 对于每个只能覆盖一次的区间,我们可以把他中间的部分 ...

  9. UVA 11149-Power of Matrix（等比矩阵求和）

    给定一个矩阵A 要求A + A^2 + A^3 +…. A^k: 对于到n的等比矩阵求和 如果n是偶数:  如果n是奇数:  #include<stdio.h> #include<s ...

  10. [NOI2015]寿司晚宴（状压dp）

    为了庆祝NOI的成功开幕,主办方为大家准备了一场寿司晚宴.小G和小W作为参加NOI的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了n−1种不同的寿司,编号1,2,3,⋯,n-1,其中第种 ...