【Web前端笔记06】CSS盒子模型02

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中，网页元素

1. 背景颜色使用:background-color:#xxx;
2. 背景图片使用:background-images

body{
		background-color:#ccc;
		backgrounf-image:url( images/a.jpg); 
}

3. 设置背景图像平铺使用：background-repeat:repeat-x;
4. 设置背景图像位置：background-positon:50px (图像距离body元素左边缘)80px(图像距离body元素上边缘);
5. 综合设置元素的背景：

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：此元素将被隐藏，不显示，也不占用页面空间，使得元素以不同的方式显示