三种元素之间的转换

  • 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. 长沙理工大学第十二届ACM大赛-重现赛 J 武藏牌牛奶促销

    链接:https://ac.nowcoder.com/acm/contest/1/J 来源:牛客网 武藏牌牛奶促销 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他 ...

  2. springboot 集成oss

    集成aliyun oss 结构如下: pom.xml <dependency> <groupId>org.springframework.boot</groupId> ...

  3. java课堂测试2

    //信1605-2 20163428 刘宏琦import java.util.*;public class Number { /** * @param args */ public void pand ...

  4. 046：ORM模型介绍

    ORM模型介绍: 随着项目越来越大,采用写原生SQL的方式在代码中会出现大量的SQL语句,那么问题就出现了: 1.SQL语句重复利用率不高,越复杂的SQL语句条件越多,代码越长.会出现很多相近的SQL ...

  5. linux运维、架构之路-MySQL备份与恢复(四)

    一.备份方式 ①逻辑备份(文件表示:SQL语句) ②物理备份(数据文件的二进制副本) ③基于快照的备份 ④基于复制的备份 二.备份工具 ①mysqldump:原生自带的逻辑备份工具 ②mysqlbin ...

  6. web大文件下载+断点续传

    实现原理(1)首先获得下载文件的长度,然后设置本地文件的长度.(2)根据文件长度和线程数计算每条线程下载的数据长度和下载位置.如:文件的长度为6M,线程数为3,那么,每条线程下载的数据长度为2M,每条 ...

  7. CF1051F The Shortest Statement Dijkstra + 性质分析

    动态询问连通图任意两点间最短路,单次询问. 显然,肯定有一些巧妙地性质(不然你就发明了新的最短路算法了233)有一点很奇怪:边数最多只比点数多 $20$ 个,那么就可以将这个图看作是一个生成树,上面连 ...

  8. Spring Cloud教程（十）自定义引导配置属性源

    可以通过在org.springframework.cloud.bootstrap.BootstrapConfiguration键下添加条目/META-INF/spring.factories来训练引导 ...

  9. loadrunner性能测试巧匠训练营-controller

    1.设置集合点 现在脚本添加集合点的函数,集合点不能添加到事务里面,负责统计事务的时候会把时间计算进去 2.IP欺骗 前言 https://www.cnblogs.com/danbing/p/7459 ...

  10. h5视频标签 video

    video标签,用来播放视频的 基本上所有的浏览器都支持 video支持的视频格式有: mp4 mime-type: video/mp4 WebM mime-type: video/WebM Ogg ...