一.在设置盒子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. 在微信端使用video标签，播放结束会出现QQ浏览器推荐视频的解决办法（vue）

    会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...

  2. Python学习--语句

    一.print 和 import print 打印多个表达式,用逗号隔开 >>> print 'ab','cd' ab cd import import somemodule fro ...

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

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

  4. windows下配置php + mysql环境

    一.php服务器环境:apache + php安装与配置 1.下载apache.(httpd.apache.com) apache官网只提供源码,编译文件会有跳转到别的网站的下载地址. 如需VC9或V ...

  5. .net core 在视图中快速获取路由（Areas、Controller、Action）

    我们在.net core中,经常碰到需要获取当前的Areas.Controller.Action,于是小编就扩展了Html,这样即可使用 Html.***来获取这些信息. 具体扩展类如下: publi ...

  6. db2中left()函数和right()函数对应oracle中的substr()函数

     DB2 LEFT.RIGHT函数 语法:LEFT(ARG,LENGTH).RIGHT(ARG,LENGTH) LEFT.RIGHT函数返回ARG最左边.右边的LENGTH个字符串,ARG可以是CHA ...

  7. P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    题目描述 给出n个物品,体积为w[i],现把其分成若干组,要求每组总体积<=W,问最小分组.(n<=18) 输入格式: Line 1: N and W separated by a spa ...

  8. 安装apache

    1.安装依赖软件 pcre gcc expat apr(Apache portable Run-time libraries,Apache可移植运行库) apr-util [root@localhos ...

  9. Android Weekly Notes Issue #285

    November 26th, 2017 Android Weekly Issue #285 本周包含好几篇Kotlin的文章,如通过Property Delegate实现SharedPreferenc ...

  10. MySQL的外键，修改表，基本数据类型，表级别操作，其他（条件，通配符，分页，排序，分组，联合，连表操作）

    MySQL的外键,修改表,基本数据类型,表级别操作,其他(条件,通配符,分页,排序,分组,联合,连表操作): a.创建2张表 create table userinfo(nid int not nul ...