[Web 前端] 016 css 元素的转换
三种元素之间的转换
- display 属性是用来设置元素的类型及隐藏的
- 常用的属性有
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- 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 元素的转换的更多相关文章
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- [Web 前端] 012 css 元素溢出
overflow 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式 通过 overflow 属性来设置 概览 参数 释义 visible(默认值) 内容不会被修剪会呈现在元素框之 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
随机推荐
- windows 10 x64系统 jdk1.7、jdk1.8 切换（jdk为exe安装版本）
电脑先安装的1.7,后来安装1.8,改JAVA_HOME为1.8后cmd->java.javac.java -version可用1.8 后想改为1.7,更改环境变量(步骤1)后cmd->j ...
- Zookeeper学习笔记(下)
这是ZK学习笔记的下篇, 主要希望可以分享一些 ZK 的应用以及其应用原理 我本人的学习告一段落, 不过还遗留了一些ZK相关的任务开发和性能测试的任务, 留待以后完成之后再通过其他文章来进行分享了 Z ...
- 【leetcode】848. Shifting Letters
题目如下: 解题思路:本题首先要很快速的计算出任意一个字符shift后会变成哪个字符,其实也很简单,让shift = shift % 26,接下来再做计算.第二部是求出每个字符要shift的次数.可以 ...
- watch和computed
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...
- mysql DEFAULT约束 语法
mysql DEFAULT约束 语法 作用:用于向列中插入默认值. 说明:如果没有规定其他的值,那么会将默认值添加到所有的新记录.直线电机 mysql DEFAULT约束 示例 //在 "P ...
- CodeForces 1187D Subarray Sorting
Problem You are given an array \(a_1\),\(a_2\),-,\(a_n\) and an array \(b_1\),\(b_2\),-,\(b_n\). For ...
- Python_019(六星级别之反射方法)
1.反射 1)神赐给你的内置函数 : a: getattr(命名空间,'函数名') == 命名空间.属性名; 这里的命名空间指的是对象或者类; b: getattr四个应用场景: 1)类名.名字 &l ...
- 登陆一个系统时，前端js实现的验证，记住密码等功能
记住密码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- 手把手教你搞定个推iOS推送SDK集成
以下是一位开发者在集成个推iOS推送SDK过程中的真实经历. 作者:Ezreallp 一次偶然的机会,公司的项目要用到推送,我自己本来就很懒,不愿意去弄整套APNS的流程,刚好之前跟朋友聊起过他们的产 ...
- 模拟vue实现简单的webpack打包
一.安装nodejs,查看是否安装成功 二.package.json项目初始化 npm init 电脑有node环境,在根目录下运行命令npm init初始化项目,根据提示输入项目相关信息,然后运行. ...