CSS笔记【1】：框模型

CSS框模型，英文Box Model，规定元素框处理元素内容、内边距、边框和外边距

概括：

　　

 

基本术语

• element：元素
• padding：内边距
• border：边框
• margin：外边距

 

然后它们的属性设置也是很有规律，一下分三种：

　1、内边距(padding)， 可直接设置，

　　　　

h1{padding: 10px}

也可以分别设置，分别为上右下左，呈顺时针

h1{
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 20ex;    
    padding-left: 20%;
}

　　2、边框(bordr)，一般有

• border-style：用于设置元素边框的样式
• border-width：为元素的所有边框设置宽度
• border-color :设置元素边框的所有可见部分的颜色

　　然后他们可以组合单独为每一个边设置，如：border-top-style、border-top-width、dorder-top-color即分别为上边框设置样式、宽度、颜色，其他边同理

　　

　　3、外边距(margin)用法同内边距(padding),

• margin-bottom
• margin-left
• margin-top
• margin-right

 

　　还有一个概念是外边距合并，指当两个垂直外边距相遇时，他们将形成一个便边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

感觉说不太明白，直接上图吧

 

　　

　　

感谢wc3，果然一图胜千言。。。