三种元素之间的转换

  • display 属性是用来设置元素的类型及隐藏的
  • 常用的属性有
  1. none 元素隐藏且不占位置
  2. block 元素以块元素显示
  3. inline 元素以内联元素显示
  4. inline-block 元素以内联块元素显示（此属性在 Html5 中被弃了，但还能使用）

少废话，上例子

例1

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

    </body>

</html>


div{

    width: 100px;

    height: 100px;

    display:inline;		/* 将块元素转换成内联元素，见效果截图 1 */

    /*display:inline-block; 将块元素转换成内联块元素，见效果截图 2 */

}

.box1{

    background: red;

}

.box2{

    background: green;

}

.box3{

    background: blue;

}
  • 效果截图 1

  • 效果截图 2

例2

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        display 属性是用来设置元素的类型及隐藏的，常用的属性有：

        <span>1、none 元素隐藏且不占位置</span>

        <span>2、block 元素以块元素显示</span>

        <span>3、inline 元素以内联元素显示</span>

        <span>4、inline-block 元素以内联块元素显示</span>

    </body>

</html>


span{

    width: 150px;

    height: 100px;

    background: pink;

    display:block;		/* 将内联元素转换成块元素，见效果截图 3 */

    /*display: inline-block; 将内联元素转换成内联块元素，见效果截图 4 */

}
  • 效果截图 3

  • 效果截图 4

例3

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box1 box2">box2</div> <!-- 类可以取多个名字，有种多继承的感觉 -->

        <div class="box3">

            <span>我显示了！</span>

        </div>

    </body>

</html>


.box1{

    width: 200px;

    height: 200px;

    background-color: red;

    display: none;	 /* 让元素隐藏，并且隐藏元素不会再占据位置 */

}

.box2{

    display:block;	 /* block 把元素转换成块元素，还可以显示隐藏的元素 */

}

.box3{

    width: 200px;

    height: 200px;

    background: green;

}

.box3 span{

    display: none;

}

.box3:hover span{	 /* 当鼠标移入 box3 的时候，让字体显示 */

    color: pink;

    text-align: center;

    line-height: 200px;

    font-size: 30px;

    display: block;

}
  • 效果截图 5

  • 效果截图 6

参考：北京图灵学院的 Web 前端公开课

[Web 前端] 016 css 元素的转换的更多相关文章

  1. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  2. [Web 前端] 012 css 元素溢出

    overflow 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 通过 overflow 属性来设置 概览 参数 释义 visible(默认值) 内容不会被修剪会呈现在元素框之 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  8. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  9. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

随机推荐

  1. redis安装篇

    Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作 ...

  2. JDK7

    https://docs.oracle.com/javase/7/docs/index.html

  3. JavaSE---显式锁

    1.概述 1.1.jdk5之前,用于  调节共享对象访问机制  只有 synchronized.volatile:     jdk5之后,提供了  显示锁:Lock.ReentrantLock...: ...

  4. web测试方法小结----以便于测试用例

    今天在整理电脑的时候,发现一些之前总结过得web 测试的一些方法,以便于写测试用例.现在整理一下,就当复习一下软件测试基础. 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数 ...

  5. [洛谷P4436] HNOI/AHOI2018 游戏

    问题描述 一次小G和小H在玩寻宝游戏,有n个房间排成一列,编号为1,2,...,n,相邻的房间之间都有一道门.其中一部分门上锁(因此需要有对应的钥匙才能开门),其余的门都能直接打开.现在小G告诉了小H ...

  6. Vuex-全局状态管理【传递参数】

    src根目录 新建store文件夹,新建index.js 作为入口 在store文件夹中 新建modules文件夹 modules文件夹中,新建 a.js b.js 2个文件 a.js const s ...

  7. List中的Map

    List中的Map import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.u ...

  8. VGA驱动时序说明

    根据不同的显示器分辨率,需要不同的刷新频率. 其中显示模式中@60表示显示器1秒钟刷新60帧. 其中时钟(MHz),表示FPGA输出给显示器的时钟频率.需要我们配置PLL的时钟频率为对应频率. 其中行 ...

  9. 3D Computer Grapihcs Using OpenGL - 02 QGLWidget

    用红色来填充GLWidget窗口 修改MyGlWindow.h,添加两个函数,一个用来初始化OpengGL,一个用来绘制OpenGL #pragma once #include <QtOpenG ...

  10. es的调优

    3.1.分片查询方式 当前的图片中有5个主分片,5个副本:这对于es的集群来说,这种配置是非常常见的: 但是问题来了,当我们的客户端做查询的时候,程序会向主分片发送请求还是副本发送请求? 还是说直接去 ...