1、margin塌陷

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin的塌陷</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        .box1{

            width: 300px;

            height: 200px;

            background-color: red;

            margin-bottom: 20px;

        }

        .box2{

            width: 400px;

            height: 300px;

            background-color: green;

            margin-top: 50px;

        }

        span{

            background-color: red;

        }

        span.a{

            margin-right: 20px;

        }

        span.b{

            margin-left: 20px;

        }

    </style>

</head>

<body>

    <div class="father">

        <!-- 当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，

        那么我们称这种现象叫塌陷

        -->

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

        <div class="box2"></div>

    </div>

    <span class="a">内容</span>

    <span class="b">内容</span>

</body>

</html>

2、margin:0 auto; 标准流盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin:0 auto</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        div{

            width: 780px;

            height: 50px;

            background-color: red;

            /*水平居中盒子*/

            margin: 0 auto;

            /*margin-left: auto;

            margin-right: auto;*/

            text-align: center;

            float: left;

        }

    </style>

</head>

<body>

    <div>

        文字

    </div>

</body>

</html>

3.善于使用父padding，而不是使用margin

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        .father{

            width: 270px;

            height: 270px;

            background-color: blue;

            padding-top: 30px;

            padding-left: 30px;

            border: 5px solid red;

        }

        .xiongda{

            width: 100px;

            height: 100px;

            background-color: orange;

            /*margin-left: 30px;*/

            /*margin-top: 30px;*/

        }

    </style>

</head>

<body>

    <!-- 因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行

    所以父亲就掉下来

     -->

    <div class="father">

        <div class="xiongda">

        </div>

    </div>

</body>

</html>

4

5

12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding的更多相关文章

  1. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  2. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  3. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  4. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  5. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  6. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

  7. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  8. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  9. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

随机推荐

  1. Hive的介绍及安装

    简介 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件 映射为一张数据库表,并提供类 SQL 查询功能. 本质是将 SQL 转换为 MapReduce 程序. Hive组件 ...

  2. KHFlatButton

    KHFlatButton https://github.com/kylehorn/KHFlatButton 效果: 对于自己做demo来说,每次设置button就不用这么折腾了,几句话就行了,非常爽: ...

  3. UNIX高级环境编程（8）进程环境（Process Environment）- 进程的启动和退出、内存布局、环境变量列表

    在学习进程控制相关知识之前,我们需要了解一个单进程的运行环境. 本章我们将了解一下的内容: 程序运行时,main函数是如何被调用的: 命令行参数是如何被传入到程序中的: 一个典型的内存布局是怎样的: ...

  4. HTTP 头 Connection:close 作用

    有的网站会在服务器运行一段时间后down掉,有很多原因可能造成这种现象:比如tomcat堆和非堆内存设置不足,程序没能释放内存空间造成内存溢出,或者某些进程一直运行没能释放,造成cup资源大量消耗. ...

  5. [BZOJ 5252][LOJ 2478][九省联考2018] 林克卡特树

    [BZOJ 5252][LOJ 2478][九省联考2018] 林克卡特树 题意 给定一个 \(n\) 个点边带权的无根树, 要求切断其中恰好 \(k\) 条边再连 \(k\) 条边权为 \(0\) ...

  6. python第十五课——全局变量and局部变量

    全局变量&局部变量: 全局变量的特点: 1).直接定义在.py文件中(函数外)的变量(全局位置) 2).作用域比较大,可以被此文件中的任何函数所使用 局部变量的特点:1).定义在函数内部(函数 ...

  7. 【洛谷】【动态规划/二维背包】P1855 榨取kkksc03

    [题目描述:] ... (宣传luogu2的内容被自动省略) 洛谷的运营组决定,如果...,那么他可以浪费掉kkksc03的一些时间的同时消耗掉kkksc03的一些金钱以满足自己的一个愿望. Kkks ...

  8. P4197 Peaks

    题目描述 在Bytemountains有N座山峰,每座山峰有他的高度\(h_i\).有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问询问从点 ...

  9. macaca自动化初体验

     1.安装#cnpm i -g macaca-cli macaca-ios# Install Tools And Driver2.检查安装环境#macaca doctor ANT_HOME未设置,下载 ...

  10. 【原创】大叔经验分享（53）kudu报错unable to find SASL plugin: PLAIN

    kudu安装后运行不正常,master中找不到任何tserver,查看tserver日志发现有很多报错: Failed to heartbeat to master:7051: Invalid arg ...