三种元素之间的转换

  • 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. CCPC-Wannafly Winter Camp Day1 (Div2） 吃豆豆 （DP）

    题目描述 wlswls在玩一个游戏. wlswls有一个nn行mm列的棋盘,对于第ii行第jj列的格子,每过T[i][j]T[i][j]秒会在上面出现一个糖果,第一次糖果出现在第T[i][j]T[i] ...

  2. django搭建一个小型的服务器运维网站-查看服务器中的日志与前端的datatable的利用

    目录 项目介绍和源码: 拿来即用的bootstrap模板: 服务器SSH服务配置与python中paramiko的使用: 用户登陆与session; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...

  3. Flask【第5篇】：用Falsk实现的分页

    用flask实现的分页 一.flask实现的分页组件 from urllib.parse import urlencode,quote,unquote class Pagination(object) ...

  4. Django【第23篇】：利用Form组件和ajax实现的注册

    利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...

  5. flask之日志的配置

    1. 项目中,日志和配置文件都是单独在一个文件夹中,一般log文件夹和config文件夹,两个文件夹和manage.py在同一个目录下. 2. 配置日志前,先给flask装上script脚本扩展,Fl ...

  6. NOIP2017 D1T1 小凯的疑惑

    洛谷P3951 看到题目,很容易想到这一题是求使ax+by=c(a,b,c∈N)无非负整数解的最大c 由裴蜀定理可知方程一定有整数解(a,b互素,gcd(a,b)=1|c) 解法一:暴力枚举 看到题目 ...

  7. div拖拽到iframe上方 导致 缩放和拖拽的不平滑和鼠标事件未放开 解决方法

    思路一:用在开始进行缩放(触发了resizable的start事件)为iframe添加z-index属性,将iframe放置在最下层. $("#draggable").resiza ...

  8. [洛谷2257]YY的GCD 题解

    整理题目转化为数学语言 题目要我们求: \[\sum_{i=1}^n\sum_{i=1}^m[gcd(i,j)=p]\] 其中 \[p\in\text{质数集合}\] 这样表示显然不是很好,所以我们需 ...

  9. php 单示例编程

    <?php defined('SYSPATH') or die('No direct script access.'); class Kohana_BOTA { //私有构造方法,防止再次实例化 ...

  10. encodeURIComponent()加密、decodeURIComponent()解码及v-html将字符串转换为html

    1)新闻详情页后台给我的数据是加密之后的,我问了后台,是用encodeURIComponent()加密的,然后我就用对应的方法decodeURIComponent()解密: this.$store.s ...