关于绝对定位和wrtting-mode部分以后再学习,重点是要掌握核心用法
了解CSS margin-start and...











CSS margin失效情形解析

























CSS margin负值定位











理解CSS中的margin auto















正确看待CSS的margin重叠




















CSS margin与百分比单位






CSS margin与容器的尺寸












了解CSS margin-start and...

CSS margin负值定位

正确看待CSS的margin重叠







margin-start 和 margin-end





margin失效情形解析







margin得太多了就会无效
margin负值下的两栏自适应布局

margin:auto









CSS重叠通常特性















绝对定位元素的百分比margin


margin:100% 1:1
margin与容器的尺寸




margin-start、border-start




margin负值下的两端对齐

margin负值下的等高布局:margin-bottom改变占据的空间,padding-bottom补回消失的空间(overflow:hidden 限制空间)

margin负值下的两栏自适应布局

margin:auto ->计算剩余空间 填充 计算后的值不是负值

图片、按钮等属于替换元素,设置display:block时占据整个容器

margin重叠


margin计算规则

margin重叠产生的意义


margin相对于宽度百分比计算
非替换元素,如span, 设置垂直margin无效,水平margin有效
img为替换元素, 水平垂直margin都可设置
margin负值定位
12224
弹框效果可以使用
去除margin-bottom重叠与去除margin-top使用一样
重叠的情况