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. ural1752 Tree 2

    Tree 2 Time limit: 1.0 secondMemory limit: 64 MB Consider a tree consisting of n vertices. A distanc ...

  2. Tesseract-OCR使用记录

    Tesseract是一个开源的OCR(Optical Character Recognition,光学字符识别)引擎,可以识别多种格式的图像文件并将其转换成文本,目前已支持60多种语言(包括中文).  ...

  3. 什么是deferred对象

    $.when().done().then()的用法  http://www.cnblogs.com/tiancai/p/5817996.html jQuery的开发速度很快,几乎每半年一个大版本,每两 ...

  4. Oracle GoldenGate 异构平台同步（Mysql到Oracle）

    一.OGG安装配置(源端) 1.OGG下载 http://www.oracle.com/technetwork/cn/middleware/goldengate/downloads/index.htm ...

  5. CodeForces 450B Jzzhu and Sequences

    矩阵快速幂. 首先得到公式 然后构造矩阵,用矩阵加速 取模函数需要自己写一下,是数论中的取模. #include<cstdio> #include<cstring> #incl ...

  6. SpringJDBC学习之路(1)

    本人从事java开发也有一段时间了,项目开发也有好几个.但感觉所有写的代码无非就是搬数据取数据.service层写的逻辑多一点,最近做的一个项目整个项目的结构以及层次发现代码过于臃肿冗余.同样一个方法 ...

  7. ajax--2017年1月15日

    听说点六下就能复制了? ajax: 一般处理程序(数据接口):ashx 跨语言传递数据:xml: 结构不清晰 代码量比较大 查找起来比较费事 非面向对象结构 json: 结构清晰 代码量相对较小 面向 ...

  8. eclipse快速定位java对应的class

    当前设置值,只能定位class文件 设置eclipse External Tools Configurations... Program --> new New 创建viewclass.bat文 ...

  9. tomcat 插件

    1. http://www.eclipsetotale.com/tomcatPlugin.html

  10. 三星note4，微信公众号开发，页面闪退

    在做微信公众号开发时,使用三星note4测试,有一个select框闪退的问题出现. 出现该问题的原因是该选择框,设置了appearance:none;属性.查找了官方解释是: 所有主流浏览器都不支持 ...