CSS布局那点事儿

布局

最开始老的一代网站开发，布局都是通过表格实现的。

这样可以形成规整的网格布局，但是也会带来一定的复杂性。比如想要新增某个页面元素，就有可能要改动整个表格，添加很多无用的行或者列。

后来，衍生出不少的CSS框架，他们屏蔽了底层的css语法，只需要按照特定的使用方式就能实现网格布局。这样对于开发者来说，好处自然是方便了；但是也带来了一定的麻烦，比如网格如果不符合用户的应用场景，需要自定义扩展，这就麻烦了；再比如作出的网站不易调试；网站需要引入额外的文件等等。总的来说，还是利大于弊吧，不然bootstrap等等也不会现在火成这样。

CSS布局

网上有很多关于布局的文章，什么双飞翼啊等等。

这里先从最原始的来介绍。考虑到屏幕的宽度不同，有可能造成网页的横向拉伸，为了避免一样过于长，从而导致难于阅读，因此一般的类似博客的网站都会把宽度设置为一个固定的值。当屏幕的宽度拉伸时，也不会改变页面的宽度：

设置的方式大致如下：

width: 920px;

margin: 0 auto;/*水平居中*/

text-align: left;

如果是左右布局，则会考虑把页面分成两个部分。

一个部分向左浮动，一个部分向右浮动。为什么这样呢？

这是因为如果全部采用向左浮动，如果主体部分由文本换行等，由于像素的偏差可能导致最右边的文本框挤出屏幕，导致无法阅读。因此一个向左，一个向右，中间留有一定的隔离区（空白的地方），当有挤出的部分也会显示在隔离区的部分，而不会影响阅读。

	.content .primary {

		width: 72.82%;

		height: 400px;

		background-color: yellow;

		float: right;

		display: inline;

	}

	.content .secondary {

		width: 25%;

		height: 400px;

		background-color: blue;

		float: left;

		display: inline;

	}

如果是三列的布局，则可以考虑先分成两部分。某一个部分再分成两部分，通过向左向右浮动的方式显示。

巧用min-width和max-width

min-width和max-width其实是很长用的。

比如在做响应式web时，考虑到浏览器的伸缩，想要网站也随之改变，那么就会设置宽度高度为一定的百分比，或者通过响应式的语法实现。这时，如果文本内容缩小的很小，宽度很窄可能会影响阅读，因此需要把宽度设置为一个最小值。只有屏幕宽度大于一定的值时，页面才会随之改变。类似的，避免屏幕过大网站拉伸变形，也可以设置一个最大的宽度值。

这个属性对于图片和div都有很好的效果。

巴特西

CSS布局那点事儿

布局

CSS布局

巧用min-width和max-width

最新文章

热门文章