css块级标签，行内标签，行内块标签的转换

在基础1中，我详细讲了css的常见属性，几种不同的选择器，在此基础之上我们来进一步地认识它们的特性从而更好地学习和掌握相关开发技能。

HTML标签的分类

在讲标签分类的时候，我们作为初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！

首先我们可以按照显示的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。

块级标签 

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>

行内标签 

特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

典型的行内标签有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>

行内块标签 ：

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

典型的行内标签有：<img>，<input>

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。

下面请看如下示例：

1：将行内标签转换为块级标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>行内标签转块级标签</title>

         <style type="text/css">

             a{

                 width: 200px;

                 height: 200px;

                 background-color: red;

                 display: block;

             }

         </style>

     </head>

     <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->

         <a href="https://www.baidu.com">百度</a>

     </body> <!--而当你用display: block;代表行内标签转为块级标签-->

 </html>

运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。

2：将行内标签转换为行内块标签

上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后

它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。

 <html>

     <head>

         <title>块级和行内块级</title>

         <style type="text/css">

             a{

                 width: 100px;

                 height: 100px;

                 background-color: green;

                 display: inline-block;

             }

             div{

             width:100px;

             height:100px;

            background-color: red;

            margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/

            }

         </style>

     </head>

     <body>

         <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->

         <a href="https://www.baidu.com">百度一下</a>

         <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->

         <div>我是div2</div>

     </body>

 </html>

运行结果：

3.将块级标签转换为行内标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>块级标签转行内标签</title>

         <style type="text/css">

             div{

                 width: 100px;

                 height: 100px;

                 background-color: red;

                 display: inline;

             }

         </style>

     </head>

     <body>

          <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->

          <div>https://www.google.com</div>

     </body>

 </html>

效果如下：

有关块级标签，行内标签，行内块级标签我就先写到这里，也欢迎大家看了之后能够多指点，感谢。

css块级标签，行内标签，行内块标签的转换（2）的更多相关文章

  1. block（块级元素）和 inline（内联元素） 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  2. HTML哪些是块级元素，哪些是行内元素、

    块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1> ...

  3. 块级元素的text-align对行内元素和果冻元素(inline-block)的作用

    块级元素社设置了text-align:center以后,对其直接行内元素/果冻元素.继承行内元素/果冻元素都会产生“居中效应”. <style> .test4{ text-align: c ...

  4. 行内元素与块级元素的区别，行内块级元素在IE8-的兼容性

    行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行 ...

  5. javascript中不存在块级作用域,所以要小心使用在块级作用域中的函数声明所带来的作用域混乱.

    在javascript中函数的作用域是一个非常重要的概念. javascript中是没有块级作用域,但是有函数作用域的概念. 我们在开发的过程中,经常会遇到这样的问题, 某个函数我暂时不需要,不想声明 ...

  6. 浅谈css的行内类型标签和块级标签

    常用标签的行内类型标签有:a.span.img:块级标签有:div.p.h1~6.ul.ol.li.dl.dt.dd. 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height ...

  7. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  8. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  10. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

随机推荐

  1. Delphi天气预报查询

    Delphi天气预报查询 天气预报接口api(中国天气网) 开源免费天气预报接口API以及全国所有地区代码!!(国家气象局提供) 真正的中国天气api接口xml,json(求加精) ...

  2. 合并BIN文件的两种方法(转)

    源:http://blog.chinaunix.net/uid-20745340-id-1878803.html 合并BIN文件的两种方法 在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一 ...

  3. PHP 对MySQLI预处理的包装

    mysql 类 <?php class Mysql { private static $instance; private $link; private $query; private $stm ...

  4. Android Service生命周期 Service里面的onStartCommand()方法详解

    在Demo上,Start一个Service之后,执行顺序:onCreate - > onStartCommand 然后关闭应用,会重新执行上面两步. 但是把代码拷贝到游戏工程发现,关闭游戏后,只 ...

  5. Dom编程（三）

    简单菜单制作,参考代码: var ul = document.getElementById("parent"); var lis = ul.getElementsByTagName ...

  6. CentOS 6.X x64 编译安装 Countly

    CentOS 6.X  x64 编译安装Countly 安装所需的软件 yum -y install supervisor ImageMagick sendmail 1. 安装 node.js wge ...

  7. mysql 二级索引

    mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...

  8. Jetty实战之 嵌入式Jetty运行Servlet

    http://blog.csdn.net/kongxx/article/details/7230080 Jetty实战之 嵌入式Jetty运行Servlet 分类:JettyJava (19530)  ...

  9. (中等) POJ 1703 Find them, Catch them，带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  10. (简单) POJ 1426 Find The Multiple，BFS+同余。

    Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...