HTML: css中的display属性
目录
display: none
未使用display: none前
使用display: none后
display: inline
未使用inline之前:
使用display: inline之后:
display: block
未使用inline前:
使用display: block之后:
display: inline-block
未使用dispinline_block:
使用display:inline-block之后:
display: none
用于隐藏对象
未使用display: none前
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 {/*背景色为red*/background-color: red;/*display: none;*/}#d2 {/*背景色为blue*/background-color: blue;}</style>
</head>
<body><div id="d1">你好</div><div id="d2">再见</div>
</body>
</html>
展示效果:
使用display: none后
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 {/*背景色为red*/background-color: red;display: none;}#d2 {/*背景色为blue*/background-color: blue;}</style>
</head>
<body><div id="d1">你好</div><div id="d2">再见</div>
</body>
</html>
展示效果:
对某一标签使用none之后, 该标签将不再显示再前端, 且原来的位置也不复存在,但该标签代码段还存在于文档中。
display: inline
将标签设置为行内标签
未使用inline之前:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;/*display: inline;*/}#s2 {height: 200px;width: 200px;background-color: blue;/*display: inline;*/}</style>
</head>
<body><div id="s1">你好</div><div id="s2">再见</div>
</body>
</html>
展示效果:
使用display: inline之后:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;display: inline;}#s2 {height: 200px;width: 200px;background-color: blue;display: inline;}</style>
</head>
<body><div id="s1">你好</div><div id="s2">再见</div>
</body>
</html>
展示效果:
块儿级标签可以设置长宽,, 当我们将div(块儿级标签)标签display: inline之后, 我们设置长宽的代码将会无效, 即便有这个设置长宽的代码,前端也不会有任何显示长宽的效果。
display: block
将标签设置为块儿级标签
未使用inline前:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;/*display: block;*/}#s2 {height: 200px;width: 200px;background-color: blue;/*display: block;*/}</style>
</head>
<body><span id="s1">你好</span><span id="s2">再见</span>
</body>
</html>
展示效果:
使用display: block之后:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;display: block;}#s2 {height: 200px;width: 200px;background-color: blue;display: block;}</style>
</head>
<body><span id="s1">你好</span><span id="s2">再见</span>
</body>
</html>
展示效果:
行内标签无法设置长宽, 即便设置了前端也不会有任何效果, 当我们将span(行内标签)标签display: block之后, 我们设置长宽的代码生效。
display: inline-block
既有块儿级标签的效果, 又有行内标签的特点,譬如既可以在一行显示,又可以在一行设置长宽。
未使用dispinline_block:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;/*display: inline-block;*/}#s2 {height: 200px;width: 200px;background-color: blue;/*display: inline-block;*/}</style>
</head>
<body><div id="s1">你好</div><div id="s2">再见</div>
</body>
</html>
展示效果:
使用display:inline-block之后:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#s1 {height: 200px;width: 200px;background-color: red;display: inline-block;}#s2 {height: 200px;width: 200px;background-color: blue;display: inline-block;}</style>
</head>
<body><div id="s1">你好</div><div id="s2">再见</div>
</body>
</html>
展示效果:
HTML: css中的display属性相关推荐
- 《三》CSS 中的 display 属性
display 属性可以设置元素的外部和内部显示类型.元素的外部显示类型将决定该元素在流式布局中的表现(块级或行内元素):元素的内部显示类型可以控制其子元素的布局(flex.grid 等). 块级元素 ...
- 详解CSS中的display属性
上周使用layer.tips('提示信息'.'#id'):含有id的元素设置display:none后,提示信息弹出框位置错位了,百度后找的以下原因: 应该是含有id的元素脱离文档流造成的. 参考:h ...
- css中的display属性值:table,table-row,table-cell
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row:此元素会作为一个表格行显示(类似 <tr>). table-cell: ...
- css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示 补充:display与 visibility属性不同, ...
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
- 【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置 元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
- c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线?(代码示例)...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
最新文章
- 判断一个点是否在RotatedRect中
- android从放弃到精通第11天 勿忘初心
- 近世代数--群同构--第一同构定理
- KSS2-成本中心作业价格分割(错误!!!)
- QT的QPair类的使用
- python中not加变量是_MyPython--基础篇--变量
- 数据持久化 plist,CoreData,Sqlite
- java中push和pop指令的作用_汇编语言PUSH和POP指令(压栈和出栈)
- 少女为什么会身上香香的?
- vb microsoft.xmlhttp 获取所有超链接_编写我的第一个VB程序
- Android 自定义控件之圆形扩散View(DiffuseView)
- ICLR'22 | 审稿结果统计速览
- win10如何安装系统得日语输入法(亲测)
- qq群发 java_qq聊天机器人 群发工具 (java版) (三)
- 读书|《赤裸裸的统计学》:统计数字很容易说谎
- 魅魔php影视系统,魅魔Maccms电影程序PHP
- 服务器安全-阿里自研补丁列表整理
- Liberal Arts:丧后即燃
- 三角形网格的TBN矩阵中的Tangent计算。
- 爱上了我的司机 (6)
热门文章
- python中if brthon环境安装包_python这个正则表达式有什么问题?
- 笔记本电脑(没有num按键)如何关闭数字小键盘
- Python 定义类和属性
- c语言足球从100米下落,使用c语言计算与模拟足球射门.docx
- 磁盘分区、格式化、挂载(fdisk mkfs partprobe)
- 水果店(库)管理系统 —— 实现了管理员模式与顾客模式 JAVA
- [转自itilxf论坛]iTop百问百答
- 深度学习环境配置——ubuntu20.04装nvidia驱动
- java第二类斯特林数编程代码,Luogu1655 小朋友的球 (组合数学,第二类斯特林数,高精)...
- 华为FreeBuds 3无线耳机观感体验——外形,舒适度,配置