11-[CSS]-margin塌陷,

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

4

5

原文地址:https://www.cnblogs.com/venicid/p/9126293.html

时间: 2024-11-11 02:08:22

11-[CSS]-margin塌陷,的相关文章

margin塌陷与合并问题

本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277 margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题 这个问题是一个经典的浏览器内核问题.具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值. 因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题.

触发bfc解决父子元素嵌套垂直方向margin塌陷问题

首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; margin-top: 100px; margin-left: 50px; background-color:black; } <div class="wrapper"> <

6.margin塌陷问题

当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin塌陷</title> <style type="text/css"> *

解决margin塌陷和margin合并

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,

margin塌陷现象

如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style>/*margin塌陷*/ .box1 { wi

HTML CSS——margin和padding的学习

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距 代码2-1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &

HTML CSS——margin与padding的初学

下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距.(用代码来说明) <!DOCTYPE

CSS margin属性取值

margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-top <div id="negtive_top"> <div>margin-top: -50px;自身向上移动50px</div> </div> CSS #negtive_top{ background-color: green; borde

Web前端从入门到精通-11 css简介

欢迎大家回来,上节课我们又说了margin的一个bug 那就是子元素的margin-top会传递给父元素 解决方案也已经给出来了,在此不再废话 此外还说了默认样式的清零,这个的话我个人感觉无所谓了 平时自己写代码测试的时候就直接上*{margin:0; padding:0;} 之前我们讲解盒模型的时候一直都是拿div举例子 那么我们知道,div天生就是个块元素 所以我们之前见到的那一堆margin.padding的规则都是针对块元素的 那不知道大家有没有自己测试过内嵌元素的盒模型 我们接下来就和