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. Vuex以及axios

    Vuex 简介 vuex是一个专门为Vue.js设计的集中式状态管理架构. 状态? 我们把它理解为在data中需要共享给其他组件使用的部分. Vuex和单纯的全局对象有以下不同: 1.Vuex 的状态 ...

  2. centos安装php7.2环境

    centos安装php7.2环境 安装apache服务 yum -y install httpd 首先获取rpm: rpm -Uvh https://dl.fedoraproject.org/pub/ ...

  3. 第一天：学会如何在pycharm上编写第一条robotframework用例

    ---恢复内容开始--- 1.python环境的安装和依赖包的下载

  4. Sudoku POJ - 3076

    Sudoku Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 5769   Accepted: 2684 Descripti ...

  5. 牛客网noip集训4

    T1 (A)[https://www.nowcoder.com/acm/contest/175/A] 给出 l, r, k,请从小到大输出所有在 [l, r] 范围内,能表示为 k 的非负整数次方的所 ...

  6. [luogu3391][bzoj3223]文艺平衡树【splay】

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 分析 ...

  7. 不是说记住rm -rf的教训就够了

    不是说记住rm -rf的教训就够了 李阿玲· 12 天前 2013年,我在同步CTAN镜像的时候,在/home下我的文件夹里面操作了下面的命令: rsync -av --delete rsync:// ...

  8. 解决mysql配置文件my.cnf添加max_connections不生效

    问题描述: 最新为了方便测试,通过mysql官方指定的yum源安装了mysql5.6.40,在向mysql的配置文件my.cnf添加max_connections=3600后,重启mysql后发现不生 ...

  9. 利用httpd配置虚拟目录创建下载站点

    应用环境:通常放置一些文件来提供下载. 配置环境:centos7 //已经关闭Selinux和Firewall 需求假设:在网页输入主机IP并进入,会显示主机目录/home/share/的文件以提供下 ...

  10. Libre OJ 144、145 （DFS序）

    部分参考自博客:https://blog.csdn.net/hpu2022/article/details/81910490 在许多问题中,由于树结构复杂通常会导致问题很棘手,因为其实非线性结构,操作 ...