zoukankan      html  css  js  c++  java
  • CSS深入理解之margin

     

     

    前言

     

    改变容器尺寸

     

    margin改变容器尺寸有以下两个限制条件:

    1. 使用于没有设置宽高的普通block元素
      float/absolute/fixed元素 以及 inlines水平 table-cell元素.

    2. 只试用于水平方向

     

    margin百分比

     

    1.普通元素的百分比margin值是相对于容器宽度计算的
    2.绝对定位元素的百分比margin值是相对于第一个定位祖先元素的宽度计算

     

    也就是说margin的宽度都是相对于其祖先元素计算的.

     

    margin重叠

     

    1.block水平元素(不包括float和absolute)
    2.只发生在垂直方向(如果修改了writting-mode)

     

    父子元素margin重叠条件

    1. 父元素非块状格式化上下文元素

    2. 父元素没有border值;

    3. 父元素没有padding值;

    4. 父元素与第一个子元素之间没有inline父元素分隔

    5. 父元素没有高度限制

     

    我们可以通过设置;(添加overflow:hidden).设置border/padding/添加一个inline元素/添加高度等方法来解决margin重叠的问题;

     

    margin重叠的规则,简而言之就是取两个值的和

     

    margin auto属性

     

    有时候,就算没有给元素设置宽高,他也会自动填满容器,那么如果我们设置宽高以及margin:auto后,就可以有自动margin填充了
    图片是默认inlie的,所以不会自动居中,需要修改它的block值;
    垂直居中 绝对定位元素在拉伸的情况下,设置一个宽高度,然后margin :auto,那么就可以实现自动居中了,也就是时候margin填充了拉伸后这只宽高留下的空白.

     

    margin 无效的情形

     

    1.inline水平元素垂直margin无效
    2.display:table-cell/table-row等声明的margin无效

  • 相关阅读:
    游戏开发制作流程详细介绍
    成为群体领袖
    别人的,值得借鉴的经验
    linux下iptabes配置详解
    Oracle tnsnames.ora
    同时展多个物料BOM List
    Oracle判断是否为数字或数字型字符串
    linux上的vnc配置
    Oracle 中的正则函数
    如何将 backordered 的SO# 重新发运?
  • 原文地址:https://www.cnblogs.com/heyuqing/p/6185668.html
Copyright © 2011-2022 走看看