元素的显示模式即为一个标签以什么方式进行显示,一般分为块元素和行内元素
块元素
常见的块元素包括
<h> <p> <div> <ul> <ol> <li>等
块元素的特点:
1.块元素中的内容独占一行
2.块元素中的高度、宽度以及页边距都可以设定
3.块元素的默认宽度是上一级元素的100%
4.块元素内部还可以放其他的块元素或行内元素
5.文字类元素内部不能放块元素,如p标签和h标签
行内元素
常见的行内元素包括
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
行内元素的特点:
1.相邻行内元素的内容都会显示在一行上
2.直接设置高、宽是无效的
3.默认宽度就是内容本身的宽度
4.行内元素只能容纳文本或其它行内元素,不能添加块元素
5.a标签内部可以放块元素,但是a里面不能再嵌套a标签,且a如果要放置块元素需要提前转化
行内块元素
行内块元素同时具有行内元素和块元素的特点,一般常见的包括
<img> <input> <td>
其特点是:
行内元素型:
1.和相邻行内块元素在同一行上
2.默认宽度是其本身内容的宽度
块元素特点:
高度、行高、外边距、内边距都可以被控制
元素显示模式的转化
将一类元素的显示模式转化为另一类
/*将行内元素转化为块级元素(以<a>标签为例)*/
<style>
a{
width:50px;
height:50px;
background-color:red;
display:block;
</style>
其中的display:block可以将行内元素转化为块元素,使得链接可以在这个边长为50px的红色正方形内均生效。
/*将块元素转化为行内元素(以<div>为例)*/
<style>
div{
display:inline;
}
</style>
同理,转化为行内块元素的代码为display:inline-block