1.案列知识
1.内边距属性
为了调整内容在盒子中的显示位置,常常需要给元素设置内边距,所谓内边距指的是元素内容与边框之间的距离,也常常称为内填充。并且,在CSS中padding属性用于设置内边距,同边框属性border一样,padding也是复合属性
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
- padding:上内边距【右内边距 下内边距 左内边距】
注:如果一个段落的父元素是< div>,那么他的内边距要根据div的width计算
2.外边距属性
网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布局网页,需要为盒子设置外边距,所谓外边距指的是元素边框与相邻元素直接的距离。CSS中的margin属性用于外边距,同内边距一样也是一个符合属性
- margin-top:上外边距
- margin-bottom:下外边距
- margin-left:左外边距
- margin-right:右外边距
- margin:上【右 下 左】外边距
清除内外边距
*{ padding:0; margin:0;}
3.设置背景
在CSS中,网页元素
- 背景颜色使用:background-color:#xxx;
- 背景图片使用:background-images
body{
background-color:#ccc;
backgrounf-image:url( images/a.jpg);
}
- 设置背景图像平铺使用:background-repeat:repeat-x;
- 设置背景图像位置:background-positon:50px (图像距离body元素左边缘)80px(图像距离body元素上边缘);
- 综合设置元素的背景:
background:背景色 url( images/a.jpg) 50px 80px;
4.元素的类型
1.块元素
主要有:h1,p,div,ul,ol,li
2.行内元素
主要有:strong , b, em , i, del, s, ins ,u, a, span(span标记是最典型的行内元素)
5.元素的转换
网页是由多个块元素和行内元素构成的盒子排列而成的,如果希望行内元素具有块元素的某些特性,如不独占一行排列,可以使用display属性对元素的类型进行转换,并且 display属性常用的属性值以及含义如下:
- inline:此元素显示为行内元素
- block:此元素显示为块元素
- inlin-block:此元素显示为行内块元素,可以对齐设置宽高和对齐等属性,但是元素不会独占一行。
- none:此元素将被隐藏,不显示,也不占用页面空间,使得元素以不同的方式显示