三种元素之间的转换

  • 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. 牛客练习赛14 E - 无向图中的最短距离 (bfs+bitset)

    一个链接:https://ac.nowcoder.com/acm/contest/82/E来源:牛客网 无向图中的最短距离 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144 ...

  2. linux 上配置swoole

    1.首先我们要安装swoole扩展的话,需要把它的包下载下来,下载地址是: https://github.com/swoole/swoole-src 本人qq群也有许多的技术文档,希望可以为你提供一些 ...

  3. Textarea随着文本的字数自适应高度，后来发现用 contenteditable 代替textarea 效果更佳

    做移动端项目遇到很多问题,最近比如textarea 随着文本的字数自动撑开高度, 网上也查阅了一些资料发现比较有用的方法 就是获取 textarea的行数和换行符来动态改变textarea的高度  就 ...

  4. MVC模式 和 MVVM模式

    MVC模式 模型 - 视图 - 控制器或MVC,MVC是普遍的叫法,是一种软件设计模式,用于开发Web应用程序.模型- 视图 - 控制器模式是由以下三部分组成: 模型/Model - 一个负责维护数据 ...

  5. linux运维、架构之路-xtrabackup

    一.XtraBackup介绍 1.备份工具 xtrabackup:是一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,占用磁盘空间小,能够非常快速地                   ...

  6. Spring——简介

    学习网站: [1]http://spring.io/ [2]http://projects.spring.io/spring-framework/ Spring是为解决企业应用开发的复杂性而创建的,是 ...

  7. centos 6.9 mysql 安装配置

    1.全新系统,安装mysql yum -y install mysql mysql-server mysql-devel 2.启动mysql service mysqld start 3.修改密码 登 ...

  8. React-Native 之 GD （十）Android启动页面 及 模态方式跳转

    1.Android启动页面 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main ...

  9. xargs -i参数详解

    学习所需,文章转载过来! xargs与find经常结合来进行文件操作,平时删日志的时候只是习惯的去删除,比如 # find . -type f -name "*.log" | xa ...

  10. leetcode 39. 组合总和（python）

    给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...