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. 洛谷P2822 组合数问题

    输入输出样例 输入样例#1: 1 2 3 3 输出样例#1: 1 输入样例#2: 2 5 4 5 6 7 输出样例#2: 0 7 说明 [样例1说明] 在所有可能的情况中,只有C_2^1 = 2C21 ...

  2. 【XSY1162】鬼计之夜 最短路

    题目描述 给你一个\(n\)个点\(m\)条边的有向图,有\(k\)个关键点.求一条最短的从一个关键点到另一个关键点的路径. \(n,m,k\leq 100000\) 题解 跑\(k^2\)次最短路显 ...

  3. mysql 导入sql 2006 - mysql server has gone away 导入

    解决办法:找到你的mysql目录下的my.ini配置文件,加入以下代码 max_allowed_packet=500M wait_timeout=288000 interactive_timeout ...

  4. 在VS中安装nuget离线包nupkg文件

    1.下载 nupkg文件 2.打开VS,工具,选项,如下图,复制右侧圈圈地址,把下载文件复制丢进去 3.管理当前解决方案的nuget包 n 4.左侧选择你下载的包名,在右侧选择需要安装在哪一层项目,点 ...

  5. 【正睿oi省选十连测】第一场

    四小时写了两个暴力??自闭 [原来这就是神仙们的分量Orz rank 56/75 可以说是无比垃圾了 下周目标:进步十名?[大雾 T1 题意:有n个点的图 点有点权Ai 也有点权Bi = A_1 + ...

  6. luogu1397 [NOI2013]矩阵游戏 (等比数列求和)

    一个比较显然的等比数列求和,但有一点问题就是n和m巨大.. 考虑到他们是在幂次上出现,所以可以模上P-1(费马小定理) 但是a或c等于1的时候,不能用等比数列求和公式,这时候就要乘n和m,又要变成模P ...

  7. Linux下VMware在更新完内核无法启动

    该问题尚未解决,我已经换Oracle VM VirtualBox

  8. LOJ#2542 随机游走

    解:首先minmax容斥变成经过集合t的第一个点就停止的期望步数.对于某个t,设从x开始的期望步数为f(x) 如果x∈t,f(x) = 0.否则f(x) = ∑f(y) / in[x] + 1 树上高 ...

  9. 微型 ORM-FluentData 实例详解

    https://blog.csdn.net/tai532439904/article/details/77879767 环境要求 .NET 4.0. 支持数据库 MS SQL Server 使用本地. ...

  10. vue中显示静态图片怎么引用

    有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...