當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之盒子模型

發布時間：2023/12/10 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之盒子模型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS之盒子模型

margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用于控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

1.margin外邊距

.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px; } /*推薦使用簡寫*/ .margin-test {margin: 5px 10px 15px 20px; } /*順序：上右下左*/ /*常見的居中*/ .mycenter {margin: 0 auto; }

2.padding內填充

.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px; } /*推薦使用簡寫*/ .padding-test {padding: 5px 10px 15px 20px; }

順序：上右下左

補充padding的常用簡寫方式：

提供一個，用于四邊；
提供兩個，第一個用于上－下，第二個用于左－右；
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下；
提供四個參數值，將按上－右－下－左的順序作用于四邊；

3.float浮動

在 CSS 中，任何元素都可以浮動。

浮動元素會生成一個塊級框，而不論它本身是何種元素。

關于浮動的兩個特點：

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

4.clear

clear屬性規定元素的哪一側不允許其他浮動元素。

值描述

left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起作用，而不會影響其他元素。

清除浮動

清除浮動的副作用（父標簽塌陷問題）

主要有三種方式：

固定高度
偽元素清除法
overflow:hidden

偽元素清除法（使用較多）：

.clearfix:after {content: "";display: block;clear: both; }

5.overflow溢出屬性

值描述

visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

案例：制作個性的圓形頭像

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;}.head-img {width: 150px;height: 150px;margin: 75px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.head-img>img {width: 100%;}</style> </head> <body><div class="head-img"><img src="本地圖片的地址" alt=""></div> </body> </html>

6.定位(position)

static

static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。

relative（相對定位）

相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute（絕對定位）

定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>絕對定位</title><style>.c1 {height: 100px;width: 100px;background-color: red;float: left;}.c2 {height: 50px;width: 50px;background-color: #ff6700;float: right;margin-right: 400px;position: relative;}.c3 {height: 200px;width: 200px;background-color: green;position: absolute;top: 50px;}</style> </head> <body><div class="c1"></div><div class="c2"><div class="c3"></div> </body> </html>

7.fixed固定

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

在理論上，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>返回頂部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html>

脫離文檔流：

　　絕對定位

　　固定定位

不脫離文檔流：

　　相對定位

8.z-index

#i2 {z-index: 999; }

設置對象的層疊順序。

z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，

只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index

z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。

從父現象：父親慫了，兒子再牛逼也沒用

案例：自定義模型框

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義模態框</title> </head> <style>* {margin: 0;padding: 0;}.cover {background-color: rgba(0,0,0,0.65);position: fixed;top: 0px;right: 0px;bottom: 0px;left: 0px;z-index: 999;}.refg {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;} </style> <body><div class="cover"></div><div class="refg"></div> </body> </html>

9.opacity

用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

案例：實現仿造博客頁面

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>cnblog</title><link rel="stylesheet" href="bases.css"> </head> <body><div class="cnlog-left"><div class="user-tx"><img src="../images/3.png" alt=""></div><div class="cnblog-title"><p>小米論壇</p></div><div class="cnblog-mess"><p>更多小米的產品盡情關注</p></div><div class="link"><ul><li><a href="#">關于小米</a></li><li><a href="#">聯系我們</a></li><li><a href="#">更多資訊</a></li></ul></div><div class="cnblog-bottom"><ul><li><a href="#">小米5</a></li><li><a href="#">小米6</a></li><li><a href="#">小米plus</a></li></ul></div></div><div class="cnblog-right"><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米7</span><span class="date">2018-3-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米7的強大功能吧!功能強大的到爆炸~~~</p></div><div class="artice-bottom"><span>柔光雙攝</span><span>快充電源</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div><div class="cnblog-content"><div class="cnblog-actice"><span class="title">小米6</span><span class="date">2018-5-12</span></div><div class="actice-ys"><p>讓我們一起來見證小米6的強大功能吧!</p></div><div class="artice-bottom"><span>強大的照相機</span><span>便捷的充電</span></div></div></div> </body> </html> /*CSS頁面*/ /*通用樣式*/ * {margin: 0;padding: 0; } body {background-color: #f0f0f0; } a {text-decoration: none; } ul {list-style-type: none; } .clearfix:after {content: '';clear: both;display: block; } /*左邊的導航欄*/ .cnlog-left {float: left;position: fixed;left: 0;width: 20%;height: 100%;background-color: #4d4c4c; } .user-tx {width: 150px;height: 150px;border: 2px solid white;border-radius: 50%;margin: 20px auto;overflow: hidden; } .user-tx img {width: 100%; } .cnblog-title, .cnblog-mess {color: darkgray;text-align: center; } .link a, .cnblog-bottom a {color: darkgray; } .link a:hover, .cnblog-bottom a:hover {color: tomato; } .link ul, .cnblog-bottom ul {text-align: center;margin-top: 60px; } /*右邊的導航欄*/ .cnblog-right {float: right;width: 80%; } .cnblog-content {background-color: white;margin: 20px 40px 20px 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.45); } .cnblog-actice {border-left: 3px solid red; } .title {font-size: 18px;font-weight: 500; } .date {float: right;font-size: 12px;margin-top: 10px;margin-right: 12px; } .actice-ys {border-bottom: 1px solid black; } .actice-ys p {font-size: 18px;text-ident: 24px; } .artice-bottom span {margin-left: 20px;font-size: 12px; }

頁面效果:

案例二:實現導航欄效果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>導航欄示例</title><link rel="stylesheet" href="mycss.css"> </head> <body><div class="nav"><ul class="clearfix"><li><a href="#">小米商城</a></li><li><a href="#">MIUI</a></li><li><a href="#">iop</a></li><li><a href="#">云服務</a></li><li><a href="#">水滴公益</a></li><li><a href="#">金融</a></li><li><a href="#">優品</a></li></ul></div> </body> </html> /*CSS代碼*/ /*通用樣式*/ * {margin: 0;padding: 0; } a {text-decoration: none; } ul {list-style-type: none; } /*導航欄樣式*/ .nav {background-color: black;width: 100%;height: 40px;position: fixed;top: 0; } li {float: left; } li>a {display: block;padding: 0 15px;color: #b0b0b0;line-height: 40px; } li>a:hover {color: tomato; } .clearfix:after {content: '';clear: both;display: block; }