三种元素之间的转换

  • 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. grandson定理

    用处:求解同余线性方程组 inv:逆元 一堆物品 3个3个分剩2个 5个5个分剩3个 7个7个分剩2个 问这个物品有多少个 5*7*inv(5*7,  3) % 3  =  1 3*7*inv(3*7 ...

  2. [人工智能]IBM Watson人工智能API|一步步创建智能微信翻译官|第一章

    最近参加了IBM可认知内部创业活动,想从零创建一个微信翻译工具,这就是我的AI翻译官.

  3. java调用shell脚本小demo

    复制指定文件cpp.sh: [root@localhost soft]# vim cpp.sh#!/bin/bash name="$1"\cp /home/soft/test/${ ...

  4. zookeeper之一 安装和配置(单机+集群)

    这里我以zookeeper3.4.10.tar.gz来演示安装,安装到/usr/local/soft目录下. 一.单机版配置 1.安装和配置 #.下载 wget http://apache.fayea ...

  5. hadoop学习一

    一.基本概念https://blog.csdn.net/gwd1154978352/article/details/81095592 二.安装hadoophttps://blog.csdn.net/s ...

  6. 绑定class -vue

    1.值为对象 :class = "{ 'text-red': isActive }" data () { return { isActive : true } } :class = ...

  7. BZOJ4625 [BJOI2016]水晶 最小割

    题意简述 给你一个三维的坐标系,坐标系上 \((x_i+y_i+z_i)\bmod 3 = 0\) 的点内有能量源.给定 \(n\) 个点含有能量值为 \(c_i\) 的水晶,如果一个水晶位于能量源上 ...

  8. canvas合并两张图片

    解析: 原理是一样的 画多张图需要一张一张画 也就是等图片onload成功后处理 这里代码写的比较随意 实际用的时候可以小粉转一下 也非常简单.我懒~~ 么么.. newImage(text) { / ...

  9. 【UOJ#349】[WC2018] 即时战略

    题目链接 题意 一开始已知一号点. 每次可以选定一个已知点和一个未知点,然后交互库会返回从已知点出发到达未知点路径上的第二个点. 要求在有限步之内知道每一个点. 次数要求: 链的情况要求 \(O(n) ...

  10. USB-TTL