CSS盒子模型

 盒子模型

页面上的所有元素都可以看成一个盒子，占据着一定的页面空间

content：内容；

height：高度；

padding：内边距；

border：边框；

margin：外边距

一个盒子实际宽度、高度 = margin + border + padding + content 

设定div样式的宽度和高度是content的宽度和高度

 

overflow属性

当内容溢出盒子框时，使用overflow属性设定，其取值如下：

    hidden：超出部分不可见

    scroll：出现滚动条

    auto：如果有超出部分，显示滚动条

 

border边框属性

• border-width：px（像素）、thin（粗）、medium（中）、thick（细）
• border-style：dashed（横线组成）、dotted（点组成）、solid（实现）、double（双实线）
• border-color：颜色
• 简易设置——border：width style color；

使用border制作水平分割线，将下列样式引用在div中：

.line{
	    height: 1px;
	    width: 500px;
	    border-top:1px solid red;
	}

 

margin和padding属性

对浏览器默认的属性值清零（只有属性取值为零，单位才可省略）

*{
    padding:0;
    margin:0;
}

取值：px,%（外层盒子的宽度和高度）

内边距	外边距	方向
padding: 5px;	margin: 5px;	上右下左
padding-top: 10%;	margin-top: 10%（即外层盒子高度的10%）	上
padding-left	margin-left	左
padding-right	margin-right	右
padding-bottom	margin-bottom	下

 

 

 

 

 

 

 

省略写法	扩展写法（上右下左）
margin：1px;	margin：1px 1px 1px 1px;
margin：1px 2px；（省略下册和左侧）	margin：1px 2px 2px 1px;
margin：1px 2px 3px;（省略左侧）	margin：1px 2px 3px 1px;
即使上下值相同，也不可以省略	margin：1px 2px 1px 3px

 

 

 

 

 

 

• margin的合并：垂直方向合并（取最大的margin值），水平方向不合并
• margin设定div水平居中：margin：0（可取任意值） auto（浏览器自动计算左侧和右侧取值）；