vue学习 第4天 (2) css ---元素显示模式 display

 

导学： 

　　1）设置元素显示模式 display

　　2）block（块）、inline（行内）、inline-block（行内块）

　　3）每一种元素模式的特点

 

1、元素显示模式 :   独占一行 （块元素） 和  共用一行 （行内元素）

　　　　HTML元素一般分为块元素和行内元素两个类型。

 

2、块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。<div >最经典

　　1）独占一行

　　2）宽度默认容器的100%

　　3）高度、宽度、外边距以及内边距都可以控制

　　4）是一个容器，里面可以放行内或块级元素

　　注意： 文字类的元素内不能用块级元素 例如： <p>、<h1>~<h6>

　　

3、行内元素(内联元素)：<a>    与  <strong>、<b>、<i>、等文字样式标签，<span>最典型的行内式元素
　　1）相邻行内元素可在一行上显示，一行显示多个

　　2）宽和高由内容的决定、不可直接设置

　　3）默认宽度是 它本身内容的宽度

　　4）行内元素只能放文本和其他行内元素

　　注意：1）链接 <a> 标签 里面不能再放链接

　　　　　2）特殊情况下，链接<a>里面可以放块级元素，最好手动转换到块级元素　

 

4、行内块元素（部分资料的叫法特殊）<img>、<a>、<td>

　　同时具有块元素和行内元素的特点

　　1）相邻的行内（行内块）元素可以在一行上，但是他们之间会有空白缝隙

　　2）默认宽度是内容宽度（行内特点）

　　3）宽高等可以设置（块特点）

 

5、总结　

　　　 

6、***元素显示模式转换***

　　1）写法：  选择器 {display: 元素显示类型；  } 

　　2）元素显示类型：block（块）、inline（行内）、inline-block（行内块）