CSS学习之block、inline-block、inline

块级元素(block level):

块级元素:元素呈现“块”状,有自己的宽度和高度,也就是可以设置宽(width)和高(height),除此之外,独自占据一行高度(float浮动除外),一般可以作为其他容器使用,可容纳块级元素和行内元素。块级元素有以下特点:

  1. 每个块级元素都是独自占一行。 
  2. 元素的高度(height)、宽度(width)、行高(line-height)和边距(margin、padding)都是可以设置的。   
  3. 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%)。

常见块级元素:

<body>、<address>、 <caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>~<h6>、<hr>、 <legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

注意:块级元素内能嵌套块级元素、行内元素。但是h1-h6、p、dt这几个块级元素不能嵌套块级元素。

行内元素(inline):

​行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。行内元素有以下特点: ​

  1. 每一个行内元素可以和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行。 
  2. 行内元素的高度(height)宽度(width)行高(line-height)及内、外边距的底和顶边距(margin-top、padding-top、margin-bottom、padding-bottom)不可设置。 
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

常见行内元素有以下:
 <a>     //标签可定义锚 
 <abbr>     //表示一个缩写形式 
 <acronym>     //定义只取首字母缩写 
 <b>     //字体加粗 
 <bdo>     //可覆盖默认的文本方向 
 <big>     //大号字体加粗 
 <br>     //换行 
 <cite>     //引用进行定义 
 <code>    // 定义计算机代码文本
 <dfn>     //定义一个定义项目
 <em>     //定义为强调的内容
 <i>     //斜体文本效果
 <img>     //向网页中嵌入一幅图像
 <input>     //输入框
 <kbd>     //定义键盘文本
 <label>     //标签为 input 元素定义标注(标记)
 <q>     //定义短的引用
 <samp>     //定义样本文本
 <select> // 创建单选或多选菜单
 <small>     //呈现小号字体效果
 <span>     //组合文档中的行内元素
 <strong> //加粗
 <sub>     //定义下标文本
 <sup>     //定义上标文本
 <textarea>     //多行的文本输入控件
 <tt>     //打字机或者等宽的文本效果
 <var>    // 定义变量

注意:行内元素内只能嵌套行内元素,不能够嵌套块级元素。

行内块级元素 inline-block:

行内块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元素宽度和高度,也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素,它可以设置高宽以及一行多个。具体特点如下:

  1. 和其他行内或行内块级元素元素放置在同一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

注意:img和input元素虽然属于行内元素,但是又可以细分为行内替换元素。所以它表现的像行内块级元素一样。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章