1、水平布局
元素在其父元素中水平方向的位置由以下几个属性共同决定:
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
一个元素在它父元素中,水平布局必须要满足以下等式:
margin-left + border - left + padding-left + width + padding-right + border-right + margin-right = 其父元素的内容区宽度
如果等式不成立,会自动调整,首先调整为auto的属性值。都没有首先调整margin-right。
如果都是auto,默认使width最大。如果两个外边距设置为auto,则会将外边距设置为相同的值。可以利用这个来使一个元素在父元素中水平居中。
width: xxxpx;
margin: 0 auto;
2、垂直布局
默认情况父元素的高度被内容撑开,如果子元素的大小超过了父元素的,会从父元素溢出。解决办法:overflow:默认visible;hidden:溢出内容会被裁剪l;scroll:生成两个滚动条;auto:根据需要生成滚动条。
overflow:visible/hidden/scroll/auto
overflow-x:visible/hidden/scroll/auto
overflow-y:visible/hidden/scroll/auto
3、外边距的折叠
相邻的垂直方向外边距会发生重叠现象:
兄弟元素:兄弟元素间的会取较大值。(如果相邻的一正一负,会取两者的和;都为负数,取两者绝对值较大的。)
父子元素:父子元素的相邻外边距,子元素的会传递给父亲(上外边距)。使用padding来解决。