盒模型

标签：var   列表   一个   高度   code   样式   reserve   ack   块级元素   

　　盒模型时css定位布局的核心内容。利用div元素和列表元素，即可完成页面大部分的布局工作。

html中大部分的元素（特别是块级元素）都可以看作是一个盒子，而网页元素的定位实际就是这些

大大小小的盒子在页面中的定位。

　　首先我们来了解一些盒模型相关的属性。　

　　1.margin属性（外边距）它分为：

　　margin-top顶部外边距

　　margin-left左部外边距

　　margin-right右部外边距

　　margin-bottom底部外边距

　　2.border属性(边框)它分为：

　　border-top顶部边框

　　border-left左部边框

　　border-right右部边框

　　border-bottom底部边框

　　3.padding属性（内边距）它分为：

　　padding-top顶部内边距

　　padding-left左部内边距

　　padding-right右部内边距

　　padding-bottom底部内边距

　　我们可以把盒模型这样理解：盒模型就是一个装物品的盒子，元素就是盒内的物品，内边距是保

护物品的填充物如：塑料、泡沫、纸....， 边框就是装东西的纸盒，外边距是周围物品离盒子的距离。

所以： 元素所占宽度：padding-left +padding-right+元素自身宽度+ border-left+border-right

　　　 元素所占高度：padding-top +padding-bottom +元素自身高度+padding-top +padding-bottom

　　　 元素的横向范围：padding-left +padding-right+元素自身宽度+ border-left+border-right

　　　　　　　　　　　+margin-right +margin-left

　　　 元素的纵向范围:  padding-top +padding-bottom +元素自身高度+padding-top +padding-bottom

　　　　　　　　　　　+margin-top  +margin-bottom 

padding、border、margin都可以统一书写或分开书写，比如：

　　padding：10px  ；表示所有内边距为10px

　　border：10px  20px；表示顶部边框和底部边框为 10px，左部内边距和右部内边距为20px

　　margin：10px  20px  30px；表示顶部边框为 10px，左部内边距和右部内边距为20px，底部边框为30px

　　margin：10px  20px  30px  40px；表示顶部边框为 10px，右部内边距为20px，底部边框为30px，

　　　　　　左部内边距为40px

以上书写方式完整的表达了内外边距的值，其中边框border只是表达了他的粗细并没有完全表达他的样式

所以border的完整书写方式为：border：10px  solid  #000；它表达的完整样式是   边框：10px宽  实线  黑色

实例：div {

　　　　　　width: 300px;

　　　　　　border: 25px solid red;

　　　　　　padding: 25px;

　　　　　　margin: 25px;

　　　　　}

元素宽度：300px+25px*2+25px*2=400px

盒模型

标签：var   列表   一个   高度   code   样式   reserve   ack   块级元素   

原文地址：http://www.cnblogs.com/wang365366/p/7535795.html