了解HTML 盒模型_html/css_WEB-ITnose

　　HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对这个盒子进行设置, 以达到自己布局的目的, 我这里绘制了个简图, 只写了内填充和外边距, 因为我感觉其他的属性更好用文字和代码理解. 同样的在学习这个的过程中, 要勤于代码试验, 测试, 否则是非常不便于掌握的知识.

盒子模型

　　首先盒子, 什么是盒子, 就是包含着内容的盒子, 也就是第一个黑色框, 这个盒子和内容(橘色块)间是内填充(padding)(绿色), 盒子和盒子间的间距称之为外边距(margin)(紫色), 盒子有边框(border)(蓝色), 这三个部分都有四个方向的属性, 比如内填充的padding-top, padding-left, padding-right, padding-bottom, 这个数值影响着内容的位置, 应该看起来还算明确吧(作图能力较为拙计).

　　盒子介绍完了, 简单说说各种属性, 方便大家测试学习, 后面不像前面介绍标签那么仔细了, 因为本人的能力有限, 有些东西自己能够理解, 但是表达起来可能就不是那么形象了, 所以大家看着一点点测试就好了.

　　边框(border)

　　盒子模型的边框是有其宽度, 线条类型, 颜色的, 代码如下:

　　div{

　　　　border-width:2px;

　　　　border-style:solid;

　　　　border-color:red;

　　}

　　这段代码也可以简写为

　　div{

　　　　border:2px solid red;

　　　　}

　　border-style(边框样式), 常见的有三种, dashed(虚线), dotted(点线), solid(实线)

　　border-color(边框颜色), 这个所有的设置颜色都是一样, 可以使用颜色英文名字, 也可以使用颜色的十六进制值.

　　border-width(边框宽度), 一般跟随的是像素值, 不过也有类型值thin, medium, thick, 不过非常不常用, 简单说下.

　　之前也说过border也有四个方向上的属性, 所以假如你需要单独只为一个边设置边框, 而不是四个边, 那么在设置的时候就不要了写border, 而是border-bottom.

　　盒模型计算宽度或高度

　　css样式表代码如示例:

　　div{

　　　　width:200px;

　　　　height:100px;

　　　　border:1px solid red;

　　　　margin:10px;

　　　　padding:20px;

　　　　)

　　那么计算这个div块的宽度应该由外至内, 两个外边距 + 两个边框 + 两个内填充 + 一个内容标签, 答案应该是 2 * 10px + 2 * 1px + 2 * 20px + 200px = 262px, 这个就是这个盒子模型的完整宽度, 高度同理, 不再赘述.

　　盒模型的填充

　　元素内容和边框之间的内填充是可以单独设置距离的, 填充可以通过两种代码设置形式设置, 分别演示.

　　完整代码内填充

　　div{

　　　　padding-top:20px;

　　　　padding-right:10px;

　　　　padding-bottom:15px;

　　　　padding-left:30px;

　　　　}

　　顺时针简写填充(顺序和上面顺序一致, 上右下左)

　　div{

　　　　paddng:20px 10px 15px 30px;

　　　　}

　　这个实现的效果和上面的完整版是一样的.

　　如果上右下左的填充相同, 那么可以简写成一个

　　div{

　　　　padding:20px;

　　　　}

　　如果上下填充一样(10px), 左右填充一样(20px)

　　div{

　　　　padding:10px 20px;

　　　　}

　　外间距和内填充一样, 只是把padding改成margin, 上面所有设置的简写都适用, 所以就不重复了.