行内元素(inline-level)
行内元素又称内联元素,不能独占一块区域,根据自身内容(文字/图片)大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性,通常用于
控制页面文本内容。
**特点**
1.总是和相邻的行内元素从左到右排成一排。
2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效(详见5 6)。
3.默认宽度是其自身内容的宽度。
4.行内元素仅能容纳其他行内元素或文本。*(特殊:<a>内可以放块级元素但<a>内不可再放链接)*
5.margin-top margin-bottom无效,左右正常。
6.padding-top padding-bottom有效果,但和正常不同可以认为解析无效。左右正常。
7.line-height和text-center有效果,但和正常不同可以认为解析无效。(给自己)
8.所有的行内元素,在垂直方向上是相对于文字基线对齐。
9.所有的行内元素会识别回车为空格,在浏览器上水平之间就有一个缝隙。
常见的行内元素如:<span> <a> <strong> <em> <b> <s> <i> <font>......
块级元素(block-level)
块级元素会独占一行或多行,其宽高可以任意设置,通常用于搭建网页布局部分,使网页结构更加紧凑合理。
**特点:**
1.每个块级元素均独占一行。
2.宽度高度可以自定义设置。
3.默认宽度为所在容器宽度的100%。
4.可容纳行内元素等其他元素。*(特例见5)*
5.p不能包其他块级元素,可能会被解析成两个并列的p标签。
6.h1-h6:不能包自己和彼此,但是可以包其他元素。
常见的块级元素如: <div> <p> <ul> <li> <h1-h6>......
行内块元素(inline-block)
可以理解为特殊的行内元素,像<img>可以设置宽高、对齐等属性的同时又不会独占一行,把这样一类既具有行内元素特点又具有块级元素特点的标签
称为行内块元素。
**特点:**
1.和相邻的行内元素在同一行,但之间会有空白缝隙。
2.默认的宽高是其本身内容的宽高。
3.宽度、高度、行高、内外边距都可自定义设置。
常见的行内块元素如:<img> <input> <select> <textarea> <button> <label>......
标签显示模式转换(display)
当给一个元素设置宽高时无效时,或想让元素显示在一行时,可用display方法来改变标签的显示模式。
行内元素:---->display:inline;
块级元素: ---->display:block;
行内块元素:----> display:inline-block;
加上类似li的小黑点:---->display:list-item;(需要放在ul/ol中)
隐藏:---->display:none (用于实现鼠标悬停出框)
例子 div :hover+p {display:block;}