一、显隐
1.display
1.通过设置盒子的display属性来控制显隐状态，设置为none为隐藏，block为显示
2.隐藏后的盒子不会占位
3.不可以做动画
<style>
body {
margin: 0;
}
div {
200px;
height: 200px;
background-color: white;
/*字体设置：字体大小/行高 "Arial"字体样式*/
font: 30px/200px 'Arial';
color: red;
/*文本对齐方式：水平居中*/
text-align: center;
/*外边距：上下为0 左右自动对称*/
margin: 0 auto;
/*边界圆角：圆*/
border-radius: 50%;
}
</style>
<style>
/*隐藏盒子2*/
.box2 {
display: none;
/*设置过渡时间为1s*/
transition:1s;
}
/*兄弟选择器：操作兄弟时，自身会受影响*/
.box1:hover ~ .box2 {
display: block;
}
.box2:hover {
display: block;
}
</style>
2.opacity
1.opacity的值范围为：0~1。用于控制盒子的透明度
2.只是会将盒子变成透明的，任然有占位
3.可以做动画，也即是可以通过transition属性来实现动态显示
<style>
.box2 {
/*设置为透明的*/
opacity: 0;
/*设置过度效果：动画时间1秒*/
transition：1s;
}
.box1:hover ~ .box2 {
opacity: 1;
}
.box2:hover {
opacity: 1;
}
</style>
3.width
1.直接控制盒子的宽高，将它的宽和高都设置为0，则盒子就隐藏了
2.隐藏之后不会占位
3.可以做动画
<style>
.box2 {
0;
height: 0;
/*超出content的内容通过overflow：hidden隐藏*/
overflow: hidden;
/*控制过渡效果：动画时间1s 延迟时间0s 动态曲线ease*/
transition: 1s 0s ease;
/*过渡属性设置，可以设置多个*/
transition-property: all;
}
/*兄弟选择器，通过悬浮在兄弟上，控制自己*/
.box5:hover ~ .box6 {
200px;
height: 200px;
background-color: pink;
}
.box6:hover {
200px;
height: 200px;
background-color: pink;
}
</style>
二、动画（过渡）
1.transition
1.所包含的各种属性：
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
/*1.transition-property：指定过渡的CSS属性*/
/*2.transition-duration：指定完成过渡所需的时间*/
/*3.transition-timing-function：指定过渡调速函数*/
/*4.transition -delay：指定过渡开始出现的延迟时间*/
2.transition属性类似于border，font这些属性，可以简写，也可以单独来写。简写时，各函数之间用空格隔开，且需要按一定的顺序排列。另外，作用于多个过渡属性时，中间用逗号隔开
<style>
div{
50px;
height:100px;
background:#ffd800;
/*1.分开使用transition的扩展属性*/
transition-property:width,height,background;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:.2s; /*动画会等待0.2s再出现，一般用户会以为是卡了，体验并不好*/
/*2.使用transition简写属性*/
transition: width 1s ease .2s, height 1s ease .2s, background 1s ease .2s;
}
div:hover{
100px;
height:50px;
background:#00ff90;
}
</style>
2.transition-property
transition-property: none | all | <single-transition-property> [, <single-transition-property>]
1.none：没有指定任何样式
2.all：默认值，表示指定元素所有支持transition-property属性的样式
3.<single-transition-property>：指定一个或多个样式
4.注意：并不是所有样式都能应用transition-property进行过渡，只有具有一个中点值的样式才能具备过渡效果，比如：颜色、长度、渐变等
3.transition-duration
transition-duration:<time> [,<time>]
1.<time>为数值，单位为s(秒)或ms(毫秒)，默认值是0。当有多个过渡属性时，可以设置多个过渡时间分别应用过渡属性，也可以设置一个过渡时间应用所有过渡属性
4.transition-timing-function
transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>]
1.<single-transition-timing-function>指单一的过渡函数，主要包括下面几个属性值
2.ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢
3.linear：元素样式从初始状态过渡到终止状态速度是恒速
4.ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。这种效果称为渐显效果
5.ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。这种效果称为渐隐效果
6.ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果
三、盒子阴影
1.box-shadow
1.box-shadow的属性有: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色
<style>
.box {
200px;
height: 200px;
background-color: pink;
margin: 200px auto;
transition: .3s;
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}
</style>
四、定位
1.固定定位
1.通过设置position: fixed来为元素（盒子）设置层模型中（页面中）的固定定位
2.直接以浏览器窗口作为参考进行定位，使用left、right、top、bottom属性相对于窗口进行固定定位
3.浮动在页面中
4.固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响（元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小）
5.固定定位的参考系是窗口，不是窗口中的哪一个点，而是四边参照四边，也就是说，如果你把四个方位属性都写上去了，它就会去按照四个方位的属性值来进行定位
6.如果你真的写了四个方位属性，但是它也会有所取舍，也就是left和right同时存在时，会参考left来定位；如果top和bottom同时存在，则参考top的值来参考定位
<style>
.box {
260px;
height: 420px;
background-color: pink;
}
.box {
position: fixed;
right: 10px;
top: calc(50% - 210px);
}
</style>
2.绝对定位
1.通过设置position: absolute来为元素（盒子）设置层模型中（页面中）的绝对定位
2.上述语句的作用将元素从文档流中拖出来，将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口
3.浮动在页面中
4.绝对定位的参考系是最近的具有定位属性的父级，不是父级中的哪一个点，而是四边参照四边，也就是说，如果你把四个方位属性都写上去了，它就会去按照四个方位的属性值来进行定位
5.如果你真的写了四个方位属性，但是它也会有所取舍，也就是left和right同时存在时，会参考left来定位；如果top和bottom同时存在，则参考top的值来参考定位
<style>
<!-- 父级 -->
.sup {
180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
<!-- 子级 -->
.sub {
50px;
height: 80px;
background-color: red;
}
<!-- 1）父级需要定位 - 辅助子级绝对定位，作为子级绝对定位的参考系 -->
<!-- 2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来 -->
<!-- 3) 结论：相对定位 => 父相子绝 -->
.sup {
position: relative;
}
<!-- 子级采用绝对定位 -->
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
3.相对定位
1.通过设置 position: relative 来为元素（盒子）设置层模型中（页面中）的相对定位
2.它还是会占用该元素在文档中初始的页面空间（也就是不会浮起来），通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
3.相对定位的参考系是自身原有位置（当前位置），不是自身中的哪一个点，而是四边参照四边，也就是说，如果你把四个方位属性都写上去了，它就会去按照四个方位的属性值来进行定位
4.如果你真的写了四个方位属性，但是它也会有所取舍，也就是left和right同时存在时，会参考left来定位；如果top和bottom同时存在，则参考top的值来参考定位
5.布局移动后，也不会影响自身原有位置（兄弟布局也不会变化），任然指的是不会浮起来
6.作用：辅助于子级的绝对定位布局，一般不用于自身布局
<style>
.box {
300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}
</style>
4.z-index
1.z-index属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个
2.对于一个已经定位的元素（即position属性值不是static的元素），z-index 属性指定：
- 元素在当前堆叠上下文中的堆叠层级
- 元素是否创建一个新的本地堆叠上下文
3.语法：
/* 字符值 */
z-index: auto; /*元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同*/
/* 整数值 */
/*整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-index 进行对比*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */
/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;
4.实例：
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
五、overflow
1.语法：
overflow：<overflow-style>;
<overflow-style>= visible | hidden | scroll | auto
2.visible： 不剪切内容
3.hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条
4.scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容（取值为scroll时，无论内容是否超出对象的尺寸，滚动条是一直存在的）
5.auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。（取值为auto时，当内容超出对象的尺寸时才会显示滚动条）
<style>
.test{
overflow:auto;
200px;
white-space:nowrap;
border:1px solid red;
}
</style>
<style>
.test{
overflow:scroll;
200px;
white-space:nowrap;
border:1px solid red;
}
</style>
六、案例
1.小米悬浮商品案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位案例</title>
<style>
body {
margin: 0;
background-color: tomato;
}
.box {
234px;
height: 300px;
background-color: white;
margin: 100px auto 0;
/*父相子绝*/
position: relative;
}
.title {
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 {
150px;
/*高会等比缩放*/
}
.logo {
position: absolute;
bottom: 70px;
font-size: 15px;
text-align: center;
inherit;
}
.price {
text-align: center;
position: absolute;
inherit;
bottom: 30px;
font-size: 14px;
}
.price span:first-child {
color: #ff6700;
}
.price span:last-child {
text-decoration: line-through;
color: #aaa;
}
.bottom {
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>
2.轮播图菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.scroll-view {
1226px;
height: 460px;
background-color: orange;
margin: 50px auto 0;
position: relative;
}
.scroll-menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
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 {
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>