一、display属性
1.display可以修改元素的类型，让块级元素和内联元素相互转换
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素 |
| inline | 此元素会被显示为内联元素 |
| inline-block | 行内块元素 |
| flex | 弹性盒模型 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
.text{
width: 150px;
height: 150px;
background-color: green;
display: block;
}
.title{
width: 100px;
height: 100px;
background-color: greenyellow;
display: inline;
}
.target{
width: 100px;
height: 100px;
background-color: coral;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>这是一个文本</p>
<span class="text">今日热点</span>
<h3 class="title">这是标题三</h3>
<table class="target"></table>
</body>
</html>2.元素属性隐藏对比
| 属性 | 描述 |
|---|---|
| display:none; | 隐藏自己，隐藏后原位置不保留 |
| visibility:hidden; | 隐藏自己，隐藏后原位置保留 |
| opacity:0; | 隐藏自己，隐藏后原位置保留 |
| overflow:hidden; | 溢出部分隐藏 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: greenyellow;
display: none;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
opacity: 0;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
visibility: hidden;
}
.box4 {
width: 300px;
height: 400px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<p>这是一个文本</p>
<div class="box1"></div>
<p>这是一个文本</p>
<div class="box2"></div>
<p>文本消息</p>
<div class="box3"></div>
<div class="box4">
<p>那是一个秋天，我从你的世界路过，你清澈的眼眸让我记忆尤新那是一个秋天，
我从你的世界路过，你清澈的眼眸让我记忆尤新那是一个秋天，我从你的世界路
过，你清澈的眼眸让我记忆尤新那是一个秋天，我从你的世界路过，你清澈的
眼眸让我记忆尤新那是一个秋天，我从你的世界路过，你清澈的眼眸让我记忆
尤新那是一个秋天，我从你的世界路过，你清澈的眼眸让我记忆尤新那是一个
秋天，我从你的世界路过，你清澈的眼眸让我记忆尤新那是一个秋天，我从
你的世界路过，你清澈的眼眸让我记忆尤新那是一个秋天，我从你的世界路
过，你清澈的眼眸让我记忆尤新那是一个秋天，我从你的世界路过，你清澈
的眼眸让我记忆尤新那是一个秋天，我从你的世界路过，你清澈的眼眸让我
记忆尤新那是一个秋天，我从你的世界路过，你清澈的眼眸让我记忆尤新那是
一个秋天，我从你的世界路过，你清澈的眼眸让我记忆尤新那是一个秋天，
我从你的世界路过，你清澈的眼眸让我记忆尤新</p>
</div>
</body>
</html>二、文档流
文档流是文档中可显示对象在排列时所占用的位置/空间
例如：块元素自上而下摆放，内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现
-
高矮不齐，底边对齐
-
空白折叠现象
- 无论多少个空格、换行、tab，都会折叠为一个空格
- 如果我们想让img标签之间没有空隙，必须紧密连接
脱离文档流
使⼀个元素脱离标准文档流有三种方式
- 浮动
- 绝对定位
- 固定定位
三、浮动
float属性定义元素在哪个方向浮动，任何元素都可以浮动。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的原理
- 浮动以后使元素脱离了文档流
- 浮动只有左右浮动，没有上下浮动
元素向左浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
<div class="box"></div>
<div class="container"></div>
.container{
width: 200px;
height: 200px;
background-color: #81c784;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
}
元素向右浮动
<div class="box"></div>
<div class="container"></div>
.container{
width: 200px;
height: 200px;
background-color: #81c784;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: right;
}
所有元素向左浮动
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 0 5px;
}
当容器不足时
当容器不足以横向摆放内容时候，会在下一行摆放
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container{
width: 250px;
height: 300px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
四、清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
解决方案有很多种
- 父元素设置高度
- 受影响的元素增加clear属性
- overflow清除浮动
- 伪对象方式
1.父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container{
height: 300px;
width: 350px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
2.受影响的元素增加clear属性
如果同级元素受到影响，直接给收到影响的元素增加clear属性
| 值 | 描述 |
|---|---|
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左右浮动 |
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
clear: both;
}
3.overflow:hidden
如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动
这种情况下，父布局不能设置高度
父级标签的样式里面加: overflow:hidden;clear:both;
<style>
.box{
overflow: hidden;
clear: both;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="nav"></div>
.container{
width: 350px;
border: 1px solid red;
overflow: hidden;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
}
4.伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理
为父标签添加伪类after,设置空的内容，并且使用clear:both;
这种情况下，父布局不能设置高度
<style>
.container::after{
content: "";
display: block;
clear: both;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="nav"></div>
.container {
width: 350px;
border: 1px solid red;
}
.container::after {
content: "";
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
}
五、定位（position）
定位的分类
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
| 值 | 描述 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：
left、top、right、bottom
相对定位
相对定位
1.left：向右移动
2.right：向左移动
3.top：向下移动
4.bottom：向上移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
相对定位
1.left：向右移动
2.right：向左移动
3.top：向下移动
4.bottom：向上移动
-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>绝对定位
绝对定位：脱离文档流
1.left：距离左边
2.right：距离右边
3.top：距离上面
4.bottom：距离下面
特点：会随着浏览器的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
绝对定位：脱离文档流
1.left：距离左边
2.right：距离右边
3.top：距离上面
4.bottom：距离下面
特点：会随着浏览器的滚动而滚动
-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 300px;
bottom: 100px;
}
p{
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
</body>
</html>固定定位
绝对定位：脱离文档流
1.left：距离左边
2.right：距离右边
3.top：距离上面
4.bottom：距离下面
特点：不会随着浏览器的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
绝对定位：脱离文档流
1.left：距离左边
2.right：距离右边
3.top：距离上面
4.bottom：距离下面
特点：不会随着浏览器的滚动而滚动
-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 300px;
bottom: 100px;
}
p{
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
</body>
</html>温馨提示
设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
Z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
绝对定位和固定定位会脱离文档流，脱离文档流后元素会出现堆叠的效果，
可以使用z-index设置堆叠的顺序，哪个值大，哪个在最上面，取值是没有范围的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.root{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
.nav{
width: 300px;
height: 300px;
background-color: greenyellow;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<div class="root"></div>
<div class="nav"></div>
</body>
</html>
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
