再说margin

       以为简单的东西其实里面学问大着呢!这两天看了一个大牛写的margin系列,真是感觉自己弱爆了。里面竟然还有些词汇我都看了解释都还不懂。所以今天试着仔细看下,但是和人家大牛的比肯定是小巫见大巫了。

 这里我遇到什么就提什么,着重一些我以前没有太注意的东西。

      margin属性适用于所有元素。but ,   竖直方向(margin-top , margin-bottom)的属性对“非替换行内元素”(non-replaced inline elements)无效.

问题一:什么是“非替换行内元素”(non-replaced inline elements)?

      先来看看replaced element:

      An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.     

     这里有标准:

http://www.w3.org/TR/CSS21/conform.html#replaced-element

http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced    

        所以replace element就有 a,img, button, textarea, input, select。

        解释完了,就知道竖直方向是对如 span, a等无效了,并且我们知道了height,width,line-height属性对他们无效。保证把上面第二个链接往下读会收获很多,譬如margin: 0 auto;为什么会左右居中不会上下居中。


    再说下 collapsing margins(注意是 margins ,而不是margin.好多人都认为只有 margin-bottom 才会折叠),以前觉得这是个很简单的东西,现在看来也不是那么容易,来说下我以前认为的 collapsing margins.

    1) 只有竖直方向的才会 collapsing 

    wrong !!!!! 这和 writing-mode 有关 ,虽然 w3c 标准有这么一句话 "Horizontal margins never collapse." ,但也是有前提的.

    2) 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

     Ringht !!!!!! 以前认为只有两个相邻(兄弟关系)才会折叠,囧......  毗邻: 不能有 border, padding, clear, 等隔断 ( 这也就解释了为什么外围 div 加上 border [或者 overflow:hidden; 但这跟 BFC 有关系,加上他后就不符合 collapsing 的条件了] 后,里面的 p 元素的 margin-top 会显示正常了,如果你也遇到过这种情况的话,就知道在说什么了 ).

    margin-top 和 margin-bottom 的 collapsing 计算方式也是不同的. 其中 margin-bottom 和 width 的属性是具体值还是 auto 有关.这点希望大家知道.

    最都别还是认为 只有 上一个的 margin-bottom 和下一个 marign-top 才会 collapsing , 太 low 了.


### CSS `margin` 使用指南及常见问题 CSS 中的 `margin` 属性用于设置元素的外边距,它定义了当前元素与其他元素之间的间距。以下是关于 `margin` 的详细说明和常见问题解决方案。 #### 基本语法 ```css selector { margin: length | percentage | auto; } ``` - `length`:可以是具体的像素值(如 `10px`)或相对单位(如 `em`、`rem`)。 - `percentage`:相对于父元素宽度的百分比。 - `auto`:允许浏览器自动计算合适的外边距[^2]。 #### 单独设置上下左右外边距 可以通过以下方式单独设置不同方向的外边距: ```css selector { margin-top: 10px; /* 设置顶部外边距 */ margin-right: 20px; /* 设置右侧外边距 */ margin-bottom: 30px; /* 设置底部外边距 */ margin-left: 40px; /* 设置左侧外边距 */ } ``` #### 合并写法 如果需要同时设置四个方向的外边距,可以使用简写形式: ```css selector { margin: 10px 20px 30px 40px; /* 上 右 下 左 */ } ``` 当某些方向的外边距相同时,还可以进一步简化: - `margin: 10px;`:所有方向的外边距均为 `10px`。 - `margin: 10px 20px;`:上下为 `10px`,左右为 `20px`。 - `margin: 10px 20px 30px;`:上为 `10px`,左右为 `20px`,下为 `30px`[^2]。 #### 常见问题及解决方案 1. **外边距折叠(Margin Collapse)** 当两个垂直相邻的块级元素的外边距相遇时,它们不会叠加,而是取两者中较大的值。例如: ```html <div style="margin-bottom: 20px;">Div 1</div> <div style="margin-top: 30px;">Div 2</div> ``` 在这种情况下,两个元素之间的实际间距为 `30px`,而不是 `50px`[^3]。 2. **水平居中** 使用 `margin: 0 auto;` 可以使块级元素在其父容器中水平居中。但需要注意的是,该元素必须具有明确的宽度: ```css div { width: 50%; margin: 0 auto; } ``` 3. **负外边距** 负外边距可以用来打破正常的文档流,创建重叠效果或调整布局: ```css div { margin-top: -20px; /* 向上移动20像素 */ } ``` 4. **`auto` 的使用** 在某些情况下,`auto` 可以帮助实现特定的布局效果。例如,在弹性盒子布局中,`margin: auto;` 可以自动分配剩余空间: ```css .container { display: flex; } .item { margin: auto; /* 自动分配水平和垂直空间 */ } ``` #### 示例代码 以下是一个综合示例,展示如何使用 `margin` 创建一个简单的布局: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Margin Example</title> <style type="text/css"> .container { width: 80%; margin: 0 auto; /* 水平居中 */ border: 1px solid black; } .box { width: 50%; margin: 20px auto; /* 上下20px,水平居中 */ background-color: lightblue; text-align: center; } </style> </head> <body> <div class="container"> <div class="box">这是一个居中的盒子。</div> </div> </body> </html> ``` #### 注意事项 1. `margin` 不会影响元素内部的内容,仅影响元素与其他元素之间的间距。 2. 在调试布局问题时,注意检查是否存在意外的外边距折叠或负外边距导致的布局错乱。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值