css元素的显示模式

元素的显示模式

元素显示模式：就是元素（标签）以什么方式进行显示，比如<div>自己独占一行，而一行可以放多个<span>。

HTML 元素一般分为块元素和行内元素两种。

块元素

1.常见的块元素有<h1>--<h6>,<p>,<div>,<ol>,<ul>,<li>等。

2.块元素的特点：
(1)比较霸道，自己独占一行。
(2)高度，宽度，外边距及内边距都可以控制。
(3)宽度默认是容器（父级元素）的100%。
(4)是一个容器（盒子），里面可以放行内元素或者块元素。

注意：1.文字类的元素内不能使用块级元素。例：<p>标签主要用于存放文字，因此<p>里不能放块级元素，特别是不能放<div>。
2.同理，<h1>--<h6>等都是文字类块级标签，里面也不能放其他块级元素。

例1：

	<div>比较霸道，独占一行</div>瑟瑟发抖

			div {
				/* width: 200px; */
				/* 不给宽度,div的父亲是body,body和整个浏览器是一样宽的.所以如果不指定宽度,那么就和父亲一样宽. */
				/* height: 200px; */
				background-color: pink;
			}

效果：

指定宽高度之后：

例2：

			<p>
				<div>这里有问题</div>
			</p>

根据上面的 注意1.这样写是错的，那效果是怎样的呢?

效果：

那为什么显示没有问题呢？

注意：点开 F12，检查就会发现浏览器执行的代码实际是：

而并不是按照所写的那样执行的。

行内元素

1.<span>标签是最经典的行内元素，也称为内联元素。

2.行内元素的特点：
(1)相邻的行内元素在一行上，一行可以显示多个。
(2)高，宽直接设置是无效的。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或其他行内元素。

<span>pink老师666666</span>
<strong>真帅</strong>
	

			span {
				width: 200px;
				height: 200px;  /* 行内元素,宽高直接设置是没有效果的. */
				background-color: skyblue;
			}

效果:

注意;
1.链接里不能再放链接。

2.<a> 里可以放块级元素，但给 <a>转换为块级模式最安全。

行内块元素

1.在行内元素中有几个特殊的标签 <img />，<input />，<td>，它们同时具有 块元素 和 行内元素 的特点。故称为 “行内块元素”。

2.行内块元素的特点：
和相邻 行内元素 或 行内块元素 在一行上，但他们之间会有空白缝隙，一行可以显示多个。

例3:

					<input type="text">
					<input type="text">

			input {
				width: 200px;
				height: 23px;
				background-color: pink;
			}

效果：

注意：
1.这两个表单在同一行显示，典型属于 行内元素 特点（一行显示多个元素）。
2.默认宽度就是它本身内容的宽度。（行内元素特点）。
3.高度，行高，外边距和内边距都可以控制（块元素特点） 。