标签类型：

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

行内元素：内容撑开宽高

块元素：默认独占一行

注意：

在使用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. 【转】JDBC学习笔记(2)——Statement和ResultSet

    转自:http://www.cnblogs.com/ysw-go/ Statement执行更新操作 Statement:Statement 是 Java 执行数据库操作的一个重要方法,用于在已经建立数 ...

  2. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  3. Xamarin.Forms+Prism（3）—— 简单提示UI的使用

    这次给大家介绍两个比较好用的提示插件,如成功.等待.错误提示. 准备: 1.新建一个Prism Xamarin.Forms项目: 2.右击解决方案,添加NuGet包: 1)Acr.UserDialog ...

  4. 在jquery中each循环中，要用return false代替break，return true代替continue。

    在jquery中each循环中,要用return false代替break,return true代替continue. $.each(data, function (n, value) { if(v ...

  5. python——网络编程

    Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  6. string___assign

    #include <iostream> #include <iterator> #include <string> int main() { std::string ...

  7. PHP获取指定页面的指定内容

    在刚入手PHP的时候,经理让我自己做一个文章的管理系统为了方便管理微信端发的消息.除了简单的添加分类.管理分类.添加文章.管理文章,还有一个功能就是要从微信文章网址中拿到网址上的标题.作者以及发表时间 ...

  8. vue视频学习笔记03

    video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter( ...

  9. POJ3252-Round Numbers 数学

    题目链接:http://poj.org/problem?id=3252 题目大意: 输入两个十进制正整数a和b,求闭区间 [a ,b] 内有多少个Round number 所谓的Round Numbe ...

  10. RabbitMQ集群和失败处理

    RabbitMQ内建集群的设计用于完成两个目标:允许消费者和生产者在RabbitMQ节点在奔溃的情况下继续运行,以及通过添加更多的节点来线性扩展消息通信的吞吐量.当失去一个RabbitMQ节点时客户端 ...