显示到隐藏 -盒子阴影-三种定位-overflow属性
显示和隐藏
首先是显示：设置的display的值为none 同时设置过度效果方式为transition
涉及到的两个盒子是兄弟关系之间作悬浮
这样的结果就是值为none时，盒子会被隐藏，并且不会再页面中占位
显示2：代码opacity 设置的值为0~1 值是控制盒子的透明度的，但是消失之后的话 是在页面中占一个位置，还有一个涉及到的点，就是在设置背景的话，文本不会被处理
隐藏：
先是设置一个盒子，把宽高都设为0.，涉及到的代码 overflow：hidden
transition:1s 0s ease;------前面的时间是渐变宽度高度的时间，中间的是颜色渐变的时间
过渡的属性可以自定义，分为宽度，背景颜色，高度 可以单独分开，
总体的隐藏就是all transition-property：all
盒子阴影
首先先设置一个盒子：
再然后在盒子style里面使用到代码 box-shadow：-100px 0 10px 0 red
这后面的数分别代表着 x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色；
固定定位
定位的属性值：fixed
特性：不再占位，从此浮起来了
一旦定位后，定位的布局方位top、bottom、left、right都可以参加布局
那参照的对边不是页面中的哪一点 而是四边参照四边
同左右存在----取左， 同上下存在 ----取上
同情况下还有个响应布局：
@media （min-width:1000px）{
.box{同样使用
}}
绝对定位
定位的属性值：absolute
在页面中不再占位（浮起来了），就无法继承父级的宽度（必须是自己定义的宽度）
一旦定位后，定位的布局方位top、bottom、left、right都可以参加布局
那参照的对边不是页面中的哪一点 而是四边参照四边
同左右存在----取左， 同上下存在 ----取上
当父级定位了，子集参照父级定位，又可以重新获取父级宽度（也可以在计算中拿到父级高度）
父级相对定位的目的：1.不影响自身布局，2辅助子集绝对定位布局
相对属性
定位的属性值为：relative
再页面中依旧占位，完全保留之前的所有布局
一旦定位之后，鼎维尔布局方位 top、bottom、left、right都能参与布局
相对定位的参考系是自身原有位置（当前位置）（不是自身的哪一点，而是四边参照四边）
同左右 --取左 同上下 --取上
作用：辅助子级的绝对定位布局，一般不用于自身布局
overflow属性
默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)
overflow: hidden; - 隐藏超出的内容
overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
overflow: auto; - 有超出内容才以滚动方式显示
--------------------代码部分--------------------------
显示与隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示与隐藏</title>
<style>
body {
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: orange;
font: 30px/200px 'Arial';
color: red;
text-align: center;
margin: 0 auto;
border-radius: 50%;
}
</style>
<style>
/*display
值为none时，盒子会被隐藏，且不在页面中占位
*/
.box2 {
display: none;
transition: 1s;
}
.box1:hover ~ .box2 {
display: block;
}
.box2:hover {
display: block;
}
</style>
<style>
/*opacity
值为0~1，控制盒子的透明度，但是消失后，在页面中占位
*/
.box4 {
/*背景颜色不能操作文本*/
/*background-color: rgba(0,0,0,0);*/
opacity: 0;
/*过度效果*/
transition: 1s;
}
.box3:hover ~ .box4 {
opacity: 1;
}
.box4:hover {
opacity: 1;
}
</style>
<style>
.box6 {
width: 0;
height: 0;
/*超出content以外的内容如何处理：hidden隐藏*/
overflow: hidden;
transition: 1s 0s ease;
/*过渡得我属性个数可以自定义*/
/*transition-property: width, background-color, height;*/
transition-property: all;
}
.box5:hover ~ .box6 {
width: 200px;
height: 200px;
background-color: pink;
}
.box6:hover {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子阴影</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
margin: 200px auto;
/*opacity: 0;*/
transition: .3s;
}
.box {
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
/*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
html, body {
min-width: 1000px;
}
body {
margin: 0;
height: 5000px;
}
.box {
width: 260px;
height: 420px;
background-color: orange;
}
/*固定定位
1、定位属性值：fixed
2、在页面中不再占位(浮起来了)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
*/
.box {
position: fixed;
/*left: 10px;*/
right: 10px;
/*bottom: 50%;*/
top: calc(50% - 210px);
}
/*响应式布局*/
/*@media (min-width: 1000px) {*/
/*.box {*/
/*position: fixed;*/
/*!*left: 10px;*!*/
/*right: 10px;*/
/*bottom: 10px;*/
/*top: 10px;*/
/*}*/
/*}*/
</style>
</head>
<body>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
.sup {
width: 180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
width: 50px;
height: 80px;
background-color: red;
}
/*绝对定位：
1、定位属性值：absolute
2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求：
1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系
2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来
结论：相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/
position: relative;
}
/*body {*/
/*width: 1000px;*/
/*height: 600px;*/
/*position: fixed;*/
/*}*/
/*.sup {*/
/*position: fixed;*/
/*}*/
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
<h3>hhhhhhhhhhhh</h3>
</div>
</body>
</html>
小米悬浮商品案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位案例</title>
<style>
body {
margin: 0;
background-color: tomato;
}
.box {
width: 234px;
height: 300px;
background-color: white;
margin: 100px auto 0;
/*父相子绝*/
position: relative;
}
.title {
width: 64px;
height: 20px;
background-color: #e53935;
font-size: 12px;
color: white;
text-align: center;
/*绝对定位*/
position: absolute;
top: 0;
left: calc(50% - 32px);
/*默认消失，有数据就 show 显示*/
display: none;
}
.show {
display: block;
}
/*大家都定位浮起来，很容易出现层次重叠 z-index绝对显示层次*/
/*z-index: 值为大于等于1的正整数，不需要有序*/
.title {
z-index: 666;
}
.img {
z-index: 10;
}
.img {
position: absolute;
top: 35px;
left: calc(50% - 75px);
}
.img img {
width: 150px;
/*高会等比缩放*/
}
.logo {
position: absolute;
bottom: 70px;
font-size: 15px;
text-align: center;
width: inherit;
}
.price {
text-align: center;
position: absolute;
width: inherit;
bottom: 30px;
font-size: 14px;
}
.price span:first-child {
color: #ff6700;
}
.price span:last-child {
text-decoration: line-through;
color: #aaa;
}
.bottom {
width: inherit;
height: 0;
background-color: yellow;
z-index: 888;
transition: .2s;
/*将超出内容隐藏*/
overflow: hidden;
position: absolute;
bottom: 0;
}
.box:hover .bottom {
height: 80px;
}
.box {
transition: .2s;
}
.box:hover {
box-shadow: 0 5px 10px 0 #ccc;
margin-top: 95px;
}
</style>
</head>
<body>
<div class="box">
<div class="title show">减 100 元</div>
<!--外层完成位置布局，内存完成内容展示-->
<div class="img">
<img src="img/001.jpg" alt="">
</div>
<h3 class="logo">小米电视4A 32寸</h3>
<p class="price">
<span>699元</span>
<span>799元</span>
</p>
<div class="bottom">
<h5>嘻嘻嘿嘿哈哈-呵呵！！！</h5>
<p>来自<a href="">Owen</a>的评论</p>
</div>
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
h1 {
margin: 0;
}
/*相对定位：
1、定位属性值：relative
2、在页面中依旧占位，完全保留之前的所有布局
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上，布局移动后，也不影响自身原有位置(兄弟布局也不会变化)
作用：辅助于子级的绝对定位布局，一般不用于自身布局
*/
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}
</style>
</head>
<body>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
</body>
</html>
overflow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
.box {
width: 200px;
height: 300px;
background-color: pink;
}
/*
1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)
2）overflow: hidden; - 隐藏超出的内容
3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
4）overflow: auto; - 有超出内容才以滚动方式显示
*/
.box {
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大
</div>
</body>
</html>
轮播图菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.scroll-view {
width: 1226px;
height: 460px;
background-color: orange;
margin: 50px auto 0;
position: relative;
}
.scroll-menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 234px;
padding: 20px 0;
}
.scroll-menu a {
display: block;
/*height: 42px;*/
line-height: 42px;
color: white;
/*padding-left: 30px;*/
text-indent: 30px;
}
.scroll-menu a span {
/*参考的不是a，是ul*/
position: absolute;
right: 20px;
}
.scroll-menu a:hover {
background-color: red;
}
.scroll-menu-blank {
width: calc(1226px - 234px);
height: 460px;
background-color: red;
/*参考的是ul*/
position: absolute;
top: 0;
left: 234px;
display: none;
}
.scroll-menu li:hover ~ .scroll-menu-blank {
display: block;
}
.scroll-menu-blank:hover {
display: block;
}
</style>
</head>
<body>
<div class="scroll-view">
<!--轮播图-->
<div class="scroll-scroll"></div>
<!--菜单栏-->
<ul class="scroll-menu">
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<div class="scroll-menu-blank">
</div>
</ul>
</div>
</body>
</html>
程序的道路上一去不复返
