布局笔记166

一、固定宽度布局。

二、流式布局：相对浏览器宽度来设置元素宽度。%

三、弹性布局：相对于字号来设置元素的宽度。em

流式或弹性布局，布局宽度减少时，固定宽度的图像会产生强烈影响。

解决方法：

1.使用背景图像而不是图像元素。

#branding{ height：  background：url（/img/branding.png）no-repeat left top}

2.如果是图像元素，将宽度设置100%，overflow：hidden

3.如果希望垂直和水平伸缩不被裁剪，可以将元素添加到没有设置任何尺寸页面，设置图像百分数宽度和最大宽度。

四、高度相等的列。

解决思路：

1.如果是独立内容的话。一个大外框，三个box，每个box包括一个小bottom。box长度越出，overflow：hidden小bottom位于底部绝对定位。

2.如果一个内容。应用column-count、column-width、column-gap来实现。