H5 31-CSS元素显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-CSS元素显示模式转换</title>
<style>
div{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span{
display: block;
background: green;
width: 200px;
height: 200px;
}
.cc{
background: blue;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<!--
1.如何转换CSS元素的显示模式?
设置元素的display属性 2.display取值
block 块级
inline 行内
inline-block 行内块级 3.快捷键
di display: inline;
db display: block;
dib display: inline-block;
--> <div>我是div</div>
<div>我是div</div> <span>我是span</span>
<span>我是span</span> <p class="cc">我是段落</p>
<b class="cc">我是加粗</b> </body>
</html>
H5 31-CSS元素显示模式转换的更多相关文章
- 课时92.CSS元素显示模式转换（掌握）
我们之前学习的显示模式都可以不用记忆,因为这节课我们要学习转换,我们可以任意来进行一个转换的,上面这些东西有一个了解就行了.所有的标签都有一个属性叫做display,display的中文含义就是显示的 ...
- CSS元素显示模式
CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...
- [Web 前端] 016 css 元素的转换
三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...
- 课时91.CSS元素显示模式（掌握）
在HTML中HTML将所有的标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 1.什么是块级元素,什么是行内元素? 块级元素会独占一行 行内元素不会 ...
- CSS的元素显示模式与转换
CSS的元素显示模式与转换 1. CSS的元素显示模式 1.1 块元素 <div>标签是最典型的块元素.另外常见的块元素有h1~h6.p.ul.ol.li等. 特点: 独占一行 高度.宽度 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
- CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
随机推荐
- MS SQL CASE WHEN 的用法
前言 由于经常使用 case when 的2种情况方式,如果=1 则*** 否则 *** 结束.久而久之,都以为只能这么用,都忘记了Case WHEN 的用法. 示例 , ...
- [20190324]奇怪的GV$FILESPACE_USAGE视图.txt
[20190324]奇怪的GV$FILESPACE_USAGE视图.txt--//发现GV$FILESPACE_USAGE定义很奇怪,做一个记录.1.环境:SCOTT@book> @ ver1P ...
- 修正Percona Monitoring Plugins for Zabbix的一处脚本Bug
今天小试了一把Percona Monitoring Plugins for Zabbix模板,自己辛辛苦苦写的那一大堆Python脚本,貌似用这个模板全都覆盖到了.但是,我也发现最新的版本percon ...
- 爬取mzi.com妹子图片网站（requests库）
看了崔大佬的文章,写了这个爬虫,学习了!原文地址 现在该网站加了反爬机制,不过在headers里加上refere参数就行了. 以下代码仅做学习记录之用: from bs4 import Beautif ...
- Greenplum启动失败Error occurred: non-zero rc: 1的修复
某日开发反馈测试环境的集群启动失败 报错内容如下: [gpadmin@hadoop-test2:/root]$ gpstart :::: gpstart:hadoop-test2:gpadmin-[I ...
- c/c++ 智能指针 shared_ptr 使用
智能指针 shared_ptr 使用 上一篇智能指针是啥玩意,介绍了什么是智能指针. 这一篇简单说说如何使用智能指针. 一,智能指针分3类:今天只唠唠shared_ptr shared_ptr uni ...
- [Hive_add_4] Hive 命令行客户端 Beeline 的使用
0. 说明 Hive 命令行客户端 beeline 的使用,建立在启动 Hadoop 集群和启动 hiveserver2 的基础之上 1. 使用指南 在确保集群启动和 hiveserver2 启动的 ...
- DVWA v1.9 新手指南
DVWA简介 DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法 ...
- react-native 简介及环境
概要 react native 环境搭建 hello react native react native 发布 react native https://facebook.github.io/reac ...
- go语言中如何模拟100个IP同时并发访问服务器，每个ip要重复访问1000次。每个Ip一分钟之内只能访问一次
package main import ( "time" "sync" "fmt" "sync/atomic" ) ty ...