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. POJ 1017 最少包裹

    参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6414760.html Packets Time Limit: 1000MS   Memory Li ...

  2. SQLSERVER 维护计划无法删除

    数据对网站运营或者企业运营是至关重要的,所以,我们在使用数据库的时候,为了保证数据的安全可靠性,都会做数据库备份,很显然,这个备份,我们不可能每天都去手动备份,SQLServer 数据库就可以提供数据 ...

  3. UOJ273 [清华集训2016] 你的生命已如风中残烛 【数学】

    题目分析: 把$0$卡牌看成$-1$.题目要求前缀和始终大于等于$1$. 最后添加一个$-1$,这样除了最后一位之外大于等于1,最后一位等于0. 构造圆排列.这样的话一个圆排列只有一个满足的情况,然后 ...

  4. HDU - 3917（朴素LIS + 最大流）

    题意: 求出所有的最长上升子序列的个数且每个元素只能用一次 解析: 呵...呵...呵..呵..emm... 再见 我死了...wa了15发之后...原来不能用~  要用 != EOF 这题算水题吧. ...

  5. sublime3添加verilog自动补全代码段

    前言 sublime默认的verilog自动补全十分垃圾,不过提供了代码段这个功能,你可以自己写个重用率高的代码段减轻工作量.写个模板当tb也很爽啦. 流程 1.打开user文件夹,创建verilog ...

  6. Linux 源码安装 Python3

    下载源码包https://www.python.org/downloads/ 解压(以3.64版本为例)wget https://www.python.org/ftp/python/3.6.4/Pyt ...

  7. hdu5017 Ellipsoid (模拟退火)

    Ellipsoid 原题链接 题目描述 给定.一个要满足的椭球的方程\(ax^2+by^2+cz^2+dyz+exz+fxy=1\) 求球面上一个点到原点\((0,0,0)\)的距离最小. 有多组输入 ...

  8. Hdoj 2045.不容易系列之(3)—— LELE的RPG难题 题解

    Problem Description 人称"AC女之杀手"的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多"Cole"(LELE的粉丝,即"可乐 ...

  9. SAM练习记录

    SAM练习记录 洛谷 P1368 工艺 其实是最小表示法裸题 倍长后建SAM跑最小的边走|S|步即可 Code CF 235 C. Cyclical Quest 对主串建SAM 然后每个串倍长,跑的时 ...

  10. luogu5021 [NOIp2018]赛道修建 (二分答案+dp(贪心?))

    首先二分一下答案,就变成了找长度>=m的 不相交的路径的个数 考虑到在一个子树中,只有一个点能出这个子树去和别的点搞 所以我这个子树里尽量自我满足是不会有坏处的 而且要在自我满足数最大的条件下, ...