块级元素
每个块级元素通常都会占据一整行或多挣整,且可以设置高度宽度对齐等属性常用于网页结构的布局和搭建,常见的块级元素有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>
等等,其中<div>
标签是最典型的块元素
特点:
1.总是从新遗憾开始
2.行高,高度,外边距以及内边距都可以控制
3.宽度默认是屏幕(容器)的100%
4.可以容纳内联元素元素和其他块元素
行内元素行内元素(内联元素),不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置高度,宽度,对齐等属性,常用于控制页面中文本的样式,常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
特点:
1.和相邻的行内元素在同一行
2.高,宽无效,水平方向的padding和margin可以设置,垂直方向无效
3.默认宽度就是内容本身的宽度
4.行内元素除了<a>
外都只能包容文本或其他行内元素
注意:
1.只有文字才能组成段落,因此<p>
里面不能放块级元素,<h1>-<h6>
和<dt>
这些标签也不可以,因为他们都是文字类块级标签,里面不能放其他块级元素
2.链接里面不能再放链接
行内块元素:在行内元素中有几个特殊的标签:<img />,<inpt />,<td>,
我们可以对他们设置宽高和对齐属性,有些资料将他们称为行内块元素(可以理解成明明是行内元素却又块级元素的部分特点)
特点:
1.与相邻的行内元素(行内块元素)再一行上,但是之间又间隙
2.默认宽度是它本身的宽度
3.高度,行高,内外边距都可以控制
标签显示模式的相互转换 | |
---|---|
块转行内: | display:inline |
行内转块 | display:pock |
块,行内转行内快 | display:inline-block |