标签类型：

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

行内元素：内容撑开宽高

块元素：默认独占一行

注意：

在使用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. view测量

    一.测规格是由测量模式mode和测量大小size组成的,size好说,那测量模式mode代表什么含义呢.由上面的代码可知,测量模式有三类:    UNSPECIFIED    父控件不对你有任何限制, ...

  2. redis object 对象系统

    redis object对象系统 概述 redis 当中, sds字符串, adlist双向链表, dict字典, ziplist压缩链表, intset整数集合等均为底层数据结构 redis 并没有 ...

  3. 财付通API

    开发财付通API的步骤: 1.首先开发财付通API时先获取商户号和密钥: 财付通测试号:商户号String partner = "1900000109";密钥String key ...

  4. HDU 5008 求第k小子串

    本题要求第k小的distinct子串,可以根据height数组,二分出这个第k小子串所在后缀的位置信息.由于题目要求子串起始下标尽可能小.所以再在rank数组中,二分出与当前后缀LCP大于等于所求子串 ...

  5. 给自己的QQ群开启腾讯官方的群聊机器人

    看到腾讯有个机器人还不错 能聊天 能唱歌 方法:1.点击链接填写https://wj.qq.com/s/946969/64ac 群聊机器人内测邀请.按照提示填就行了 2.然后就是开启机器人了 http ...

  6. 蓝桥杯-平方怪圈-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  7. 跟着刚哥学习Spring框架--创建HelloWorld项目（一）

    1.Spring框架简介 Spring是一个开源框架,Spring是在2003年兴起的一个轻量级的开源框架,由Rod johnson创建.主要对JavaBean的生命周期进行管理的轻量级框架,Spri ...

  8. OC中的copy

    copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...

  9. (转)html中 cookie设置

    box=="checkBox  '是否记住用户密码'": window.onload=function init() {    var box = getCookie(" ...

  10. 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...