11月9日display属性
1.11月3日前端需要学习的知识、自闭合标签、meta标签、div标签2.11月6日标题标签、图片标签、链接标签、段落标签3.11月6日列表、标题、表格、基本、块级标签以及特殊符号4.11月7日form表单与input框以及select标签5.11月7日css介绍、基本格式、样式、选择器6.11月8日字体的属性7.11月9月label标签补充8.11月9月字体的属性2以及div模块的另一种用法9.11月9日背景属性10.11月9日边框
11.11月9日display属性
12.11月10日css盒子模型的margin和padding属性13.11月10日浮动float以及清除浮动clear14.11月10日overflow属性以及圆形头像的制作15.11月10月高度和长度的另外四种情况16.11月10日定位属性17.11月10日模态框和透明18.11月12日基础的网页设计以及阴影的设计box-shadow属性19.11月12日js的基础引入和注释20.11月13日js语言常量与变量21.11月13日js数据类型以及常见的方法22.11月13日布尔值(Boolean)23.11月13数组以及数组常用发法24.11月14日i++以及++i以及逻辑运算符25.11月14日流程控制26.11月14日三元运算27.11月14日函数的定义28.11月15日函数作用域和闭包函数29.11月16日自定义对象类型30.12月27日JSON对象31.12月29日正则对象32.12月29日正则对象33.2024-1-2bom对象34.2024-1-2 DOM概念以及部分用法35.2024-1-4事件36.2024-1-17 jq的简介、基础语法、选择器、部分操作37.2024-1-18文档处理38.2024-1-19事件绑定，input与hover事件39.2024-1-19阻止事件40.2024-1-19事件冒泡41.2024-1-22页面加载和事件委托42.2024-1-22动画效果和部分方法display属性
该属性是用于控制HTML元素的显示效果
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display属性值为none
该属性值可以让HTML文档中元素存在，但是在浏览器中不显示。
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: none;
}
</style>
</head>
<body>
<div>不会显示的</div>
<span>会显示的</span>
</body>
</html>
效果如图
结果就说明了，该属性值将div标签的内容给隐藏了。
display属性值为block
给属性值就是默认的情况下的值，占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: block;
width: 10px;
}
</style>
</head>
<body>
<div>不会显示的</div>
<span>会显示的</span>
</body>
</html>
这里我设置了每行宽度为10px，如果这个宽度不够一段文字在同一行的话就会拆开
效果如下
display属性值为inline
该属性值可以让内容按行内元素显示，比如可以让块级标签变成行内标签，这时候块级标签再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么效果。
具体代码如下
<!--inline的情况-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: inline;
width: 10px;
height: 100px
}
</style>
</head>
<body>
<div>不会显示的</div>
<span>会显示的</span>
</body>
</html>
效果如图
display属性值为inline-block
可以让标签(元素)具有行内元素和块级元素的特点。
代码如下
<!--inline-block的情况-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display: inline-block;
width: 10px;
height: 100px;
}
</style>
</head>
<body>
<div>不会显示的</div>
<span>会显示的</span>
</body>
</html>
效果如下
了解知识
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
