第四次网页前端培训笔记

一、CSS常用属性

1.背景

（1）背景颜色

（2）背景图片

（3）背景图片是否重复

<style type="text/css">
		#div1{
			height: 500px;
			width: 400px;
			/* 背景颜色 */
			background-color: coral;
			/* 背景图片 */
			background-image: url(img/peak-result.png);
			/* 是否重复 */
			background-repeat: no-repeat;
		}
		</style>

二.文本

（1）字体颜色

（2）对齐方式

（3）文本修饰

（4）首行缩进

<style type="text/css">
#div2{
			/* 字体颜色 */
			color: #8A2BE2;
			/* 对齐方式 left center right */
			text-align: left;
			/*文本修饰*/
			text-decoration: line-through overline underline;
			/* 首行缩进 */
			text-indent: 2em;
		}
</style>

(5)去除超链接下划线

a{
			text-decoration: none;
		}

三.对齐方式

1.left     左对齐

2.right     右对齐

3.center     居中

4.justify     两端对齐

5.inherit     从父元素继承text-align 属性的值

四.display属性

1.none     隐藏元素

h2{
			display: none;
		}

2.block     显示元素，变成块级元素，会自动换行

3.inline     默认

4.inline-block

5.list-item

五.浮动（只有横向浮动，没有纵向浮动）

• none
• left
• right

#d1{
			width: 100px;
			height: 100px;
			background-color: #8A2BE2;
			/* 向左浮动 */
			float: left;
		}
		#d2{
			width: 100px;
			height: 100px;
			background-color: #FF0000;
			/* 向左浮动 */
			float: left;
		}

六.盒子模型

 1.boder

boder:颜色、样式、宽度

2.boder的单独设置

border-width（宽度）

border-style（样式）

border-color（颜色）

3.boder-style属性

dotted:定义一个点线边框

dashed:定义一个虚线边框

solid:定义实线边框

double定义两个边框。两个边框的宽度和border-width的值相同

groove:定义3D沟槽边框。效果取决于边框的颜色值

ridge:定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset:定义一个3D突出边框。效果取决于边框的颜色值

4.padding     内边距

元素可能会变形（少用）

同时设置（如：padding:15px;）

单独设置各边的内边距（padding-top、padding-left、padding-bottom、padding-right）

设置一个值：上下左右都一致

设置两个值：上下一致，左右一致

设置三个值：上右下一致，左和右一致

（默认按照上 右 下 左 的顺序设置）

5.margin     外边距

同时设置（如：margin:100px;）

单独设置各边的内边距（margin-top、margin-left、margin-bottom、margin-right）

auto：自动，可以理解为居中的意思。浏览器自动计算外边距

margin:auto auto ：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算是不会生效的，而左右外边距会生效，表现为左右居中状态；

若要设置为上下左右居中状态，则要计算好自行设置上下的外边距。

/* 设置外边距 */
				margin-top: 100px;
				margin-left: 6.25rem;

6.border-collaps

设置是否将表格边框折叠为单一边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）