标签类型：

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

行内元素：内容撑开宽高

块元素：默认独占一行

注意：

在使用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. vim粘贴代码问题

    vim粘贴代码问题 vim 在使用xshell进行vim操作的时候,经常会直接粘贴一些外部的代码,然后粘贴上之后会出现逐行缩进的情况,之前一直没有去找为啥,并且逐行的给他弄回去. 转自:https:/ ...

  2. java多线程基本概述（十三）——Executor

    1:Executor接口 public interface Executor 执行已提交的 Runnable 任务的对象.此接口提供一种将任务提交与每个任务将如何运行的机制(包括线程使用的细节.调度等 ...

  3. T-SQL几个简单的操作

    视图 咱们先来了解下视图到底是什么意思,顾名思义,用简单的视觉方式展现复杂的内容 有什么功能呢, 各位应该还记得咱们之前练习的那个小小的数据库superise,里面有这么四张表,分别是: studen ...

  4. HYML / CSS部分

    1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个 ...

  5. 查询sql server进程死锁方案

    SELECT a.spid , a.blocked , lastwaittype = RTRIM( a.lastwaittype ), waitresource = RTRIM( a.waitreso ...

  6. Docker 组件如何协作？- 每天5分钟玩转容器技术（8）

    还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...

  7. python编程总结

    1.signal.signal(signal.SIGCHLD,signal.SIG_IGN) 这句话的作用是 防止产生僵尸进程.详细解释看 http://www.cnblogs.com/Anker/p ...

  8. 572. Subtree of Another Tree

    Problem statement: Given two non-empty binary trees s and t, check whether tree t has exactly the sa ...

  9. Docker - 虚拟网桥

    容器的网络模式 None --- 容器不能访问外部网络,内部存在回路地址. Container --- 将容器的网络栈合并到一起,可与其他容器共享网络. Host --- 与主机共享网络. Bridg ...

  10. vue视频学习笔记

    video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...