一定义
块级元素
总是独占一行, 表现为另起一行开始, 而且其后的元素也必须另起一行显示; 宽度 (width) 高度 (height) 内边距 (padding) 和外边距 (margin) 都可控制;
例如:
效果:
块级效果图
行内元素
和相邻的内联元素在同一行;
宽度 (width) 高度 (height) 内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变, 就是里面文字或图片的大小;
例如:
- HTML
- <b > 这是行内元素</b>
- CSS
- b{
- background: red;
- }
效果:
行内效果图
区分方法:
块级元素都是独占一行, 也就是说如果它后面再跟一个元素 (不管是块级还是内联) 的话, 那个元素都是另起一行的
二元素列表
1. 块级元素
- <address>-----------------------// 联系方式信息.
- <article>-----------------------// 文章内容
- <aside>-------------------------// 伴随内容
- <audio>-------------------------// 音频播放
- <blockquote>--------------------// 块引用
- <canvas>------------------------// 绘制图形
- <dd>----------------------------// 定义列表中定义条目描述
- <div>---------------------------// 文档分区
- <dl>----------------------------// 定义列表
- <fieldset>----------------------// 表单元素分组
- <figcaption>--------------------// 图文信息组标题
- <figure>------------------------// 图文信息组 (参照 <figcaption>)
- <footer>------------------------// 区段尾或页尾
- <form>--------------------------// 表单
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>// 标题级别 1-6.
- <header>------------------------// 区段头或页头
- <hgroup>------------------------// 标题组
- <hr>----------------------------// 水平分割线.
- <noscript>----------------------// 不支持脚本或禁用脚本时显示的内容
- <ol>----------------------------// 有序列表
- <output>------------------------// 表单输出
- <p>-----------------------------// 行
- <pre>---------------------------// 预格式化文本
- <section>-----------------------// 一个页面区段
- <table>-------------------------// 表格
- <tfoot>-------------------------// 表脚注
- <ul>----------------------------// 无序列表
- <video>-------------------------// 视频
2. 行内元素
- <a>----------------------------// 锚点
- <abbr>-------------------------// 缩写
- <acronym>----------------------// 首字
- <b>----------------------------// 粗体(不推荐)
- <bdo>--------------------------//bidi override
- <big>--------------------------// 大字体
- <br> --------------------------// 换行
- <cite>-------------------------// 引用
- <code>-------------------------// 计算机代码(在引用源码的时候需要)
- <dfn>--------------------------// 定义字段
- <em>---------------------------// 强调
- <font>-------------------------// 字体设定(不推荐)
- <i>----------------------------// 斜体
- <img>--------------------------// 图片
- <input>------------------------// 输入框
- <kbd>--------------------------// 定义键盘文本
- <label>------------------------// 表格标签
- <q>----------------------------// 短引用
- <s>----------------------------// 中划线(不推荐)
- <samp> ------------------------// 定义范例计算机代码
- <select>-----------------------// 项目选择
- <small>------------------------// 小字体文本
- <span>-------------------------// 常用内联容器, 定义文本内区块
- <ke>---------------------------// 中划线
- <strong> ----------------------// 粗体强调
- <sub>--------------------------// 下标
- <sup>--------------------------// 上标
- <textarea>---------------------// 多行文本输入框
- <tt>---------------------------// 电传文本
- <u>----------------------------// 下划线
- <var>--------------------------// 定义变量
三块级元素和内联元素之间的转换
1display
display:none; 不显示该元素, 也不会保留钙元素原先占用的文档流位置
display:block; 转化为块级元素
display:inline; 转化为行内元素
display:inline-block; 转化为行内块级元素
2float(浮动)
float: 把行内元素设置完 float:left/right 后, 该行内元素的 display 属性被赋予 block 值, 且拥有浮动特性
3position(定位)
position: 把行内元素设置为 position:absolute/fixed 后, 都会使原先的行内元素变为块级元素
注意: 设置 float 和 positon 会有其他的副作用
四块级元素与内联元素的区别
区别 1
块级: 块级元素会独占一行, 默认情况下宽度自动填满其父元素宽度
行内: 行内元素不会独占一行, 相邻的行内元素会排在同一行其宽度随内容的变化而变化
区别 2
块级: 块级元素可以设置宽高
行内: 行内元素不可以设置宽高
区别 3
块级: 块级元素可以设置 margin,padding
行内: 行内元素水平方向的 margin-left; margin-right; padding-left; padding-right; 可以生效但是竖直方向的 margin-bottom; margin-top; padding-top; padding-bottom; 却不能生效
区别 4
块级: display:block;
行内: display:inline;
可以通过修改 display 属性来切换块级元素和行内元素
参考:
- https://developer.mozilla.org/zh-CN/docs/web/HTML/Block-level_elements
- http://blog.csdn.net/chen_zw/article/details/8713205
注: 自由转载 - 非商用 - 非衍生 - 保持署名
来源: http://www.jianshu.com/p/89e4d10cf3e4