标签的分类及补充

一|标签的分类
1、行级元素，也叫内联元素 inline
特点：a、内容决定元素所占位置
b、不可以通过css改变宽高
例：span、 strong、em、a、del

2、块级元素 block
特点：a、独占一行
b、可以通过css改变宽高
例：div、p、ul、li、ol、form、adress

3、行块级元素 inline-block
特点：a、内容决定大小
b、可以改变宽高
例：img
注意点：
//我们可以通过 display 更改元素属性，如果写成 display:none;元素就没有了
//<img src = “”> 一般只设置宽或高，另外一个就等比例缩放了 -->

举例：解决图片之间有缝隙的bug
html部分代码：

<img src="">
<img src="">
<img src="">
<img src="">

css部分代码：

img{
	border: 0;
	width: 100px;
	height: 200px;
	margin-left: -6px;
}

未加margin-left：-6px；:

加了margin-left:-6px;:

但是上面这种解决方法不好，再上传到线上的时候就不准了。
凡是自带 inline 特效的元素，都有文字特性，有文字特性就会被分割。

更优的解决办法：写成<img scr = “”><img scr = “”><img scr = “”>这样就可以解决了（在一行写，并且
不写空格），写成一行，图片间的空格就没有了
原理：在代码上传服务器时会进行两种压缩方法，A 字符压缩（如把 img 用 A 代替）；
B 去空格，去回车

二、编程思路
1、先写html，再写css
2、一边写html，一边写css
3、先写css定义尺寸等，再写html。也就是先定义功能，再选配功能（方便团队合作）
一个html可以引入多个css，一个csc可以对应很多html。
例：

<div class="red size1"></div>
<div class="green size2"></div>
<div class="gray size3"></div>

.red{
	background-color: red;

}

.gray{
	background-color: gray;
}

.green{
	background-color: green;
}
.size1{

	width: 100px;
	height: 100px;
}
.size2{
	width: 200px;
	height: 200px;
}
.size3{
	width: 300px;
	height: 300px;
}

三、初始化标签
初始化标签：意思就是改变html自带的系统属性，变成自定义标签

1、
自带的系统属性是斜体，

<em>123</em>

初始化为为红字、不斜体

em{
	font-style: normal;
	color: #f40;
}

2、

<a href="#">1234</a>

a{
	text-decoration: none;
	color: #424242;
}

3、

<ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
</ul>

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

四、通配符标签
*通配符选择器能初始化所有的标签

<p>1</p>
 	<h1>12</h1>
 	<ul>
 		<li>100</li>
 		<li>200</li>
 		<li>300</li>
 	</ul>

*{
	margin: 0;
	padding: 0;
	text-decoration:none;
 	list-style:none;
 	color: #f40;

}