目錄
- 盒子模型
- 浮動布局（float）
- 1.什么是浮動
- 2.浮動的作用
- 3.浮動有倆個特點
- 4.浮動（float）格式
- 5.浮動會造成父標簽塌陷 這是一個不好的現象 因為會引起歧義
- 6.解決父標簽塌陷問題
- 溢位屬性（overflow）
- 內容溢位的應用場景-頭像設定
- 定位
- 靜態static
- 1.relative（相對定位）
- 2.absolute（絕對定位）
- 3.fixed（固定）
- 優先展示文本內容
- 脫離檔案流(就是原來的位置是否保留)
- 1.什么是脫離檔案流？
- 2.主要作用于的物件
- 3.不脫離檔案流
- 4.脫離檔案流
- z-index之模態框案例
- 層疊順序
- 模擬z-index模態框
- 靜態頁面小練習
盒子模型
margin：用于控制元素與元素之間的距離，它的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的
padding：用于控制內部文本內容與邊框之間的距離
border：圍繞在內邊距和內容外的邊框
content：盒子的內容，顯示文本和影像，標簽內部的內容
需要掌握的操作
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin的各個引數使用
margin:0; 簡寫形式 作用于上下左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin還可以讓內部標簽居中展示
margin:100px auto 僅限于水平方向
padding使用方式與margin一致
body標簽默認自帶8px的外邊距 在撰寫的時候應該提前去掉
要使用margin: 0; 貼合上邊框
浮動布局（float）
1.什么是浮動
在CSS中，任何元素都可以浮動
浮動元素會生成一個塊級框，而不論它本身是何種元素
2.浮動的作用
只要是設計到頁面的布局一般都是用浮動來提升規劃好的，頁面布局必不可少的操作
3.浮動有倆個特點
1.浮動的框可以向左或者向右移動，直到它的外邊緣碰到包含框或者另一個浮動框的邊框為止
2.由于浮動的框不在檔案的普通流中，所以檔案的普通流中的塊框表現得像浮動框不存在一樣
4.浮動（float）格式
float: 浮動方向；
三種取值：
left----向左浮動
right----向右浮動
none----默認值，不浮動
5.浮動會造成父標簽塌陷 這是一個不好的現象 因為會引起歧義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d {
border: 2px solid lightskyblue;
}
.d1 {
border: 2px solid plum;
background-color: plum;
float: left;
height: 100px;
width: 100px;
}
.d2 {
border: 2px solid peachpuff;
background-color: peachpuff;
float: right;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div >
<div ></div>
<div ></div>
</div>
</body>
</html>
6.解決父標簽塌陷問題
1.自己加一個div設定高度（再寫一個div撐起來，但是這種方法不可取，總不能遇到這種情況的時候就設定一個div來撐）
#d4 {
/*高度*/
height: 100px;
}
2.利用clear屬性（可以使用）
#d4 {
/*該標簽的左邊(地面和空中)不能有浮動元素*/
clear: left;
3.通用的解決浮動帶來的影響方法(通用解決策略(推薦使用):只要父標簽塌陷就使用)
在寫html頁面之前 先提前寫好處理浮動帶來的影響的 css代碼
.clearfix:after {
/*空的內容獨占一行*/
content: '';
display: block;
/*左右兩側都不能有浮動*/
clear: both;
}
之后只要標簽出現了塌陷的問題就給該塌陷的div標簽加一個class=“clearfix”屬性即可
該方法的解決方式是通用的 到哪都是一樣 并且名字就叫clearfix
溢位屬性（overflow）
overflow（水平和垂直均設定）
overflow-x（設定水平方向）
overflow-y（設定垂直方向）
如果輸入的文本資訊超過了盒子的大小，那么就會產生溢位現象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>溢位</title>
<style>
div {
height: 100px;
width: 100px;
border: 2px solid lightcoral;
}
</style>
</head>
<body>
<div>
婚前，梁思成問林徽因：“有一句話，我只問這一次，以后都不會再問，為什么我？”林徽因答：“答案很長，我得用一生去回答你，準備好聽我了嗎？”婚后，梁思成曾詼諧地對朋友說：“中國有句俗話：‘文章是自己的好，老婆是人家的好，’可是對我來說是，老婆是自己的好，文章是老婆的好，”
</div>
</body>
</html>
overflow: hidden;只能顯示出來一部分，超出的范圍會被隱藏起來
overflow: auto;右側會出來滾動條，下拉查看其他的資訊
overflow：scoll;在中間就可以進行滾動
內容溢位的應用場景-頭像設定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*與邊框對其*/
margin: 0;
/*背景顏色*/
background-color: #4e4e4e;
}
#d1 {
/*高度*/
height: 200px;
/*寬度*/
width: 200px;
/*畫一個圈*/
border-radius: 50%;
/*邊框一致*/
border: 5px solid white;
/*調位置*/
margin: 0 auto;
}
</style>
</head>
<body>
<div id="d1">
<img src="https://img2.baidu.com/it/u=1111031032,1956894194&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
</body>
</html>
解決設定頭像照片溢位問題
解決設定頭像照片溢位問題與比列大小問題
/*溢位位置隱藏*/
overflow: hidden;
}
#d1>img {
/*讓img標簽占#d1的百分之百*/
width: 100%;
}
定位
靜態static
所有的標簽，默認都是靜態的，無法改變位置
static 默認值，無定位，不能當作絕對定位的參照物，并且設定標簽物件的left、top等值是不起作用的
1.relative（相對定位）
相對于標簽原來的位置做移動relative
相對定位是相對于該元素在檔案流中的原始位置，即以自己原始位置為參照物，有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據檔案流空間，物件遵循正常檔案流，但將依據top，right，bottom，left等屬性在正常檔案流中偏移位置，而其層疊通過z-index屬性定義，
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物，
<style>
body {
/*與邊框貼合*/
margin: 0;
}
#d1 {
/*高度*/
height: 100px;
/*寬度*/
width: 100px;
/*背景顏色*/
background-color: red;
left: 50px; /*從左往右 如果是負數 方向則相反*/
top: 50px; /*從上往下 如果是負數 方向則相反*/
/*position: static; !*默認是static 靜態 無法修改位置*!*/
/*相對定位 表由static變為relative它的性質就從原來沒有定位的標簽變成了已經定位過的標簽*/
position: relative;
/*雖然你哪怕沒有動 但是性質已經變了*/
}
2.absolute（絕對定位）
相對于已經定位過的父標簽做移動(如果沒有父標簽那么就以body為參照物)
設定為絕對定位的元素框從檔案流完全洗掉，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素），元素原先在正常檔案流中所占的空間會關閉，就好像該元素原來不存在一樣，元素定位后生成一個塊級框，而不論原來它在正常流中生成何種型別的框，
如果父級設定了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位，這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設定position:absolute;父元素設定position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
body {
/*與邊框貼合*/
margin: 0;
}
#d2 {
height: 100px;
width: 200px;
background-color: khaki;
/*已經定位過的標簽*/
position: relative;
}
#d3 {
height: 200px;
width: 400px;
background-color: lightcyan;
/*絕對定位*/
position: absolute;
/*從左往右移動*/
left: 200px;
/*從上往下*/
top: 100px;
}
</style>
</head>
<body>
<div id="d2">
<div id="d3"></div>
</div>
</body>
</html>
如果物件脫離正常檔案流，使用top，right，bottom，left等屬性進行絕對定位，而其層疊通過z-index屬性定義，
3.fixed（固定）
相對于瀏覽器視窗固定在某個位置
fixed：物件脫離正常檔案流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動，而其層疊通過z-index屬性 定義， 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float，這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”，但是 relative 卻可以，因為它原本所占的空間仍然占據檔案流，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*與邊框貼合*/
margin: 0;
}
#d4 {
/*固定 寫了fixed之后 定位就是依據瀏覽器視窗*/
position: fixed;
/*距離瀏覽器底部 距離*/
bottom: 80px;
/*距離瀏覽器右側 距離*/
right: 20px;
/*高度*/
height: 25px;
/*寬度*/
width: 100px;
/*背景顏色*/
background-color: white;
/*上下左右邊框*/
border: 1px solid black;
}
</style>
</head>
<body>
<div style="height: 300px;background-color: #a8e7dc"></div>
<div style="height: 300px;background-color: #74dae7"></div>
<div style="height: 300px;background-color: #efc6e5"></div>
<div id="d4">固定位置不變</div>
</body>
</html>
被設定為fixed的元素會被定位于瀏覽器視窗的一個指定坐標，不論視窗是否滾動，它都會固定在這個位置，
優先展示文本內容
瀏覽器是優先展示文本內容的，如果它發現文本內容被擋住了，會想方設法的找到個位置展示出現
脫離檔案流(就是原來的位置是否保留)
1.什么是脫離檔案流？
就是原來的位置沒有了，可以被頂替了
2.主要作用于的物件
浮動、相對定位、絕對定位、固定定位
3.不脫離檔案流
相對定位
<body> /*相對移動 向右移動500*/
<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
</body>
4.脫離檔案流
浮動、絕對定位、固定定位
<body>
<div style="height: 100px;width: 200px;background-color: #b7d97d;position: fixed;left: 400px;"></div>
<div style="height: 100px;width: 200px;background-color: #fabab9"></div>
</body>
z-index之模態框案例
瀏覽器界面其實是一個三維坐標系 z軸指向用戶
1.最底部是正常內容(z=0) 最遠層
2.黑色的透明區(z=99) 中間層
3.白色的注冊區域(z=100) 離用戶最近
層疊順序
z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素，
模擬z-index模態框
倆次對比就很明顯了，，誰在上誰在下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模態框</title>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgb(255, 140, 140);
z-index: 99;
}
.modal {
background-color: lightcyan;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>這是最底層的頁面內容</div>
<div ></div>
<div >
<p>用戶名：<input type="text"></p>
<p>密 碼：<input type="text"></p>
</div>
</body>
</html>
靜態頁面小練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyBlogs</title>
<link rel="stylesheet" href="https://www.cnblogs.com/zxr1002/archive/2022/08/24/myblogs.css">
</head>
<body>
<div id="blog-left">
<div >
<img src="https://img2.baidu.com/it/u=1111031032,1956894194&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
<div >
<span>cerry的博客</span>
</div>
<div >
<span>萬物生長 向我奔來</span>
</div>
<div >
<ul>
<li><a href="">關于我</a></li>
<li><a href="">微博號</a></li>
<li><a href="">公眾號</a></li>
</ul>
</div>
<div >
<ul>
<li><a href="">python</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Java</a></li>
</ul>
</div>
</div>
<div id="blog-right">
<div >
<div >
<span >成長日志</span>
<span >2022-08-24</span>
</div>
<div >
<span>總要嘗遍所有的路在對生活充滿期待，</span>
<hr color="#cb9a9">
</div>
<div >
<span>#修生養性 #健康成長</span>
</div>
</div>
<div >
<div >
<span >成長日志</span>
<span >2022-08-25</span>
</div>
<div >
<span>不管你去往何方不管將來迎接你的是什么請你帶著陽光般的心情啟程，</span>
<hr color="#cb9a9">
</div>
<div >
<span>#修生養性 #健康成長</span>
</div>
</div>
<div >
<div >
<span >成長日志</span>
<span >2022-08-24</span>
</div>
<div >
<span>今日事須今日畢切勿拖延到明天，</span>
<hr color="#cb9a9">
</div>
<div >
<span>#修生養性 #健康成長</span>
</div>
</div>
<div >
<div >
<span >成長日志</span>
<span >2022-08-24</span>
</div>
<div >
<span>當你下定決定做一件事那就去盡力做給自我一個期限不用告訴所有人也不要猶豫直到你真的盡力為止，</span>
<hr color="#cb9a9">
</div>
<div >
<span>#修生養性 #健康成長</span>
</div>
</div>
<div >
<div >
<span >成長日志</span>
<span >2022-08-24</span>
</div>
<div >
<span>看淡一點再努力一點越努力越幸運這世上沒有誰活得比誰容易只是有人在呼天喊地有人在靜默堅守，</span>
<hr color="#cb9a9">
</div>
<div >
<span>#修生養性 #健康成長</span>
</div>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502665.html
標籤：其他
下一篇：javaWeb-HTML