块状元素和行内元素

来源：互联网发布：动画制作软件手机版编辑：程序博客网时间：2024/05/22 08:04

大牛王福朋先生对css中的display的分析

inline-block

<button> 按钮<textarea> 文本域<input> 输入框<object> <select>

块状元素：
*{box-sizing:border-box}给盒子设置宽度

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度（可设置宽高）. ，可以用display：inline设置成行内元素；

常用块状元素：<address>   定义地址<caption>   定义表格标题<dd>        定义列表中定义条目<div>       定义文档中的分区或节<dl>        定义列表<dt>        定义列表中的项目<fieldset>  定义一个框架集<form>      创建 HTML 表单<h1>        定义最大的标题<h2>        定义副标题<h3>        定义标题<h4>        定义标题<h5>        定义标题<h6>        定义最小的标题<hr>        创建一条水平线<legend>    元素为 fieldset 元素定义标题<li>        标签定义列表项目<ol>        定义有序列表<ul>        定义无序列表<p>         标签定义段落<table>     标签定义 HTML 表格<tbody>     标签表格主体（正文）<td>        表格中的标准单元格<tfoot>     定义表格的页脚（脚注或表注）<th>        定义表头单元格<thead>     标签定义表格的表头<tr>        定义表格中的行

行内元素：
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

<a>         标签可定义锚<abbr>      表示一个缩写形式<b>         字体加粗<big>       大号字体加粗<br>        换行<em>        定义为强调的内容<i>         斜体文本效果<img>       向网页中嵌入一幅图像<input>     输入框<label>     标签为 input 元素定义标注（标记）<select>    创建单选或多选菜单<small>     呈现小号字体效果<span>      组合文档中的行内元素<strong>    语气更强的强调的内容<textarea>  多行的文本输入控件

CSS<style type="text/css">          *{                margin:0;          }           div{                margin:1px;                background-color:red;          }           #test1 {                width:400px;          }           #test2 {                display:inline;          }          #a{                display:block;            }           </style>  HTML  <body>    <div id="test">我是块状元素，我独占一行，宽度是父级的宽</div>    <div id="test1">我是块状元素，我独占一行，但我有自己宽度</div>    <div id="test2">我是块状元素，但我被设置成了行内元素，我不能被设置宽度，宽度随元素的内容而变化</div>    <span>我是原生行内元素,我会跟着上面的行内元素兄弟"</span>    <span id="a">我是原生行内元素,我应该和我兄弟一起的，但我被设置成了块状元素，要独占一行"</span> </body>

这里写图片描述

阅读全文

0 0