width
宽
height
高
background
背景
margin
外边距
padding
内边距
border
边框
盒模型
margin 外边距 { 盒子与盒子之间的距离
4个方向上的控制 { 顺序:上右下左,如未设置,找对边
margin: 10px 20px 30px 40px; // 上10,右20,下30,左40
margin: 10px 20px; // 上下10,右左20
margin: 10px 20px 30px; // 上10,右20,下30,左20
指定某一方向的设置:
margin-top: N px;
margin-right: N px;
margin-bottom: N px;
margin-left: N px;
水平方向上设置居中 { 不支持竖直方向上的居中
margin:N auto;
竖直方向上的重叠(融合)问题
在竖直方向上,两个元素的 margin 值取其最大值,而非两者值相加
对于 float 的元素,不存在 margin 融合的问题
padding 内边距 { 盒子内边框到内容之间的距离
4个方向上的控制 { 顺序:也是上右下左,如为设置,找对边
padding: 10px 20px 30px 40px;
分别设置:
padding-top: N px;
padding-right: N px;
padding-bottom: N px;
padding-left: N px;
颜色
padding 是透明的,它的颜色是盒子的背景色,即
盒子的背景色铺到盒子的内边框处
border 边框
写法:
border: width宽度 style样式 color颜色;
border: 20px solid red;
border-width: length / thin / medium / thick / 数值;
borrder-style: none / hidden / doted / dashed / solid / double / groove / ridge / inset / outset;
// 从显示效果上看,none 和 hidden 没有区别
border-color: 颜色单词 / 十六进制编码;
// 边框颜色默认使用文本颜色)
分别控制:
border-top: 20px solid red;
border-right: 20px solid red;
border-bottom: 20px solid red;
border-left: 20px solid red;
讨论: 一个盒子到底占多大地方?
width 和 height 到底是谁的大小?
是指允许写内容的区域
也就是说,padding 往里的内容
盒子本身有多大?
水平方向: 左&右边框 + 左&右内边距 + 内容宽度
竖直方向: 上&下边框 + 上&下内边距 + 内容高度
盒子占多大空间?
水平方向: 左&右外边距 + 本身
竖直方向: 上&下外边距 + 本身
2012_d1_①_005 007 008 009