标签的隐藏与四种整体写法
标签的隐藏目的：
用来做一些标签的显示隐藏切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: orange; border-radius: 50%; /*border-style: solid;*/ /*border- 1px;*/ /*border-color: red;*/ /*3种整体写法*/ color: green; border: 1px solid red; background: url("img/001.png") no-repeat 0 0; /*图片，不平铺，移动位置*/ font: normal 30px/100px 'Arial'; /*字重，字体大小，行高，字族(字体常用写法)*/ color: green; text-align: center;
box-shadow: 0 150px 10px 0 green; /*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/
} .d1:hover ~ .d2 { display: block; } .d2 { display: none; /*1.拿走了，在页面中不占位，但重新显示，任然占位*/ } .d3 { opacity: 0.5; /*2.修改盒子的透明度，值为0，完全透明，但在页面中占位，值为1不透明*/ } </style> </head> <body> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </body> </html>
定位布局
一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局
固定定位：
1.固定定位参考浏览器窗口
2.布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右
3.同时出现左右取左，上下去上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { height: 500vw; /* 当前页面窗口的宽高(随着幕尺寸变化而变化)：vw vh */ background-color: red; } .tag { width: 180px; height: 300px; background-color: orange; position: fixed; left: 0; top: calc(50% - 150px); /*左侧居中*/ right: 50px; bottom: 20px; } .flag { width: 220px; height: 330px; background-color: pink; position: fixed; left: 0; top: calc(50% - 165px); } .tag { /*z-index值就是大于等于1的正整数， 多个重叠图层通过z-index值决定上下图层显示先后（谁大，谁在上面），浮动也适用*/ z-index: 666; } .flag { z-index: 888; } </style> </head> <body> <div class="tag"></div> <div class="box"></div> <div class="flag"></div> </body> </html>
绝对定位
1.子标签获取不到父级标签的宽，也撑不开父级的高(脱离父级标签，兄弟标签相互不影响，不会换行)
所一子标签必须自己设置宽高，父级也必须自己设置宽高
2.一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)
3.参考系：最近的定位了的父级(父级三种定位都可以用 ，父
可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型)
4、z-index 值能改变重叠的兄弟图层上下关系
5.上距上(上面的边距离父级上面的边)...下距下
6.上下去上、左右取左
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; background-color: orange; margin: 100px auto 0; } .s { width: 100px; height: 100px; font: normal 20px/100px 'Arial'; text-align: center; } .s1 { background-color: red } .s2 { background-color: pink } .s3 { background-color: green } .box { position: relative; } .s1 { right: 0; left: 0; bottom: 0; z-index: 1; } .s2 { bottom: 50px; left: 0; z-index: 10; } </style> </head> <body> <div class="box"> <div class="s s1">1</div> <div class="s s2">2</div> <div class="s s3">3</div> </div> </body> </html>
相对定位
1、父相子绝
2.参考系：自身原有位置，且自身偏移不影响原有位置,因为偏移的是图层
3、相对定位也存在独立使用方位移动，但是可以用盒模型完全取代，所以一般不用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; background-color: orange; border: 1px solid black; } .box { /*margin-left: 100px;*/ /*margin-right: 100px;*/ /*margin-top: 100px;*/ } .box { position: relative; /*left: 100px;*/ /*right: 100px;*/ /*top: 100px;*/ /*bottom: 100px;*/ } p { margin: 0; border: 1px solid black; } </style> <style> .box { margin: 10px 100px; position: absolute; } </style> </head> <body> <div class="box">12345</div> <p>12345</p> </body> </html>
ps：
文字不可选中：
user-select：none
鼠标悬浮小手掌：
cursor：pointer
获取父级的宽度：
width：calc（100%）
设置背景图片：
backround-image：url（“ ”）
和窗口同宽：
width：100vw
字体：
font：normal 20px/50px 'Arial'
缓冲：
transition：0.5s