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>