第六十九篇 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. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
- 1. 第六十九節，css入門基礎
- 2. 第六十六篇 前端基礎一
- 3. 第十九章：集合視圖（十六）
- 4. python學習二十九天（css之float和定位）
- 5. css顯示隱藏
- 6. 打卡第六十九天
- 7. css之定位
- 8. flask第十六篇——Response【2】
- 9. SpringBoot第十六篇：自定義starter
- 10. CSS（六）元素定位（position）