前端基础——CSS盒子模型
来源:互联网 发布:java 乱码 中文为问号 编辑:程序博客网 时间:2024/05/29 14:25
现在许多网页都是由许多个“盒子”拼接、嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。
为了更好的说明,先举个通俗的例子:在一个仓库中放了10个纸箱,每个纸箱之间有一定距离,每个纸箱内放的是一台电脑并且纸箱和电脑之间都有一层泡沫来隔绝防震(这里假设纸箱和电脑都是正方体),以这个例子为背景接着说盒子模型。
其实一张图片就可以把CSS盒子模型形象地表述出来,网上一搜一大堆:
正如上图所示:CSS中的盒子模型通常由四部分组成:内容(content)、填充(padding)、边框(border)、边界(margin)。
这里的内容就相当于箱子里的电脑,填充就相当于泡沫,边框就相当于纸箱,边界就相当于每个纸箱之间的距离。
对这四部分进行说明:
内容(content):盒子模型中的内容,可以是文字、图片、表格等等;
填充(padding):内容与盒子边框的距离,可拆分为padding-top;padding-right;padding-bottom;padding-left;
边框(border):盒子的边框,可拆分为border-top;border-right;border-bottom;border-left;
边界(margin):盒子与其他相邻元素之间的距离,可拆分为margin-top;margin-right;margin-bottom;margin-left;
如下图:
图中需要注意的是,虚线部分表示的是该“盒子”中存放的内容的宽度(width)和高度(height),也就是上例箱子中电脑的宽度和高度。
通常情况下可以设置填充和边界四个方向的宽度(即厚度),对边框的设置有样式(style)、颜色(color)、宽度(width)几个属性。
在CSS中,认为网页中的所有元素都包装在一个矩形盒子中,比如常用的div、span、ul、li、img、table等,都可以在CSS中对它们的内容(content)、填充(padding)、边框(border)和边界(margin)进行格式化。
如果一个盒子的margin为30px,border为5px,padding为20,width为240,height为160px,那么这个盒子实际上占用的空间为 宽:(30+5+20)×2+240=350px,高(30+5+20)×2+160 =270px
以往的网页都是用表格来布局,但是表格布局有很多缺点,限于篇幅,下篇将介绍易于控制和互动的CSS+DIV布局方式。
- 前端基础——CSS盒子模型
- 前端基础——CSS盒子模型
- H5前端基础——盒子模型
- CSS—盒子模型
- CSS开发基础——CSS盒子模型
- css基础,盒子模型
- 【CSS】——盒子模型
- CSS——盒子模型
- CSS——盒子模型
- CSS—盒子模型(a)
- CSS — (盒子模型)
- 前端基础-盒子模型1
- 前端基础-04-盒子模型
- CSS基础之盒子模型
- 【CSS 基础】06 盒子模型
- CSS基础-18CSS盒子模型-盒子模型应用
- CSS基础-13CSS盒子模型-概述
- CSS基础-14CSS盒子模型-内边距
- 第九周项目三——输出星号图(d)
- UVa 116 - Unidirectional TSP(dp)
- 无速度矢量控制 01
- Android实现程序自动更新
- hdu 5066 Harry And Physical Teacher(数学)
- 前端基础——CSS盒子模型
- Photoshop CS3新增黑白转换命令原理剖析
- 第9周项目5(2)-程序填充题
- 运算符重载实例(有理数的运算)
- android 环境搭建
- HibernateUtil工具类的写法
- HDU 5073 Galaxy(居然是暴力)
- GPL许可证和BSD许可证
- cocos2dx2.2移植到Android