前端之盒模型顯隱、定位與流式佈局思想 盒模型的顯隱 定位 相對定位 絕對定位 固定定位 z index 屬性 html <!DOCTYPE html z index .wrap { width: 200px; height: 200px; background: pink; / 父級做相對定位處理, ...
前端之盒模型顯隱、定位與流式佈局思想
盒模型的顯隱
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的顯隱</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background: red;
}
.wrap {
background: orange;
}
/*display: none; 通過控制盒子的顯示方式來隱藏盒子*/
/*該隱藏方式在頁面中不占位*/
.box {
display: none;
}
/*opacity: 0; 通過控制盒子的透明度來隱藏盒子*/
/*該隱藏方式在頁面中占位*/
.box {
/*opacity: 0*/
}
/*註: 一般顯隱操作的盒子都是採用定位佈局*/
/*懸浮父級顯示子級*/
body:hover .box {
display: block;
}
/*將盒子藏到屏幕外: 不能通過盒模型佈局, 也不建議通過浮動佈局, 可以採用定位佈局*/
.box {
/*margin-top: -208px*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>定位
相對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位佈局</title>
<style type="text/css">
/*定位佈局的導入*/
/*需求: */
/*1.子級在父級的右下角顯示*/
/*2.子級完成佈局後,父級做content後,子級不需要重新佈局*/
.sup {
width: 300px;
height: 300px;
background: pink;
border: 10px solid black;
}
.sub {
width: 50px;
height: 50px;
background: red;
margin-left: auto;
margin-top: 150px;
}
/*能不能有一種定位, 讓盒子可以通過上下左右四個方位均操作自身佈局 => 定位佈局*/
/*什麼是定位佈局: 可以通過上下左右四個方位完成自身佈局的佈局方式*/
.sup {
display: none;
}
</style>
<style type="text/css">
/*相對定位佈局*/
.box {
width: 200px;
height: 200px;
background: pink;
}
.b2 { background: orange }
.b1 {
/*1.設置定位屬性，就會打開定位方位*/
position: relative;
/*2.通過定位方位完成佈局*/
top: 300px;
left: 300px;
/*bottom: 100px;*/
/*right: 100px;*/
/*margin-top: 200px;*/
/*結論*/
/*1.左右取左,上下取上(eg:left與right共存是,left生效)*/
/*2.left=-right, top=-bottom*/
/*3.參考系: 自身原有位置(不是某一個點,eg: right參考的就是原有位置的右邊界)*/
/*4.自身佈局後不會影響自身原有位置*/
/*5.不脫離文檔流(脫離文檔流: 不再撐開父級高度)*/
}
</style>
</head>
<body>
<div class="box b1">1</div>
<div class="box b2"></div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位佈局</title>
<style type="text/css">
.box {
width: 200px;
height: 300px;
background: orange;
}
.sup {
width: 200px;
height: 200px;
background: pink;
/*position: absolute;*/
}
.sub {
width: 50px;
height: 50px;
background: red;
/*1.開的定位*/
position: absolute;
/*2.採用定位方位完成佈局*/
right: 0;
bottom: 0;
}
body {
position: relative;
}
/*註: 一般父級採用的是相對定位佈局, 一般情況下,父級不需要脫離文檔流*/
/*如果父級需要脫離文檔流,用絕對定位父級完成佈局,完全可以,不會影響子級相對於自身的佈局,但是自身又要需要一個在文檔流中的(不脫離文檔流中的)定位參考父級 => 父相子絕*/
/*相對定位的應用場景大部分都是輔助於子級的絕對定位*/
.sup {
position: relative;
}
.sub {
/*left: 0;*/
right: 0;
}
</style>
</head>
<body>
<!-- 絕對定位佈局一定存在父子關係 -->
<!-- 導入定位佈局時,父級設置寬高沒?(設置了) 子級呢?(也設置了) => 父級的高度不再依賴於子級 => 子級脫離文檔流 -->
<!-- 參考系: 最近的定位父級 -->
<div class="sup">
<div class="sub"></div>
</div>
<!-- <div class="box"></div> -->
<!--
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.父級必須自己設置寬高
3.完全離文檔流
-->
</body>
</html>固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/*參考系: 頁面視窗*/
/*1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左*/
/*2.相對於頁面視窗是靜止的*/
/*3.完全脫離文檔流*/
.box {
width: 200px;
height: 300px;
background: orange;
}
.box {
position: fixed;
top: 200px;
right: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>z-index 屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
background: pink;
/*父級做相對定位處理,並不是自己需要用定位完成佈局,最主要的原因是輔助於子級完成絕對定位佈局*/
position: relative;
}
.box {
width: 75px;
height: 75px;
font: normal 30px/75px "STSong";
text-align: center;
background: cyan;
/*絕對定位需要大家脫離文檔流,相互不會影響佈局,每個都是獨立相對於父級進行佈局的個體*/
position: absolute;
/*top: 0;*/
/*bottom: 0;*/
/*left: 0;*/
}
.b1 {
left: 0;
top: 0;
background: red;
}
.b2 {
right: 0;
top: 0;
background: yellow;
}
.b3 {
/*雖然子級脫離了文檔流,但是父子關係以及存在,子級獲取100%,得到的還是父級對應的值*/
left: calc((100% - 75px) / 2);
top: calc((100% - 75px) / 2);;
background: green;
/*z-index改變顯示層級, 顯示層級的值為正整數, 值越大,顯示層級越高*/
z-index: 1;
}
.b4 {
left: 0;
bottom: 0;
background: blue;
/*z-index: 88889;*/
}
.b5 {
right: 0;
bottom: 0;
background: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
<div class="box b4">4</div>
<div class="box b5">5</div>
</div>`
</body>
</html>流式佈局思想
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式佈局思想</title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
/*輔助body內部的子級有height流式佈局的基礎*/
height: 100%;
}
/*流式佈局思想: 儘可能不去使用固定屬性值*/
/*通過父級來獲取相應的屬性值*/
.b1 {
width: 100%;
height: 100%;
background: red;
}
.b2 {
/*view-width view-height*/
width: 80vw;
height: 80vh;
background: orange;
/*流式佈局限制條件: 流式佈局下寬度最大隻能放大到800px,最小隻能縮小到600px*/
max-width: 800px;
min-width: 600px;
}
html {
font-size: 200px;
}
body {
font-size: 100px;
}
span {
/*設置自身字體時 em = ?px 父級字體的大小*/
font-size: 2em;
display: block;
/*寬高em在自身設置字體大小後,值又會更改為相應大小*/
/*eg: body: 100px => 設置自身字體時em=100px, */
/*自身設置字體大小為2em,自身字體大小為200px => width=2em的em=200px*/
/*結果自身寬度是400pk*/
/*自身非設置字體時使用em單位,em值取自身字體大小*/
width: 2em;
/*rem = html字體的大小*/
height: 2rem;
background: red;
}
</style>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.sub {
/*父級的content是提供給子級盒子利用的*/
margin: 0 5px;
border: 5px solid black;
padding: 5px;
/*auto <= 100%*/
width: auto;
/*width: 100%;*/
height: 50px;
background: orange;
}
</style>
</head>
<body>
<!-- <div class="b1"></div> -->
<!-- <div class="b2"></div> -->
<!-- <span>好的</span> -->
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>hover 父子懸浮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sup {
width: 120px;
height: 40px;
background: pink;
position: relative;
}
.sub {
width: 120px;
height: 100px;
background: black;
position: absolute;
left: 0;
top: 40px;
display: none;
}
.sup:hover .sub {
display: block;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>總結
一.浮動佈局的總結
1.同一結構下, 如果採用浮動佈局,所有的同級別兄弟標簽都要採用浮動佈局
2.浮動佈局的盒子寬度在沒有設定時會自適應內容寬度二.盒子的顯隱
display: none;
在頁面中不占位, 採用定位佈局後, 顯示隱藏都不會影響其他標簽佈局, 不需要用動畫處理時
opacity: 0;
在頁面中占位, 採用定位佈局後, 顯示隱藏都不會影響其他標簽佈局, 需要採用動畫處理時三.定位佈局
什麼是定位佈局: 可以通過上下左右四個方位完成自身佈局的佈局方式- 相對定位
參考系: 自身原有位置
position: relative; => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.left = -right | top = -bottom
3.佈局後不影響自身原有位置
4.不脫離文檔流- 絕對定位
參考系: 最近的定位父級
position: absolute; => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.父級必須自己設置寬高
3.完全離文檔流- 固定定位
參考系: 頁面視窗
position: fixed; => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.相對於頁面視窗是靜止的
3.完全脫離文檔流- z-index
修改顯示層級(在發生重疊時使用), 值取正整數, 值不需要排序隨意規定, 值大的顯示層級高四.流式佈局思想
1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem
