块级元素,行级元素理解和应用

块级元素

1.块级元素独占一行,之后的元素也只能另起一行,相邻的两个块级元素不能共用一行。

2.块级元素其元素的高度,宽度,行高和顶部底部边距都是可以设置的。

3.元素的宽度如果不设置的话,默认为父元素的宽度。

4.块级元素对应的属性为display:block

常见块级元素有:

  <address>   <article>  <p>

<aside>//定义内容之外的内容.可作为标题的解释内容或副标题. 不会自动缩进

<audio>//音频标签 <blockquote> 定义较长的引用内容,有首行缩进。

<canvas>//绘图标签 。

<caption>定义表格标题,

<dd>表格中的项目描述 <div> 定义文档流中小结,盒子模型标签 。<dl>定义列表标签。<dt>定义列表中的项目标题

<details>定义元素的细节  <fieldset>定义单中元素的边框  <figcaption>定义figure元素的标题,<figure>定义媒介内容的分组,以及标题。

<footer> 定义section 或page的页脚  <form> 表单 <h1> -<h6>定义html标题  <header> <hr>定义水平线

<legend>定义fieldset元素的标题   <li>定义列 <menu> 定义列表或菜单 //所有主流浏览器均不支持 menu 元素。

<meter>定义预定义范围内的度量 <nav>定义导航 <noframes>定义针对不支持的框架的用户的替代内容

<noscript> 定义针对不支持客户端脚本的用户的替代内容

<ol> 定义有序列表,<output> 定义输出的一些类型

<pre>预格式标签 <section> 部分段落标签 <table>表格 <tbody>表格主内容 <td>表格列  <tfoot> 脚注标签 <th>表格表头标签 

<thead> 表格表头内容标签 <time> 日期标签 <tr> 表格行标签 <ul>无序列表标签

行级元素 

1.可以与其他元素共用一行,不必另起一行。

2.行级元素的高度,宽度,顶部,底部的边距不能设置。

3.元素的宽度就是它包含的文字图片的宽度,不可改变。

4.行内元素对应的属性为display :inline

常见的行级元素:

<a> <abbr> 缩写标签 <acronym>定义只取首字母的缩写 <b>加粗 <bdo>文字方向

<big>大号文本 <br>简单的折行 <button>按钮 <cite>引用

<code> 代码标签 <command> 命令按钮 <dfn> 项目描述标签//尽量少用 <del> 定义删除文本 

<em> 定义强调文本 <i>斜体 <img>定义图像 <input>定义输入 <kbd>定义键盘 <label>input的标注

<mark>定义有记号的文本 <pregress>定义任何类型的任务的进度 <q>定义短应用 <samp> 计算机代码样本

<select> 下拉列表 <small> 小号文本 <span> 文档节 <strong> 强调文本标签 <sub> 定义下标文本 <sup>上标文本

<textarea> 文本框 

行级元素和块级元素的相互转换

display:inline 可以将块级元素转换为行级元素,display:block可以将行级元素转换为块级元素。

display:inline-block可以将元素设置为块-行级元素。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,406评论 1 45
  • HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显...
    adingmoon阅读 505评论 0 0
  • 2018年只剩下3天 作业雨的日子让我格外惆怅 傻傻等到这个时分 有些头疼、眼睛痛 到没有暖风的阳台打个冷战 轰轰...
    编辑木子阅读 267评论 2 6