【学习笔记】CSS深入理解之margin

stefan 发布于2019-08-30 15:54 / 513人阅读

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽

张鑫旭的CSS深入理解之margin学习笔记

margin与容器的尺寸

可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向的可视尺寸

占据尺寸：对于block/inline-block元素，margin可改变元素水平/垂直方向的占据尺寸

margin与百分比单位

普通元素的百分比margin都是相对于容器的宽度计算的

绝对定位元素的百分比是相对于包含块的宽度计算的

margin重叠

前提

只应用于block元素

不考虑writing-mode的情况下，只发生在垂直方向

场景

兄弟元素发生重叠

父元素和第一个/最后一个子元素发生重叠

margin-top重叠：第一个子元素设置margin-top相当于父元素设置margin-top

父元素BFC

父元素没有border-top

父元素没有padding-top

父元素和第一个子元素之间没有inline元素

margin-bottom重叠：最后一个子元素设置margin-bottom相对于父元素设置margin-bottom

父元素BFC

父元素没有border-bottom

父元素没有padding-bottom

父元素和最后一个子元素之间没有inline元素

父元素没有height, min-height, max-height限制

空block元素发生重叠（设置margin: 1em 0;只有1em高度）

元素没有border设置

元素没有padding设置

元素内没有inline元素

元素没有height或者min-height

重叠计算

正正取大值

正负值相加

负负最负值

margin: auto

作用前提和原理

前提block水平元素，未设置宽度的情况下元素会自动填充容器；margin的作用是分配元素宽度以外的剩余空间

垂直居中

writing-mode: vertical-lr

设置position:absolute;top:0;bottom:0;height，使元素垂直填充整个容器，这时候margin: auto在垂直方向上起作用

margin无效的可能

非替换的内联元素，垂直方向的margin无效

margin重叠

table相关的元素，margin无效

绝对定位元素因无法与周边元素产生间距，因此看似无效

跟随浮动元素，有可能因margin值不够，看似无效

内联特性导致margin失效

margin的其他属性

margin-start/margin-end:与流方向相关（direction, writing-mode）

margin-collapse: margin是否重叠，-webkit-margin-collapse: collapse（重叠）|discard（取消）|separate（分隔）

云服务器 GPU云服务器深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117040.html

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之float

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏包裹：即产生一个BFC破坏：使父容器...

denson 2019-08-29 17:31 评论0 收藏0
CSS 深入理解之 border 【笔记】

摘要：本文是对慕课网张鑫旭的课程深入理解之的学习笔记，并结合了一些个人理解。本文是对慕课网张鑫旭的课程《CSS 深入理解之 border》的学习笔记，并结合了一些个人理解。 border-width 不支持百分比 border-width 不支持百分比单位，原因如下：在实际设计中，边框一般是固定大小的，不会随着盒子宽度的增加而增加 margin 和 padding 为百分比单位时，...

william 2019-08-30 15:52 评论0 收藏0
【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之padding

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大，一定影响元素尺寸为定值，会影响元素尺寸为或者为，同时值没有暴走，不影响元素尺寸元素水平影响尺寸，垂直不影响尺寸，但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽张鑫旭的CSS深入理解之padding学习笔记 padding与容器的尺寸 block元素 padding值过大，一定影响元素尺寸 width为定...

learn_shifeng 2019-08-30 15:54 评论0 收藏0