[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. ...
随机推荐
- hdu4731 Minimum palindrome (找规律)
这道题找下规律,3个字母或者以上的时候就用abcabcabc....循环即可. 一个字母时,就是aaaaa.....; 当只有2个字母时!s[1][]=a"; s[2][]="ab ...
- Dinic最大流 || Luogu P3376 【模板】网络最大流
题面:[模板]网络最大流 代码: #include<cstring> #include<cstdio> #include<iostream> #define min ...
- Behavior行为
创建公用的js 模块 封装起来 let behavior = Behavior({//定义属性 properties: { type: String, img: String, content: St ...
- Springboot配置文件占位符
一.配置文件占位符 1.application.properties server.port=8088 debug=false product.id=ID:${random.uuid} product ...
- @Component和@Bean以及@Autowired、@Resource
1. 有这么一个故事,从xml配置文件的bean说起 Spring用xml配置文件的时候(不知道阅读这篇文章的你用没用过,我用过一段时间,那是黑暗伤痛的回忆QQQ),一个xml配置文件里面有很多个 ...
- flask中自定义日志类
一:项目架构 二:自定义日志类 1. 建立log.conf的配置文件 log.conf [log] LOG_PATH = /log/ LOG_NAME = info.log 2. 定义日志类 LogC ...
- 过采样算法之SMOTE
SMOTE(Synthetic Minority Oversampling Technique),合成少数类过采样技术．它是基于随机过采样算法的一种改进方案,由于随机过采样采取简单复制样本的策略来增加 ...
- DNS域名解析系统
1.DNS的组成 DNS系统是为解析域名为IP地址而存在的,它是由域名空间.资源记录.名称服务器和解析器组成. 域名空间是包含一个树状结构,用于存储资源记录的空间. 资源记录是与域名相关的数据,如IP ...
- POJ 3181 Dollar Dayz ( 完全背包 && 大数高精度 )
题意 : 给出目标金额 N ,问你用面额 1~K 拼成 N 的方案有多少种 分析 : 完全背包的裸题,完全背包在 DP 的过程中实际就是列举不同的装填方案数来获取最值的 故状态转移方程为 dp[i] ...
- Manacher模板( 线性求最长回文子串 )
模板 #include<stdio.h> #include<string.h> #include<algorithm> #include<map> us ...