常见布局-单栏

有两种情况:

常见布局-单栏_第1张图片
image.png

如何实现
定宽

width: 1000px; 或 max-width: 1000px;

水平居中

margin-left: auto; margin-right: auto;
widthmax-width的区别

width:600px表示写定宽度,容器的宽度一定为600px,
max-width:600px表示最大宽度为600px,当浏览器的宽度大于600px容器的宽度为600px,当浏览器的宽度小于600px时,容器的宽度则变为由内容撑开的宽度,不再是600px。

width与max-width区别的demo

一栏布局


内容

优化
直接把class='layout'加在需要的div上,省标签。便于控制局部。



内容

一栏布局(通栏)



内容

缺陷:当浏览器大小小于.layout设置的宽度时,会出现content 的溢出。如图

常见布局-单栏_第2张图片
image.png

优化
给 body 设置min-width 去掉滚动背景色 bug



内容

demo

你可能感兴趣的:(常见布局-单栏)