1行快元素转化
1display:none;隐藏元素以元素的位置
：block；
1把隐藏元素显示，；
：inline快元素转为行内元素
2把行内元素转化为快元素；
：inline-block；将元素转化为行快元素
<img>为默认的行快元素
：table-cell 将元素转化为表单元格
/* 垂直居中的第一种办法 */
/* vertical-align: middle;
display: table-cell; */
/* 第二张办法 */
line-height: 100px;
/* 行高和高度一样的值就是垂直居中 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
}
.box{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 20px;
background-color:red;
display: inline;
}
.disp{
display: none;
display: block;
}
b{
width: 100px;
height: 100px;
background-color: green;
border: 1px solid black;
display: block;
display: inline;
display: inline-block;
margin-right:10px;
}
.box11{
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
/* 垂直居中的第一种办法 */
/* vertical-align: middle;
display: table-cell; */
/* 第二张办法 */
line-height: 100px;
/* 行高和高度一样的值就是垂直居中 */
}
</style>
</head>
<body>
<!-- <b>b标签</b>
<b>b标签</b>
<b>b标签</b>
<b>b标签</b> -->
<div class="box11">西南石油大学</div>
<div class="box">哇</div>
<div class="box ">杰大帅</div>
</body>
</html>
做一个可以隐藏的菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 100px;
height: auto;
}
ul li{
width: 100px;
height: 30px;
background-color: gray;
border-bottom: 1px solid white;
text-align: center;
line-height: 30px;
}
.f{
display: none;
}
ul:hover .f{
display: block;
}
</style>
</head>
<body>
<ul>
<li>数据操作</li>
<li class="f">增</li>
<li class="f">删</li>
<li class="f">改</li>
<li class="f">查</li>
</ul>
</body>
</html>
2元素隐藏与显示
visibility:hidden；将元素隐藏；
区别display：none;
:visible;将隐藏的元素显示出来;
3溢出
overflo：hidden；将多余的内容隐藏；
：scroll；将多余的内容用滚动条的方式显示出来
：auto；如果没有多余的内容，就全部显示，如果有多余的内容，就用滚动条显示；
应用场景：父盒子被子盒子成达，在父盒子中写overflow；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid black;
/* overflow: hidden;*/
overflow: scroll;
/* overflow: auto; */
}
</style>
</head>
<body>
<div class="box">
<pre>
西南石油大学
西南石油大学
</pre>
</div>
</body>
</html>
4列表
list-style：none；列表中数据项不要任何符号
list-style-type：disc|circle|square
|decimal|upper-alpha|upper-roman|lowe-roman
作业2：导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
display: flex;
list-style: none;
}
li{
width: 100px;
height: 30px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
}
ul li:hover{
background-color:blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>新闻</li>
<li>地图</li>
<li>图片</li>
<li>汽车</li>
<li>房产</li>
<li>扯淡</li>
</ul>
</body>
</html>
5表格
th,td
border-collapse:collapse;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
border: 1px solid black;
border-collapse:collapse;
}
td{
border-bottom: 1px solid black;
width: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
</table>
</body>
</html>
6区域定位
标准流：在布局中区块没有设置区域定位；
非标准流：区块设置区域定位
定位分三类 绝对定位 相对定位 固定定位
6.1绝对定位
position：absolute；
浮与正常区块的上面，相对浏览器定位；
left：区域相聚浏览器左边距离；
right：区域相聚浏览器右边距离；
top:区域相聚浏览器顶边距离；
bottom：区域相聚浏览器底边距离；
z-index:区域出现重叠，想显示出来，设置最大的阿拉伯数字；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 20px;
top: 20px;
}
.box2{
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: absolute;
left: 50px;
top: 50px;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
6.2相对定位
position：relative;
只是针对最初的位置；
相对前一个元素的位置定位，会影响布局，因为后面的元素位置不会为此改变；
left：区域相距前一个元素左边距离；
right：区域相距前一个元素右边距离；
top:区域相距前一个元素顶边距离；
bottom：区域相距前一个元素底边距离；
z-index:区域出现重叠，优先级，越大的就最先显示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: relative;
left: 40px;
top: 40px;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
来源：https://www.cnblogs.com/xiaoruirui/p/11168297.html