margin的用法

margin塌陷问题

当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑。

我们来看一个例子:

html结构:

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

css样式:

       *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

当给两个标准流下兄弟盒子 设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象叫塌陷。没法解决,我们称为这种技巧叫“奇淫技巧”。记住这种现象,在布局垂直方向盒子的时候主要margin的用法。

当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题。

margin:0 auto;

      div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }
    

当一个div元素设置margin:0 auto;时就会居中盒子,那我们知道margin:0 auto;表示上下外边距离为0,左右为auto的距离,那么auto是什么意思呢?

设置margin-left:auto;我们发现盒子尽可能大的右边有很大的距离,没有什么意义。当设置margin-right:auto;我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。

另外如何给盒子设置浮动,那么margin:0 auto失效。

使用margin:0 auto;注意点:

1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了

3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系

善于使用父亲的padding,而不是margin

实现下图的内容

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        *{
            padding: 0;
            margin:0;
        }
        .box2{
            width:400px;
            height:550px;
            background-color: darkgreen;
            padding-top: 50px;  /*让你大盒子的内容距离顶部50*/
        }
        .box1{
            width:100px;
            height:200px;
            background-color: red;
            margin-top:50px; /*让你的盒子距离边框的距离*/
            float:left; /*让盒子嵌入大盒子里面*/
            /*padding-bottom: 50px;*/
        }
    </style>
</head>
<body>
<div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

善用padding和margin

因为父亲没有border,那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了,一旦给父亲一个border发现就好了。

那么问题来了,我们不可能在页面中无缘无故的去给盒子加一个border,所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

原文地址:https://www.cnblogs.com/askzyl/p/9085041.html

时间: 2024-11-12 18:54:26

margin的用法的相关文章

float元素上-margin的用法

css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序). 标准情况下我们用float 时候是这样的. -margin通俗点说,就是将盒子的大小减小,但是不影响显示. 当给一个盒子宽度为200px添加一个margin-left:-200px的时候,其实整个盒子的宽度已经是  0 这就是为什么说-margin其实不脱离文档流..因为改变的只是他在文档中的实际宽度. 上面的例子当中,要怎样使红色盒子在右边,黄色盒子在左边显示?

padding和margin的用法

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10px; 四边统一内边距 (6)padding:10

CSS margin属性与用法教程

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left :距左元素块距离(设置距左内边距) :margin top:距头顶(上)元素块距离(设置距顶部元素块距离):margin right :距右元素块距离(设置距右元素块距) :margin bottom :底元素块距离(设置距低(下)元素块距).其二维构建图可见CSS属性二维图. margin的解剖图

margin和padding的用法与区别--以及bug处理方式

margin和padding的用法: (1)padding (margin) -left:10px; 左内 (外) 边距(2)padding (margin) -right:10px;   右内 (外) 边距(3)padding (margin) -top:10px; 上内 (外) 边距(4)padding (margin) -bottom:10px;  下内 (外) 边距(5)padding (margin) :10px;    四边统一内  (外) 边距(6)padding (margin)

web前端——CSS 09 margin用法

margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css样式: *{ padding:

css中的margin及外边距折叠

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内

margin知识

今天研究了一下css中的margin,发现其中大有学问.margin存在边距合并的问题,而且在内联元素和块级元素中边距合并规则不同:什么时候该用padding.什么时候该用margin要区分开:负margin的用途多多. 一.margin的用途:margin的基本用途就是控制元素与周围其他元素的间隔. 二.margin的用法: margin通过使用单独的属性,可以对上.右.下.左的外边距进行设置.即:margin-top.margin-right.margin-bottom.margin-lef

6.margin塌陷问题

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

16-margin的用法

[转]16-margin的用法 margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css