CSS盒子模型
2014-09-23 16:36
197 查看
我们每天浏览网页,登录各种网站,可是有没有发现,尽管网页数量数不胜数,但是每个网页都是信息罗列的很整齐,页面设置页非常合理。这是怎么做到的呢?难道每个网页都是需要大量人手来管理的吗?这就是本篇博客要讨论的内容了----CSS盒子模型。
这就奇怪了,我们平常所见的规划合理,摆放整齐的,经常见到的Excel等,也是和表格有关系,这个怎么就用到盒子了?使用Excel确实可以做到这样,可是你见过Word使用表格了吗?不照样很合理吗?其实,它们都用到了类似表格的技术,只是Excel是可见的表格,Word表格你看不见罢了。这里我们讨论的也是一种看不见的盒子CSS----盒子模型。
先来看一下这个盒子模型:
![](https://img-blog.csdn.net/20140923163337529?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk0MjQ2NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
那么这个盒子说明了什么?具体又如何使用这个盒子模型呢?在web窗体设计中,我们可以将某一行数据或者某一块(矩形)的数据看做一个整体,然后将这个块当做一个盒子来处理。border就是这个盒子的边框;margin就是盒子之间的间距;padding就是盒子边框和盒子中内容之间的距离;width和height就是盒子内容的宽度和高度;content是具体内容。有了如此详细的划分,我们在设计web界面时就得心应手了。
一行的内容我们可以选择简单的span标签来处理,如果是多行复杂的内容就需要使用div块来处理了,这就是赫赫有名的CSS+div。当然,一个盒子不可能解决界面的所有问题,这时我们就需要多个盒子了。多个盒子之间可以是并列关系,即两个或以上盒子共同来完成某个界面制作。如果两个盒子完成一个功能,那么以css文件中后边的为准。盒子之间也可以嵌套,这样的界面设计就更加精细了。
嵌套盒子嵌套示意图
![](https://img-blog.csdn.net/20140923163255937?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDk0MjQ2NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
从上面这个嵌套盒子模型示意图来看,盒子模型和Excel表格还是有区别的。盒子模型之间是可以有间距的,而excel表格之间是没有间距的,并且盒子的边框也是可以自由设置。
盒子模型的使用,让我们方便的设计web界面,但是由于浏览器的兼容性问题,使同一个CSS盒子在不同的浏览器出现不同的界面,也是我们应该注意的。
这就奇怪了,我们平常所见的规划合理,摆放整齐的,经常见到的Excel等,也是和表格有关系,这个怎么就用到盒子了?使用Excel确实可以做到这样,可是你见过Word使用表格了吗?不照样很合理吗?其实,它们都用到了类似表格的技术,只是Excel是可见的表格,Word表格你看不见罢了。这里我们讨论的也是一种看不见的盒子CSS----盒子模型。
先来看一下这个盒子模型:
那么这个盒子说明了什么?具体又如何使用这个盒子模型呢?在web窗体设计中,我们可以将某一行数据或者某一块(矩形)的数据看做一个整体,然后将这个块当做一个盒子来处理。border就是这个盒子的边框;margin就是盒子之间的间距;padding就是盒子边框和盒子中内容之间的距离;width和height就是盒子内容的宽度和高度;content是具体内容。有了如此详细的划分,我们在设计web界面时就得心应手了。
一行的内容我们可以选择简单的span标签来处理,如果是多行复杂的内容就需要使用div块来处理了,这就是赫赫有名的CSS+div。当然,一个盒子不可能解决界面的所有问题,这时我们就需要多个盒子了。多个盒子之间可以是并列关系,即两个或以上盒子共同来完成某个界面制作。如果两个盒子完成一个功能,那么以css文件中后边的为准。盒子之间也可以嵌套,这样的界面设计就更加精细了。
嵌套盒子嵌套示意图
从上面这个嵌套盒子模型示意图来看,盒子模型和Excel表格还是有区别的。盒子模型之间是可以有间距的,而excel表格之间是没有间距的,并且盒子的边框也是可以自由设置。
盒子模型的使用,让我们方便的设计web界面,但是由于浏览器的兼容性问题,使同一个CSS盒子在不同的浏览器出现不同的界面,也是我们应该注意的。
相关文章推荐
- css's special-css盒子模型
- CSS盒子模型小剖析
- 转 CSS盒子模型
- CSS盒子模型元素实际宽度的计算
- 浅谈CSS盒子模型
- 【web】--有趣的CSS盒子模型
- CSS盒子模型
- CSS基础-17CSS盒子模型-外边距合并
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- :css教程:css盒子模型及布局应用
- css盒子模型
- CSS盒子模型
- 什么是CSS盒子模型
- CSS盒子模型
- CSS---网页编程(三)网页化妆技术CSS学习、CSS盒子模型
- css盒子模型
- css盒子模型及其他元素属性简介
- CSS盒子模型
- CSS盒子模型
- css盒子模型 css margin 外边框合并