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中register, pascal, cdecl, stdcall, safecall(转)

    源:http://blog.sina.com.cn/s/blog_552c78120100hsr9.html 注: 使用错误,或者在该加的地方没有加,可能会出现"privileged ins ...

  2. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  3. USACO刷题之路

    重拾经典 本科生涯结束了,在大学做的ACM竞赛现在基本忘的差不多了.USACO作为一个经典的题库,本来是面向OI选手的,但是由于题目质量很高所以受到大家的好评,所以我这次就从它开始我的刷题之路吧. 由 ...

  4. Hibernate查询之API查询

    Hibernate在检索数据上,可以使用SQL.HQL和官方API进行查询,本人主要利用API进行相关查询的小demo. 话不多少直接上demo. demo1:基本查询 /** * 默认不加任何条件的 ...

  5. OPENCV条形码检测与识别

    条形码是当前超市和部分工厂使用比较普遍的物品,产品标识技术,使用摄像头检测一张图片的条形码包含有两个步骤,第一是定位条形码的位置,定位之后剪切出条形码,并且识别出条形码对应的字符串,然后就可以调用网络 ...

  6. ZOJ 3923 Handshakes

    水题. 算一下每个人和之前的人握手次数+之后的人和这个人握手次数.取最大值. #include<cstdio> #include<cstring> #include<cm ...

  7. Android线程之基本用法

    一: 在android中有两种实现线程thread的方法: 一种是,扩展java.lang.Thread类 另一种是,实现Runnable接口 二: Thread类代表线程类,它的两个最主要的方法是: ...

  8. IP头，TCP头，UDP头，MAC帧头定义（转）

    源:IP头,TCP头,UDP头,MAC帧头定义 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER { ]; //目的m ...

  9. SD卡兼容性问题（转）

    看到一篇关于硬件抗干扰的应用实例,很有参考值.所以,转过来方便查找. 源文:SD卡兼容性问题 最近碰到了一个SD卡兼容性的问题.主芯片SD卡组的信号,经过转接板,长排线,然后再到SD卡子板之后.对多种 ...

  10. WebView点击图片看大图效果

    在webViewDelegate里面添加如下代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 - (voi ...