CSS笔记 - 水平和垂直方向布局

水平/垂直方向布局

目录

• 水平/垂直方向布局
  • 1. 水平方向布局
    • 1.1 一般水平布局
    • 1.2 开启绝对定位后的水平布局
  • 2. 垂直方向布局
    • 2.1 一般垂直方向布局
    • 2.2 开启绝对定位后的垂直方向布局

1. 水平方向布局

1.1 一般水平布局

• 元素在其父元素中水平方向的位置由以下等式决定：

  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right == [其父元素内容区的宽度]

• 该等式两侧必须相等，若相加结果使等式不成立，则等式会根据下列规则自动调整

  • width，margin-left，margin-right可以被设置为auto，作为自动调整的候选值
  • 如果等式的7个值中没有值为auto，则自动调整margin-right值使等式满足
  • 如果某一个值为auto，则会自动调整该值使等式成立
  • 如果宽度和一个外边距设置为auto，则宽度变为最大值，外边距为0
  • 如果两个外边距设置为auto，则会将外边距设置为相等的值
  • 如果三个值都设置为auto，则宽度变为最大值，外边距为0

1.2 开启绝对定位后的水平布局

• 元素在其父元素中水平方向的位置由以下等式决定：

  {left} + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + {right} == [其父元素内容区的宽度]

• 规则和一般水平布局一样，但是margin-left/right被替换：

  • 可以设置为auto的值 margin width left right
  • 如果9个值中没有auto则自动调整right值以使等式满足

2. 垂直方向布局

2.1 一般垂直方向布局

• 一般垂直方向布局相对水平方向来说要简单很多，只需要注意溢出(overflow)问题即可

• 如果子元素的大小超过了父元素，则子元素会从父元素中移除，需要使用overflow样式解决

  语法：

  overflow: visible：默认值，子元素会从父元素中直接溢出，在父元素的外部位置显示

  overflow: hidden ：溢出内容将会被裁剪而不会显示

  overflow: scroll：生成两个滚动条，通过滚动条查看完整的内容

  overflow: auto：根据需要生成滚动条

2.2 开启绝对定位后的垂直方向布局

• 元素在其父元素中垂直方向的位置由以下等式决定，且必须满足：

  top + margin-top + padding-top + border-top + height + border-bottom + padding-bottom + margin-bottom + bottom == [包含块的高度]