一.在设置盒子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. SQL注入详解

    SQL是一种将SQL代码添加到输入参数中,传递到SQL服务器解析并执行的一种攻击手段 产生的原因 web开发人员无法保证所有输入都已经安全过滤 攻击者利用发送给SQL服务器的输入数据,构造可执行的SQ ...

  2. java 整型数组基本排序,冒泡,快速选择,插入,归并

    在学java泛型,于是把排序拿来练练手了 import java.util.Arrays; public class GenericArraySort { public static void mai ...

  3. 史上最完整的PS快捷键（绝对经典）

    快速恢复默认值 有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然后 ...

  4. C#图片水印代码整理

    这一段公司有个项目,客户要求上传的图片要带上自定义的水印.以前也经常和朋友讨论C#图片水印方面的问题,但是从来没有实际操作过.所以,借这次项目的机会也研究了一下C#图片水印的功能!本人参考的是disc ...

  5. C重定向

  6. ZooKeeper全面介绍

    ZooKeeper简介 ZooKeeper是分布式服务框架,主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等等.   ZooKe ...

  7. [转载] Redis集群搭建最佳实践

    转载自http://blog.csdn.net/sweetvvck/article/details/38315149?utm_source=tuicool 要搭建Redis集群,首先得考虑下面的几个问 ...

  8. crontab中使用python无法执行

    手动执行可以的,但是在crontab中却无法执行,在网上搜了一圈,给出的结论是将相对路径改成绝对路径. 改了之后解决这个问题. 是不是依赖某些环境变量,linux 里的 cron 只有几个基本的环境变 ...

  9. Verilog中变量位宽注意

    Verilog中,变量定义方式可以为:reg[位宽-1:0] 数据名:reg[位宽:1] 数据名.其他变量也类似. 以reg变量cnt为例,当cnt位宽为4时,可定义为reg[3:0] cnt,或者定 ...

  10. lua luaconf解读

    定义了一些跟平台相关的宏,明确指出一些不推荐使用的函数,如lua_cpcall.lua_strlen