标签类型：

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

行内元素：内容撑开宽高

块元素：默认独占一行

注意：

在使用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. 500. Keyboard Row

    Given a List of words, return the words that can be typed using letters of alphabet on only one row' ...

  2. 第一章 自定义MVC框架

    第一章  自定义MVC框架1.1 MVC模式设计    组成:Model:模型,用于数据和业务的处理          View :视图,用于数据的显示          Controller:控制器 ...

  3. java复习(4)---数字处理类

    java本身自带一些封装好的类方便数字问题的处理,review下方便以后使用 DecimalFormat类 可格式化数字格式,控制输出格式 Math类 提供三角函数.指数函数.取整函数.最大最小函数. ...

  4. ZJOI2008树的统计Count

    知识点-树链剖分 "在一棵树上进行路径的修改.求极值.求和":乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的.我们需要用到一种貌似高级的复杂算法--树链剖分.   ...

  5. URL传中文参数导致乱码的解决方案之encodeURI

    通过URL传中文参数时,在服务端后台获取到的值往往会出现乱码问题,解决方案有很多种,本文主要介绍如何通过encodeURI来解决中文乱码问题: first:前端传递参数的时候需要对中文参数进行两次en ...

  6. Java设置Excel有效性

    XSSFWorkbook wb = new XSSFWorkbook(); XSSFSheet sheet = wb.createSheet("Excel"); String[] ...

  7. cmd中关闭windows2008错误弹窗

    net stop sharedaccess reg add HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Windows /v ErrorMode / ...

  8. 随机抽样一致算法（Random sample consensus，RANSAC）

    作者:桂. 时间:2017-04-25  21:05:07 链接:http://www.cnblogs.com/xingshansi/p/6763668.html 前言 仍然是昨天的问题,别人问到最小 ...

  9. YARN资源调度策略之Capacity Scheduler

    背景 yarn默认使用的是最简单的FIFO调度器,即一个default队列,所有用户共享,分配资源也是先到先得,没有优先级之分.有时一两个任务就把资源全占了,其他任务吃不到资源造成饥饿,显然这样的资源 ...

  10. bzoj100题

    蒟蒻选手bzoj终于100题辣!!!好鸡冻啊!!! 200题大关也来了,不知道还要多久..