HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。 霸道

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

块级元素的特点

(1)总是从新行开始

(2)高度,行高、外边距以及内边距都可以控制。

(3)宽度默认是容器的100%

(4)可以容纳内联元素和其他块元素。

行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。

行内元素的特点:

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊)

  注意:

  1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
  2. 链接里面不能再放链接。

*块级元素和行内元素区别

块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。

行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。

行内块元素(inline-block)

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。

标签显示模式转换 (display)

块转行内:display:inline;

行内转块:display:block;

块、行内元素转换为行内块: display: inline-block;

CSS3标签显示模式的更多相关文章

  1. CSS 标签显示模式

    标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高 ...

  2. CSS——标签显示模式(display)

    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...

  3. 0014 标签显示模式:display(重点)

    目标: 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式 什么是标签的显示模式? 标签以什么方式进行显示, ...

  4. html 标签 显示模式

    1.html 标签模式分为三类:块级标签,行内标签(内联),行内块标签 a. 块级标签 典型代表:div.h1~h6.p.ul.ol.li.dl.dt.dd等. 特点:可以设置宽高,独占一行 b.行内 ...

  5. 标签显示模式(display)

    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...

  6. ie支持CSS3标签

    让IE6/IE7/IE8浏览器支持CSS3属性 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/w ...

  7. css3标签

    -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表chrome.safari私有属性 -o代表opera私有属性 border-radius:2em; 向div ...

  8. css3标签学习总结文章

    1. :nth-child和 :nth-of-type 区别 比如: p:nth-child(2) 满足条件:1.必须是p标签:2.必须是父元素的第2个子元素:P:nth-of-type(2) 满足条 ...

  9. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

随机推荐

  1. 如何将字符串转化为Jsoup的Document 对象

    有些时候在java操作解析html元素的时候比较繁琐,今天螃蟹就介绍一种可将html转换为document对象的方法——jsoup jsoup为我们解析html提供了比较全的API接口,我们通过将ht ...

  2. windows socket扩展函数

    1.AcceptEx() AcceptEx()用于异步接收连接,可以取得客户程序发送的第一块数据. BOOL AcceptEx( _In_  SOCKET       sListenSocket,   ...

  3. ubuntu16.04无法关机解决方法

    11 down vote   In my case these simple steps worked for me fine: Press Ctrl+Alt+T to go to a termina ...

  4. asp.net下配置使用Memcached 如何使用Memcached .ne使用BeITMemcached.dllt配置Memcached的方法

    首先在项目中引用 BeITMemcached.dll 在Web.config中配置节点 <configSections> <section name="beitmemcac ...

  5. [指南] 15分钟学会MySQL(Linux版)

    原文链接:http://www.mysqlpub.com/thread-348-1-1.html 原创出处:MySQLpub.com  , 作者:kider  ,转载请注明作者和出处,并不能用于商业用 ...

  6. silverlight导出图片文件

    新建一个Silverlight应用程序,添加下面两个控件: image控件:image1: Button控件:Click="Button1_Click"; code-Behind代 ...

  7. Linux远程批量工具mooon_ssh和mooon_upload使用示例

    目录 目录 1 1. 前言 1 2. 批量执行命令工具:mooon_ssh 2 3. 批量上传文件工具:mooon_upload 2 4. 使用示例 3 4.1. 使用示例1:上传/etc/hosts ...

  8. Ng第七课:正则化与过拟合问题 Regularization/The Problem of Overfitting

    7.1  过拟合的问题 7.2  代价函数 7.3  正则化线性回归 7.4  正则化的逻辑回归模型 7.1  过拟合的问题 如果我们有非常多的特征,我们通过学习得到的假设预测可能能够非常好地适应训练 ...

  9. python基础之列表list元组tuple

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7041763.html python基础之列表list元组tuple 列表li ...

  10. 自定义cell的高度

    // //  RootTableViewController.m //  Share // //  Created by lanouhn on 15/1/20. //  Copyright (c) 2 ...