顯示到隱藏 -盒子陰影-三種定位-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; - 有超出內容才以滾動方式顯示
--------------------代碼部分--------------------------css
顯示與隱藏
<!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;
}
/*固定定位
一、定位屬性值：fixed
二、在頁面中再也不佔位(浮起來了)
三、一旦定位後，定位的佈局方位 top、bottom、left、right都能參與佈局
四、固定定位的參考系是頁面窗口(不是頁面中的哪一點，而是四邊參照四邊)
五、左右同時存在，取左；同理上下取上
*/
.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;
}
/*絕對定位：
一、定位屬性值：absolute
二、在頁面中再也不佔位(浮起來了)，就沒法繼承父級的寬度(必須本身自定義寬度)
三、一旦定位後，定位的佈局方位 top、bottom、left、right都能參與佈局
四、絕對定位的參考系是最近的定位父級(不是父級中的哪一點，而是四邊參照四邊)
五、左右同時存在，取左；同理上下取上
六、當父級定位了，子級參照父級定位，又能夠從新獲取父級寬度(也能夠在計算中拿到父級高度)
*/
.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;
}
/*相對定位：
一、定位屬性值：relative
二、在頁面中依舊佔位，徹底保留以前的全部佈局
三、一旦定位後，定位的佈局方位 top、bottom、left、right都能參與佈局
四、相對定位的參考系是自身原有位置(當前位置)(不是自身中的哪一點，而是四邊參照四邊)
五、左右同時存在，取左；同理上下取上，佈局移動後，也不影響自身原有位置(兄弟佈局也不會變化)
做用：輔助於子級的絕對定位佈局，通常不用於自身佈局
*/
.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>
相關文章
- 1. css屬性設置-顯示與隱藏、盒子陰影、固定定位
- 2. box-shadow —— 盒子陰影（css3屬性）
- 3. CSS3屬性之文本陰影、盒子陰影、文本換行
- 4. 盒子陰影
- 5. CSS 元素的顯示與隱藏（display屬性、visibility屬性、overflow屬性）
- 6. 9.顯示和隱藏盒子
- 7. css3文字陰影和盒子陰影
- 8. CSS3文本陰影、盒子陰影
- 9. 顯示和隱藏（display屬性）
- 10. CSS元素的顯示與隱藏
- 更多相關文章...
- • SVG 陰影 - SVG 教程
- • ADO 顯示 - ADO 教程
- • JDK13 GA發佈：5大特性解讀
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
