html+css注意语句_valign默认值

1、table与div区别

2、span

3、align与valign区别

align和valign分别用于设定水平位置和垂直位置。align的默认值是center；valign的默认值是middle。

align三个选项：left | center | right。

分别表示在水平方向上向左对齐，居中对齐，向右对齐。

valign三个选项：top | middle | bottom。

分别表示在垂直方向上向顶端对齐，向中间对齐，向底部对齐。

div用法

div也是图层的用法

图层的属性

5、列表的创建

< li>…< /li>来进行列表展示

6、表格的创建

设置边框的样式----frame、rules

frame常见属性

rules常见属性

行水平对齐-----align

left
right
center

行垂直对齐-----valign

跨列—colspan;跨行-----rowspan

7、css中#与.的区别

.用于id
#用于class属性

<style>
    .con {
        color: #39f;
    }
    #con {
        background-color: #f00;
    }
</style>
<div class="con">HTML5中文网</div>
<div id="con">HTML5中文网</div>
1
2
3
4
5
6
7
8
9
10

id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

id标签中出现class情况

<div id="link2">
						<ul>
							<li><a href="#">作品1</a>&nbsp;&lt;<a class="author" href="#">作者1</a>&gt;</li>
													</ul>
						<p><a href="#">OPML</a>&nbsp;&nbsp;<a href="#">更多</a></p>
					</div>
<style>
#links a.author{color: #37d2fc;}
</style>
1
2
3
4
5
6
7
8
9

class中出现id情况

<div class="home-header-waichu">
			<dd>
				<a href="" class="tag">外出申请</a>
				<a href="index1.html" class="tag">
					 <font color="black">外出记录</font>
				</a>
			</dd>
		</div>
<style>
.home-header-waichu dd .tag{
	color: #6ffffb;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

class中出现图片处理时

方法一：

<div class="home-header">
			<dl>
				<dt>
					<img src="img/none.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-header dt > img{
	width: 20%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

方法二：

<div class="home-categories">
			<!--下面为dl的用法，可以查找dl,dt,dd的用法-->
			<dl>
				<dt>
					<img src="img/ld2.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-categories dt img{
	margin-right: 1rem;  /*让图片和字横向设置间距*/
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

class中出现class时

<div class="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码，扫码进出</p>
			<p class="xiao">校~</p>
		</div>

<style>
.xiao{padding-left: 7rem;} 
</style>
1
2
3
4
5
6
7
8
9

id中出现id

<div id="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码，扫码进出</p>
			<p id="xiao">校~</p>
		</div>

<style>
#xiao{padding-left: 7rem;} 
/*这里不需要写为home-footer #xiao{} 的形式*/
</style>
1
2
3
4
5
6
7
8
9
10

8、css中height和line-height的区别

height：表示这个块级元素或行内元素的高度

line-height：表示里面假如需要输入文本，则这个就是给这个文本的空间大小，相当于 word 文档中的行高

font-size：表示文本的大小，这个大小的高度尽量不要超过 line-height 的高度，如果超过了将会导致第二行的文字和第一行的文字发生重叠
参考：【真正的能理解CSS中的line-height，height与line-height】