第六十九篇 css之显隐、定位
目录css
1、显隐
1.display
1.经过设置盒子的display属性来控制显隐状态，设置为none为隐藏，block为显示html
2.隐藏后的盒子不会占位浏览器
3.不能够作动画函数
<style>
body {
margin: 0;
}
div {
width: 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，则盒子就隐藏了spa
2.隐藏以后不会占位code
3.能够作动画htm
<style>
.box2 {
width: 0;
height: 0;
/*超出content的内容经过overflow：hidden隐藏*/
overflow: hidden;
/*控制过渡效果：动画时间1s 延迟时间0s 动态曲线ease*/
transition: 1s 0s ease;
/*过渡属性设置，能够设置多个*/
transition-property: all;
}
/*兄弟选择器，经过悬浮在兄弟上，控制本身*/
.box5:hover ~ .box6 {
width: 200px;
height: 200px;
background-color: pink;
}
.box6:hover {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
2、动画（过渡）
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{
width: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{
width: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：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果
3、盒子阴影
1.box-shadow
1.box-shadow的属性有: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
transition: .3s;
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}
</style>
4、定位
1.固定定位
1.经过设置position: fixed来为元素（盒子）设置层模型中（页面中）的固定定位
2.直接以浏览器窗口做为参考进行定位，使用left、right、top、bottom属性相对于窗口进行固定定位
3.浮动在页面中
4.固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响（元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小）
5.固定定位的参考系是窗口，不是窗口中的哪个点，而是四边参照四边，也就是说，若是你把四个方位属性都写上去了，它就会去按照四个方位的属性值来进行定位
6.若是你真的写了四个方位属性，可是它也会有所取舍，也就是left和right同时存在时，会参考left来定位；若是top和bottom同时存在，则参考top的值来参考定位
<style>
.box {
width: 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 {
width: 180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
<!-- 子级 -->
.sub {
width: 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 {
width: 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;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
5、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;
width:200px;
white-space:nowrap;
border:1px solid red;
}
</style>
<style>
.test{
overflow:scroll;
width:200px;
white-space:nowrap;
border:1px solid red;
}
</style>
6、案例
1.小米悬浮商品案例
<!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>
2.轮播图菜单案例
<!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>
- 1. 第六十九节，css入门基础
- 2. 第六十六篇 前端基础一
- 3. 第十九章：集合视图（十六）
- 4. python学习二十九天（css之float和定位）
- 5. css显示隐藏
- 6. 打卡第六十九天
- 7. css之定位
- 8. flask第十六篇——Response【2】
- 9. SpringBoot第十六篇：自定义starter
- 10. CSS（六）元素定位（position）
- 更多相关文章...
- • 使用 CSS 显示 XML - XML 教程
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • RxJava操作符（十）自定义操作符
- • RxJava操作符（九）Connectable Observable Operators
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
- 1. 第六十九节，css入门基础
- 2. 第六十六篇 前端基础一
- 3. 第十九章：集合视图（十六）
- 4. python学习二十九天（css之float和定位）
- 5. css显示隐藏
- 6. 打卡第六十九天
- 7. css之定位
- 8. flask第十六篇——Response【2】
- 9. SpringBoot第十六篇：自定义starter
- 10. CSS（六）元素定位（position）