行级标签与块级标签
标签的特征共分为三种:
- 行级标签
- 块级标签
- 行块标签
行级标签:
特性：
1.和其他元素标签同在一行
2.不支持宽高的设置，宽高全是有内容撑开
3.上下边距可以设置，但是没有效果，其他的边距都支持
4.标签间的换行会被认为是空格
块级标签:
特性：
1.独自占一行位置
2.支持宽高，可以设置宽高，
3.所有边距都支持
行块标签:
特性：
1.排列特性:可以和其他标签在同一行排列，一排无法放下的元素将在下一行开始排列
2.宽高特性：可以设置宽高，宽高均默认由内容或者字体行高撑开
3.边距特性：支持设置内外边距，并且正常生效
4.换行间距：标签之间的换行会被解析为空格
5.对齐方式：行块元素的位置会受到text-align文本对其方式的影响
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签的特征</title>
<meta name="descrption" content="">
<meta name="keywords" content="">
<style type="text/css">
.one,.two,.three,.four{
width:100px;
height:100px;
color:green;
background-color:orange;
border:1px solid red;
padding:10px;
margin:20px;
}
.box_1{
display:block; /* 行级标签拥有块级特性 */
width:100px;
height:100px;
background-color:red;
border:2px solid black;
}
.box_2{
display:inline; /* 块级标签拥有行级特性 */
width:100px;
height:100px;
background-color:blue;
}
.s_box{ /* 先将所要隐藏的内容的形式写好，并写一个display:none；隐藏 */
display:none;
width:100px;
height:100px;
background-color:red;
}
.box_3{ /* 将隐藏内容标签所在的父标签形式写好 */
width:100px;
height:100px;
background-color:pink;
}
.box_3:hover .s_box{ /* 使用伪类选择器将鼠标悬浮在父标签上，显示所要隐藏的内容 并设置隐藏内容所显示的标签特性 */
display:inline;
}
.max{
display:inline-block;
width:100px;
height:100px;
background-color:pink;
padding:10px;
border:2px solid red;
}
</style>
</head>
<body>
<!--
我们可以发现并不是所有的标签我们都能为其添加宽度高度等等一些特定样式。因为实际上通过这些标签的特性，除了宽高特性之外，在界面上默认的排列方式，内外边距的作用情况等等的特性我们可以把标签大致分为行级和块级两种
行级标签：<a>、<span>、<strong>、<em>、<i>、<b>....
特性：
1.和其他元素标签同在一行
2.不支持宽高的设置，宽高全是有内容撑开
3.上下边距可以设置，但是没有效果，其他的边距都支持
4.标签间的换行会被认为是空格
块级标签：<div>、<p>、<ul>、<li>、<h>、<dl>、<dt>、<dd>....
特性：
1.独自占一行位置
2.支持宽高，可以设置宽高，
3.所有边距都支持
-->
<!-- <span class="one"> 我是行级标签span</span>
<b class="two">我是行级标签b</b> -->
<div class="three">我是块级标签div</div>
<p class="four">我是块级标签p</p>
<span class="one"> 我是行级标签span</span>
<b class="two">我是行级标签b</b> <hr/>
<!--
标签特征的基本转换
通过CSS中的display属性，我们可以把元素的特性进行转换，比如将span标签转换成块级标签的特性，那么这个span标签的特性将与普通的块级标签没有区别，但是需要注意的是这时候的span标签依旧是一个行内标签
行级标签拥有块级特性：
.box_1{display:block;}
行级标签拥有块级特性，就不在有行级特性，但是她还是行级标签；
块级标签拥有行级特性：
.box_2{display:inline;}
块级标签拥有行级特性，就不在有块级特性，但是她还是块级标签。
不显示元素：.box_3{display:none;}
none移除元素，根从来没写过这个元素一样
用途：做一些类似于二级菜单的时候回用到
元素是否可见：visibility
值：
visible 可见
div{ visibility:visible; }
hidden 不可见
div{ visibility:hidden; }
对比：
display:none设置的元素将会从界面中完全的消失，不会留下之前的一点痕迹，而vsibility设置的元素只是隐藏了起来，主要表现在依旧占据原有的位置，调试工具能够检查到元素
-->
<b class="box_1">我是行级标签，但是我想有块级特性！！</b>
<b class="box_1">拥有块级特性，就不再有行级特性，但是还是行级标签！</b>
<div class="box_2">我是块级标签，但是我想拥有行级特性！！！</div>
<div class="box_2">拥有行级特性，就不在有块级特性，但是还是块级标签</div>
<div class="box_3">
<p class="s_box">我是不显示元素</p>
</div>
<span class="max">将行块特性保存在一起</span>
<!--
行块特性：
上卖所学到是可以将行级标签具有块级标签，或者块级标签具有行级标签的特征，但都是会丢失自己本来的特性
行块级标签具有行级标签和块级标签的所有特性
.max{display:inline-block;}
行块特性：
1.排列特性:可以和其他标签在同一行排列，一排无法放下的元素将在下一行开始排列
2.宽高特性：可以设置宽高，宽高均默认由内容或者字体行高撑开
3.边距特性：支持设置内外边距，并且正常生效
4.换行间距：标签之间的换行会被解析为空格
5.对齐方式：行块元素的位置会受到text-align文本对其方式的影响
常见的行块级标签：<img>、<input>、<select>...
-->
</body>
</html>
效果图如下:
此时讲到的行块标签,和以后会讲到的浮动有很大的相似之处,但是又有明显的各自使用的范围,注意行块标签会受到text-align对文本内容的影响,这个在以后的应用中会经常用到