一、盒模型
任何一个显示的页面元素,都显示为一个矩形框(称为元素框)。
一个盒子中主要的属性就5个:width、height、padding、border、margin。
width | “宽度”,CSS中width指的是内容的宽度,而不是盒子的宽度。 |
height | “高度”,CSS中height指的是内容的高度,而不是盒子的高度 |
padding | “内边距” |
border | “边框” |
margin | “外边距”,是与其他盒子之间的距离。为透明色 |
内容区大小与元素框大小
w3c定义:
内容区大小是指内容区宽度和高度,由width和height设置;
元素框大小:包括内容区,内边距,边框,外边距四个部分。
元素框宽度:width+(左内边距+左边框+左外边距)+(右内边距+右边框+右外边框);
元素框高度:height+(上内边距+上边框+上外边距)+(下内边距+下边框+下外边框)。
但是有一个奇葩是IE:width包含了边框和padding。
元素框宽度:width+margin*2
元素框高度:height+margin*2
一个盒子的实际占比大小应为内容区加padding再加border
下面两个盒子的实际大小是一样的,只是写法不同。所以在实际开发中,保证盒子大小不变,减width,height就要增加padding
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 250px;
height: 250px;
padding: 20px;
border: 5px solid pink;
}
1.内边距(padding)
padding就是内边距。padding的区域有背景颜色,css2.1前提下,并且背景颜色一定和内容区域的相同。
也就是说,background-color将填充所有boder以内的区域。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
<style>
.box2 {
width: 250px;
height: 250px;
padding: 20px;
border: 5px dashed pink;
background-color: red;
}
</style>
</head>
<body>
<div class="box2">
这里是内容 这里是内容 这里是内容 这里是内容
</div>
</body>
</html>
padding的设置:
padding分四个方向:上、右、下、左,可以综合写,也可以单独设置padding-top、padding-right、padding-bottom、padding-left
1)只写一个
padding:20px; 默认四个方向都是20px
2)写两个
padding: 20px 40px; 默认下上20px,左右40px
3)写三个
padding: 20px 40px 50px; 默认上、右、下、左边和右边一样
4)写四个
padding:20px 30px 40px 50px; 默认上、右、下、左
要懂得,用小属性层叠大属性(不能把小属性写在大属性的前面):
padding: 20px;
padding-left: 30px;
一些元素,默认带有padding,比如ul标签。
2.border
边框有三个要素:宽度、样式、颜色。
颜色如果不写,默认是黑色。另外两个属性不写,显示不出来边框。
边框宽度属性取值可以是:thin、medium、thick或长度值,默认值是medium;
边框样式属性取值可以是:none、dotted(点状线)、dashed(虚线)、solid(实线)、double(双线)、groove(3d凹槽边框)、ridge(3d垄状边框)、inset或outset,默认值none。
所有的border:常用solid dashed dotted
border的综合写法: border: 5px solid #000;
border属性能够被拆开,有两大种拆开的方式:
1) 按3要素:border-width、border-style、border-color
border: 5px solid #000 | 等价于 | border-width:5px;border-style:solid;border-color:red; |
每个小项也可以按上右下左的顺序分开设置:
同padding:指定一个值,所有都相同。指定2个或3个,则为指定的采用对边的值。上下相同,左右相同。
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
2) 按方向:border-top、border-right、border-bottom、border-left
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red; | 等价于 | border:10px solid red; |
按方向还能再拆一层,就是把每个方向的,每个要素拆开,一共12条语句:
border-top-width:10px; border-top-style:solid; border-top-color:red; |
border-right-width:10px; border-right-style:solid; border-right-color:red; |
border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red; |
border-left-width:10px; border-left-style:solid; border-left-color:red; |
等价于
border:10px solid red;
实际开发中大多数写的都是综合属性。
border可以没有:
border:none;
某一条边没有:
border-left: none;
也可以调整某边的宽度为0:
border-left-width: 0。
3.margin
margin就像是在元素外面加了一层透明的围墙。
外边距属性:
可以综合写,也可分开写margin-top、margin-right、margin-bottom、margin-left。
同padding:指定一个值,所有都相同。指定2个或3个,则为指定的采用对边的值。上下相同,左右相同。
margin特质:
当两个元素外边距相遇时,垂直方向上去最大值,水平方向相加。
当元素浮动了,垂直方向相加。
IE6双倍margin bug
当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。
所有我们写代码时:浮动代码和margin方向相反就行了。
比如:float:left ;margin-right:20px;
通常我们把margin用于兄弟之间,如果用于父级。父级没有border,则父级会下移。
所有在布局的时候,我们用父级的padding去挤孩子,让孩子下移。
盒子居中
标准流下盒子水平居中:margin:0 auto;
注意:
1)盒子必须有明确的width
2) 只有标准流的盒子,才能使用margin:0 auto; 居中。
当一个盒子浮动、绝对定位、固定定位,都不能使用margin:0 auto;
定位盒子居中:用left:50%;margin-left:width的一半。
3) margin:0 auto;是在居中盒子,不是居中文本。文本的居中,要使用
text-align:center;