[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. ...
随机推荐
- 高并发-原子性-AtomicInteger
线程不安全: //请求总次数private static int totalCount = 10000;//最大并发数private static int totalCurrency = 100;// ...
- ubuntu16.04 安装mysql
安装mysql 1.sudo apt-get install mysql-server 2.sudo apt install mysql-client 3.sudo apt install libmy ...
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\......”--“拒绝访问。 ”错误
1.通常的解决方法:原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: C:\Windows\temp-->属性-->安全-->编辑-->添加NETWORK S ...
- koa2基础
1.安装脚手架 npm install -g koa-generator 2.创建目录 koa2 -e koa2-learn 3.cd koa2-learn 4.npm install 5.SET D ...
- Day_03-函数和模块的使用
使用函数求阶乘 使用while循环的代码: m = float(input('m = ')) n = float(input('n = ')) mn = m - n fm = 1 while m != ...
- vim插件cscope使用方法
一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...
- [CF46D]Parking Lot
题目:Parking Lot 传送门:http://codeforces.com/problemset/problem/46/D 分析: 做法一: 1)这题和Hotel那题一样,也可以看做是求区间空位 ...
- nginx 和 php
sudo apt-get install nginx sudo groupadd www sudo useradd -g www www /etc/nginx/nginx.conf service n ...
- 设计模式-Runoob：工厂模式
ylbtech-设计模式-Runoob:工厂模式 1.返回顶部 1. 工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供 ...
- 002-js-cookie
cookie操作方法 1.写cookie //JS操作cookies方法! //写cookies function setCookie(name,value) { var Days = 30; var ...