谈谈Web布局的基本认知

May最近周末至少会利用一天的时间泡在培训班。回顾一下老师讲的Web布局的基本认知。Web布局大致简单分为浮动布局和不浮动布局。再谈这两种布局之前，我们一定要了解一个概念-盒子模型。

一. 什么是盒子模型？

我们可以把网页的一些功能板块理解为是一个个盒子模型。当我们审查某个元素的时候，可以看到一个盒子模型。文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

右下角就是一个盒子模型：文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

内容区Content：1122x88px文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

内边距Padding文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

边框border文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

外边距margin文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

一个盒子的总宽度为：左外边距+左边框+左内边距+内容区宽度+右内边距+右边框+右外边距文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

一个盒子的总高度为：上外边距+上边框+上内边距+内容区宽度+下内边距+下边框+下外边距文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

二. 不浮动布局

1. 宽度文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

1.1. 盒子默认是有宽度的，宽度都是由父级所决定的；文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

1.2. 一旦盒子被指定宽度后，将不受到任何的限制；文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

1.3. 盒子被指定相对百分比的宽度，这里的“相对”是指相对于它的直接父级。文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2. 高度文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2.1. 盒子默认是没有高度的，一般由子级撑开；文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2.2. 不要轻易给盒子设置高度。文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

三. 浮动布局

1. 语法文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2. 宽度文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2.1. 盒子默认是由内容撑开的；文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2.2. 如果被父级宽度限制了，会自动换行；文章源自MAY的SEO博客-https://may90.com/building/web-layout-basis.html

2.3. 盒子被指定固定宽度后，将不受到任何的限制；

2.4. 盒子被指定相对百分比的宽度，这里的相对是只相对于它直接父级的宽度。

3. 高度

盒子默认是没有高度的，不要轻易给盒子设置高度。

4. 父级高度塌陷

一旦子级都浮动后，父级的高度就会塌陷，如何解决？

方法1. 给父级添加 overflow: hidden;

方法2. 给最后一个子级添加标签

<div class="clearfix"></div>

然后给这个标签添加CSS：

.clearfix{clear: both;}

你看懂了吗？