一.在设置盒子div的子元素的外边框margin-top，子元素属性不起作用，父元素下沉：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box1 "></div>

    </div>

</body>

</html>

　子元素div设置了margin-top为20px；结果为：　

没有起作用，而是父元素下沉了，原因是在垂直方向上，子元素必须找到父元素的位置信息，或边界或大小。

解决的办法一般有三种：
1.为父元素设置边框：由于在不需要边框的时候，为了清除塌陷而设置边框，增加了额外的操作和计算的麻烦，一般较少使用。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

            border: 1px solid green;  # 设置边框

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

2.设置元素的溢出修剪，overflow:hidden。说明：设置溢出修建隐藏后，可以找到盒子的边界，但这种方法会丢失一部分显示的内容，很少使用。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

            overflow: hidden;   # 设置元素溢出隐藏

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin: 20px;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

　　3.设置伪类，利用Class：before和class：after伪类设置空的内容来占位，使得子元素可以找到定位参考物。（最常使用！）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin: 20px;

        }

        /* 设置伪类before */

        .clearfix：before{

            content: "";

            display: table;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

　三种方式修改后的效果：

　

前端笔记---塌陷top的更多相关文章

  1. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  2. 写给后端的前端笔记：定位（position）

    写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...

  3. 前端笔记-html

    前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...

  4. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  5. 写给后端的前端笔记：浮动（float）布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

  6. 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事

      一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...

  7. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）

    笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...

  8. 前端笔记之CSS（下）浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  9. 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

随机推荐

  1. 项目实战1—LNMP的搭建、nginx反向代理和缓存等的实现

    实战一:搭建lnmp及类小米等商业网站的实现 环境:关闭防火墙,selinux 1.安装包,开启服务 yum -y install nginx mariadb-server php-fpm php-m ...

  2. 为JS内置对象添加常用方法

    1.字符串全部替换: String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm ...

  3. 异步 HttpContext.Current实现取值的方法(解决异步Application,Session,Cache...等失效的问题)

    在一个项目中,为了系统执行效率更快,把一个经常用到的数据库表通过dataset放到Application中,发现在异步实现中每一次都会出现HttpContext.Current为null的异常,后来在 ...

  4. [转载] Hibernate与 MyBatis的比较

    转载自http://blog.csdn.net/firejuly/article/details/8190229 最近做了一个Hibernate与MyBatis的对比总结,希望大家指出不对之处. 第一 ...

  5. 调试利器：SSH隧道

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 本文作者:ivweb 吴浩麟 原文出处:IVWEB社区 未经同意,禁止转载 在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需 ...

  6. LayoutInflater 三种获得方式

    LayoutInflater 作用是从外部加载一个xml布局文件. 获得 LayoutInflater 实例的三种方式: 1.LayoutInflater inflater = getLayoutIn ...

  7. JS构造函数模式

    构造函数是可以创建特定类型对象的函数,可以接受参数定义函数成员.如果之前做过java比较好理解,举个例子: function exampleFunction(arg1, arg2, arg3){ th ...

  8. This package contains sshd, pcal, mysql-client on Ubuntu14:04

    [How to build:]cd /home/ops/work/demo/docker/aws/ubuntutouch Dockerfiledocker build -t ubuntu_base:v ...

  9. 内网神器-Bettercap

    安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~#  apt-get install bettercap 安装完成后查看一下帮 ...

  10. UITextField的使用小技巧

    [tf setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"];//修改placeHolder ...