(一)盒子属性
1.盒子的构成
(1)盒子的内容区域:可以通过width和height来设置内容区域的宽高;
(2)盒子的内填充区域(内边距) padding :通过padding来设置,这个padding是分上下左右四个方向;
(3)盒子的边框区域 border:通过border来设置,分上下左右四个方向;
(4)盒子的外填充区域(外边距) margin:通过margin来设置,也是分四个方向;
(5)盒子的背景区域 background。
2.width与height
盒子内容的宽度和高度,不是指盒子的宽度和高度
一个盒子在网页上占据的宽度:
width+左右padding+左右border+左右margin
一个盒子在网页上占据的高度:
height+上下padding+上下border+上下的margin
3.border
border可以设置盒子,边框颜色,边框样式,边框大小
盒子的边框,通常在CSS中,设置盒子的边框需要设置边框粗细,边框样式,边框颜色。
一个盒子的边框由border-width,border-style,border-color组成
边框有四个方向:
top、right、bottom、left
在CSS中我们通常通过 border:1px solid red;来设置边框的属性
样式:
solid 实线
dashed 虚线
dotted 点线
border在网页中也占据大小
4.padding
内边距,表示盒子内容区域到边框的区域
padding有四个方向:
top、right、bottom、left
padding后可以跟的值可以是:
一个值:padding:20px;表示上下左右的内边距都是20px;
两个值:padding:10px 10px;第一个值表示上下10px,第二个值表示左右10px;
三个值:padding:10px 10px 10px;第一个值表示上10px,第二个值表示左右10px,第三个值表示下10px;
四个值:padding:10px 10px 10px 10px;顺序是上右下左10px;
5.margin
外边距,使用margin表示盒子与盒子之间的距离
margin有四个方向:
top、right、bottom、left
margin后可以跟的值可以是:
一个值:margin:10px;表示上下左右的外边距都是10px
两个值:第一个值表示上下,第二个值表示左右
三个值:第一个值表示上,第二个值表示左右,第三个值表示下
四个值:顺序是上右下左
6. background
用来设置盒子的背景:
背景颜色:background:颜色;即可设置背景颜色
背景颜色会填充一个盒子的内容区域和padding区域以及边框。
背景图片:
url()函数,表示用来指定一个背景图片的路径,()里面可以加"",后输入网址即可。
默认情况下,一个盒子的背景图片会平铺一个盒子,在水平和垂直方向上都会平铺。(可以通过一个属性来指定是否平铺,叫background-repeat)
默认情况下,背景图片的左上角和盒子的padding’的左上角是对齐的。(可以通过一个属性来指定背景图片的位置,叫background-position)