码迷,mamicode.com
首页 > Web开发 > 详细

html中块级元素和行内元素

时间:2017-07-01 19:28:34      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:ges   表示   splay   http   输入框   ora   play   多行   display   

块级元素和行内元素的三个区别

1.行内元素与块级元素直观上的区别:

  行内元素会在一条直线上排列,都是同一行,水平方向排列

  块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行

2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素

3.行内元素和块级元素属性的不同,主要是盒模型属性上

  行内元素设置width无效,height无效(可以设置line-height),

  行内元素margin上下无效,padding上下无效

行内元素转换块级元素,用css实现

  display:block(字面意思表现形式设为块级)

块级元素

常用的块级元素

<div>定义文档中的分区或节点

<h1>到<h6>标题

<p>定义段落

<ul>无序列表

<ol>有序列表

<li>列表项

<dl>自定义列表

<dt>自定义列表项标题

<dd>自定义列表项

<form>创建HTML表单

<tabel>定义HTML表格

<caption>表格标题

<thead>表格表头

<tbody>表格主题

<tfoot>表格页脚

<th>表头单元格

<td>表格中的标准单元格

<tr>定义表格中的行

<pre>预格式话文本

<hr/>

行内元素

<a>锚点标签

<abbr>表示一个缩写形式

<span>组合文档中的行内元素

<b>加粗标签

<strong>语义更强烈的加粗标签

<i>斜体文本效果

<em>斜体但是语义更强烈

<img>向页面中插入图片

<input>输入框

<label for="">标签为 input 元素定义标注(标记)

<small>呈现小号字体效果

<select>创建单选和多选菜单,下拉菜单

<sub>下标文本

<sup>上标文本

<textarea>多行可控文本输入框

行内块级元素inline-block

<img>向页面插入图片

<input>输入框

<button>按钮

 技术分享

html中块级元素和行内元素

标签:ges   表示   splay   http   输入框   ora   play   多行   display   

原文地址:http://www.cnblogs.com/xiao-he-shang/p/7103124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!