标签类型：

标签只有两类：行内元素和块元素

行内元素：内容撑开宽高

块元素：默认独占一行

注意：

在使用display时，会遇到一种inline-block类型的标签。这种标签不属于标签的分类。

1.块元素block特点

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            body{

                margin: 0;

                padding: 0;

            }

            div{

                height: 100px;

                background: red;

                margin: 50px;

                padding: 30px;

            }

        </style>

    </head>

    <body>

        <!--

            块元素的特征

                1、默认独占一行

                2、没有给宽度的时候，宽度是auto，撑满一行(宽度就是父级的宽度)

                3、支持所有的css命令

        -->

        <div>div</div>

    </body>

</html>

2.行内元素inline特点

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            body{

                margin: 0;

                padding: 0;

            }

            span{

                background: pink;

                width: 200px;

                height: 200px;

                /*margin: 50px;*/

                padding: 50px;

            }

            div{

                background: green;

            }

        </style>

    </head>

    <body>

        <!--

            行内元素的特征

                1、内容撑开宽高

                    宽高的值都是auto，只不过显出来的宽高是由内容撑开的

                2、不支持设置宽高

                3、不支持上下的margin与上下padding(左右支持)

                    上下的padding是有问题，虽然把背影撑出来了，这个只是表面现象，它不会对其它的元素有影响

                4、所有的行内元素都会在一行显示

                5、代码换行会被解析成一个空格

        -->

        <span>铁道学院</span>

        <strong>kaivon</strong>

        <div>div</div>

    </body>

</html>

3.行内块元素inline-block特点

注意：它不属于标签分类中的一类。

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            span{

                width: 100px;

                height: 100px;

                background: red;

                display: inline-block;

            }

            div{

                width: 100px;

                height: 100px;

                background: green;

                display: inline-block;

            }

        </style>

    </head>

    <body>

        <!--

            display:inline-block;           行内块元素

                特征：

                    1、行内元素支持宽高

                    2、块元素可以在行中显示

                    3、不给宽高的话，宽度会由内容撑开

                    4、代码换行会被解析成一个空格

                    5、IE6、7不支持块元素的inline-block

                        IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block

        -->

        <span>kaivon</span>

        <div>kaivon</div>

    </body>

</html>

4.块元素和行内元素有哪些？

行内元素：

a,span,strong,em,mark,img,time

块元素：

div ,h1~h6,p,列表标签（ul,ol,li,dd,dt),header,nav,footer,section,article,aside

5.标签类型转换

通过设置display的取值来改变标签的类型：

display的值：

1）none：隐藏标签

2）block：块元素

3）inline：行内元素

4）inline-block：行内块元素

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 100px;

                height: 100px;

                background: green;

                color: #fff;

                display: inline;

            }

            span{

                background: red;

                width: 100px;

                height: 100px;

                display: block;

            }

        </style>

    </head>

    <body>

        <!--

            块元素转行内元素            display:inline

                转换后块元素就具有了行内元素的特征（只是显示为行内元素，本身还是块元素）

            行内元素转块元素            display:block

                转换后行内元素就具有了块元素的特征（只是显示为块元素，本身还是行内元素）

        -->

        <div>div1</div>

        <div>div2</div>

        <span>span1</span>

        <span>span2</span>

    </body>

</html>

一天搞定HTML----标签类型与类型转换05的更多相关文章

  1. 一天搞定HTML----a标签02

    1.细说a标签 2.代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. sklearn.preprocessing OneHotEncoder——仅仅是数值型字段才可以，如果是字符类型字段则不能直接搞定

    >>> from sklearn.preprocessing import OneHotEncoder >>> enc = OneHotEncoder() > ...

  3. 一天搞定HTML----常用标签01

    1.常用标签说明 2.其他类标签演示 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. 用ORM的思想操作XML文档，一个对象就搞定不要太简单。滚蛋吧！XmlDocument、XmlNode、Xml***……

    大家有没有这样的感受,一涉及XML文档操作就得百度一遍.是不是非!常!烦!.各种类型,各种方法,更别提为了找到一个节点多费劲.本来想写个XML操作的工具方法,写了两行一想既然XML文档是有规律的,如果 ...

  5. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  6. 彻底搞定char/wchar_t/unicode

    彻底搞定char/wchar_t!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (2013-07-17 10:18:28) 转载▼     从char/wchar_t到TCHAR(1) ...

  7. 【转】轻松搞定FTP之FlashFxp全攻略

    转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融 ...

  8. 10分钟快速搞定pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...

  9. 一文搞定scrapy爬取众多知名技术博客文章保存到本地数据库，包含：cnblog、csdn、51cto、itpub、jobbole、oschina等

    本文旨在通过爬取一系列博客网站技术文章的实践,介绍一下scrapy这个python语言中强大的整站爬虫框架的使用.各位童鞋可不要用来干坏事哦,这些技术博客平台也是为了让我们大家更方便的交流.学习.提高 ...

随机推荐

  1. 图文详解如何快捷搭建LNMP服务环境

    上一篇与大家一起学习了下如何搭建LAMP环境的知识,今天小编再和大家分享下如何快捷地搭建LNMP环境,并搭建起一个网站.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/S ...

  2. lca最近公共祖先（模板）

    洛谷上的lca模板题--传送门 学了求lca的tarjan算法(离线),在洛谷上做模板题,结果后三个点超时. 又把询问改成链式前向星,才ok. 这个博客,tarjan分析的很详细. 附代码-- #in ...

  3. sqoop关系型数据迁移原理以及map端内存为何不会爆掉窥探

    序:map客户端使用jdbc向数据库发送查询语句,将会拿到所有数据到map的客户端,安装jdbc的原理,数据全部缓存在内存中,但是内存没有出现爆掉情况,这是因为1.3以后,对jdbc进行了优化,改进j ...

  4. servlet研究学习总结--OutputStream和PrintWriter的区别

    当用户和浏览器其进行交互时,会给服务器发送http请求,Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.requ ...

  5. 多源最短路Floyd 算法————matlab实现

    弗洛伊德(Floyd)算法是一种用于寻找给定的加权图中顶点间最短路径的算法.该算法名称以创始人之一.1978年图灵奖获得者.斯坦福大学计算机科学系教授罗伯特·弗洛伊德命名. 基本思想 通过Floyd计 ...

  6. mysql语句insert后取到返回的主键id

    Q:   有时候做类似接口里的数据订正,需要取到insert语句返回的id主键,在程序里通过对象返回好取,但是写sql怎么取到呢? A:  用select @@identity得到上一次插入记录时自动 ...

  7. ubuntu16.04 编译运行 LSD-SLAM

    下载编译LSDSLAM,可能会出现 CreateGlutWindowAndWind is not a member of pangolin 以及 该函数参数报错的问题: 原因是在新的pangolin版 ...

  8. OC—可变数组NSMutableArray

  9. Thinkphp3.2学习——架构_URL模式

    入口文件是应用的单一入口,对应用的所有请求都定向到应用入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作: http://serverName/index.php/模块/控制器/操作 这是 ...

  10. 如何通过 WebP 自适应方案减少图片资源大小

    前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能 ...