HTML-盒子模型的應用

寫HTML代碼時要經常用到Chrome瀏覽器的F12功能，比如我們看淘寶：

通過元素定位器定位到一個li標簽，然后看開發者選項卡的右側：

這里就是這個li標簽里的所有屬性了，我們在做開發時可以直接修改這里的屬性值，然后直接在頁面中查看效果，比如我現在在這里加一個

margin-bottom: 20px：

回車后即可在頁面查看效果：

也可以在盒子上直接調整大小來進行盒子樣式的調試：

至此，我們應該記住：width和height只能設置盒子中內容的寬度和高度，盒子的實際高度和寬度應該加上border和padding。

div + css的應用

position：定位屬性

作用：讓標簽顯示在我們想要顯示的位置

默認值：static 靜態，不能動

relative：相對的，可以移動

lesson4.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Css盒子模型</title>
 <meta name="keywords" content="key1, key2">
 <meta name="description" content="">
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
 <div class="mydiv">我的css盒子測試模型1</div>
</body>
</html>

index.css

*{
 margin: 0px;
 padding: 0px;
}
html,body{
 width: 100%;
 height: 100%;
}
div.mydiv{
 width: 100px;
 height: 100px;
 background-color: #000;
 color:#fff;
 padding: 10px 20px;
 border-top: 10px solid #f00;
 border-left: 10px solid #0f0;
 border-right: 10px solid #00f;
 border-bottom: 10px solid #bbb;
 display: inline-block;
 margin: 10px;
 position: relative;
 top: 100px;
 left: 100px;
}

注意，上面css代碼中，我們增加了position：relative屬性，接著我們增加了top和left屬性，這時候頁面顯示為：

盒子的上面和左面都增加了100像素的距離，而如果我們不添加positon: relative屬性直接增加top和left這時候這兩個屬性是不起作用的。

這里的相對是指相對于盒子的左上角頂點。

應用relative時只能應用left和top屬性，也就是相對于左側和上方的距離。

fixed：固定在瀏覽器的某個位置

讓盒子固定在某個地方。比如微信公眾號右側有一個`在線問答`不管頁面怎么動，它都是在瀏覽器右側中部邊緣：

比如現在我們讓我們的盒子頂在右側邊緣且沒有間隙，那我們就可以這樣修改代碼：

index.css

*{
 margin: 0px;
 padding: 0px;
}
html,body{
 width: 100%;
 height: 100%;
}
div.mydiv{
 width: 100px;
 height: 100px;
 background-color: #000;
 color:#fff;
 padding: 10px 20px;
 border-top: 10px solid #f00;
 border-left: 10px solid #0f0;
 border-right: 10px solid #00f;
 border-bottom: 10px solid #bbb;
 display: inline-block;
 margin: 10px;
 position: fixed;
 right: -10px;
 top: -10px;
}

這樣盒子模型就會固定在右上角：

相對于relative，應用fixed屬性可以應用：top/left/right/bottom屬性。

握CSS盒子模型：一站式指南-CSDN博客

盒子模型

01-選擇器

結構偽類選擇器

基本使用

作用：根據元素的結構關系查找元素。

選擇器	說明
E:first-child	匹配父元素的第一個子元素E
E:last-child	匹配父元素的最后一個子元素E
E:nth-child(n)	匹配父元素的第n個子元素E
E:nth-last-child(n)	匹配父元素的倒數第n個子元素E
E:first-of-type	匹配父元素下同類型元素中的第一個E
E:last-of-type	匹配父元素下同類型元素中的最后一個E
E:nth-of-type(n)	匹配父元素下同類型元素中的第n個E
E:nth-last-of-type(n)	匹配父元素下同類型元素中的倒數第n個E

:nth-child(公式)

以下是針對:nth-child()偽類中公式的說明表格：

功能	公式
匹配第n個子元素	:nth-child(n)
匹配偶數位置的子元素	:nth-child(2n)
匹配奇數位置的子元素	:nth-child(2n+1)
匹配前n個子元素	:nth-child(-n+3)
匹配后n個子元素	:nth-last-child(n)
匹配倒數第n個子元素	:nth-last-child(-n)
匹配從第n個開始的子元素	:nth-child(n+x)
匹配從第n個結束的子元素	:nth-last-child(n+x)

這些公式可以用于選擇符合特定條件的子元素，并為它們應用樣式。

偽元素選擇器

作用：創建虛擬元素（偽元素），用來擺放裝飾性的內容。

div::before {
  content: "before 偽元素";
}
div::after {
  content: "after 偽元素";
}

注意點：

必須設置 content: ””屬性，用來設置偽元素的內容，如果沒有內容，則引號留空即可
偽元素默認是行內顯示模式
權重和標簽選擇器相同

擴展：PxCook（像素大廚）是一款切圖設計工具軟件。

02-盒子模型

作用：布局網頁，擺放盒子和內容。

盒子模型-組成

內容區域 – width & height
內邊距 – padding（出現在內容與盒子邊緣之間）
邊框線 – border
外邊距 – margin（出現在盒子外面）

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

邊框線

四個方向

屬性名：border（bd）

屬性值：邊框線粗細線條樣式顏色（不區分順序）

以下是關于表框線屬性的表格：

屬性值	線條樣式
none	無
hidden	隱藏
dotted	點線
dashed	虛線
solid	實線
double	雙實線
groove	凹槽效果
ridge	凸起效果
inset	內陰影效果
outset	外陰影效果

這些屬性值可用于控制表框線的樣式，從而實現不同的外觀效果。

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

嘗試一下>>>菜鳥教程在線編輯器

單方向邊框線

屬性名：border-方位名詞（bd+方位名詞首字母，例如，bdl）

屬性值：邊框線粗細線條樣式顏色（不區分順序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

內邊距

作用：設置內容與盒子邊緣之間的距離。

屬性名：padding / padding-方位名詞

div {
  /* 四個方向 內邊距相同 */
  padding: 30px;
  /* 單獨設置一個方向內邊距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示：添加 padding 會撐大盒子。

padding 多值寫法

取值個數	示例	含義
1	padding: 10px;	設置四個方向的內邊距為10像素
2	padding: 10px 20px;	設置上下內邊距為10像素，左右內邊距為20像素
3	padding: 10px 20px 15px;	設置上內邊距為10像素，左右內邊距為20像素，下內邊距為15像素
4	padding: 10px 20px 15px 25px;	分別設置上、右、下、左內邊距為10、20、15、25像素

這些多值寫法可以用于同時設置不同方向的內邊距。

技巧：從上開始順時針賦值，當前方向沒有數值則與對面取值相同。

尺寸計算

默認情況：盒子尺寸 = 內容尺寸 + border 尺寸 + 內邊距尺寸

結論：給盒子加 border / padding 會撐大盒子

解決：

手動做減法，減掉 border / padding 的尺寸
內減模式：box-sizing: border-box

外邊距

作用：拉開兩個盒子之間的距離

屬性名：margin

提示：與 padding 屬性值寫法、含義相同

版心居中

左右 margin 值為 auto（盒子要有寬度）

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

清除默認樣式

清除標簽默認的樣式，比如：默認的內外邊距。

/* 清除默認內外邊距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表項目符號 */
li {
  list-style: none;
}

元素溢出

作用：控制溢出元素的內容的顯示方式。

屬性名：overflow

屬性值	效果
visible	默認值，溢出內容可見，不會出現滾動條。
hidden	溢出內容被隱藏，不可見。
scroll	溢出內容被隱藏，但會顯示滾動條。
auto	當內容溢出時顯示滾動條，沒有溢出時不顯示滾動條。

這些屬性值用于控制元素在內容溢出時的行為，如是否顯示滾動條以及如何處理溢出內容。

外邊距問題

合并現象

場景：垂直排列的兄弟元素，上下 margin 會合并

現象：取兩個 margin 中的較大值生效

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

外邊距塌陷

場景：父子級的標簽，子級的添加 上外邊距 會產生塌陷問題

現象：導致父級一起向下移動

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

解決方法：

取消子級margin，父級設置padding
父級設置 overflow: hidden
父級設置 border-top

提示：設置子集 display: inline-block; 也能解決此問題；注意多個子集控件的情況。

嘗試一下>>>菜鳥教程在線編輯器

行內元素-內外邊距問題

場景：行內元素添加 margin 和 padding，無法改變元素垂直位置

解決方法：給行內元素添加 line-height 可以改變垂直位置

span {
  /* margin 和 padding 屬性，無法改變垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改變垂直位置 */
  line-height: 100px;
}

圓角

作用：設置元素的外邊框為圓角。

屬性名：border-radius

屬性值：數字+px / 百分比

提示：屬性值是圓角半徑盒子陰影(拓展)

多值寫法

取值個數	示例	含義
1	border-radius: 10px;	設置四個角的圓角半徑都為10像素
2	border-radius: 10px 20px;	設置水平方向上的圓角半徑為10像素，垂直方向上的圓角半徑為20像素
3	border-radius: 10px 20px 15px;	設置左上角和右下角的圓角半徑為10像素，右上角和左下角的圓角半徑為20像素和15像素
4	border-radius: 10px 20px 15px 25px;	分別設置左上、右上、右下、左下的圓角半徑為10、20、15、25像素

技巧：從左上角開始順時針賦值，當前角沒有數值則與對角取值相同。

正圓形狀：給正方形盒子設置圓角屬性值為 寬高的一半 / 50%

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

膠囊形狀：給長方形盒子設置圓角屬性值為盒子高度的一半

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子陰影

作用：給元素設置陰影效果

屬性名：box-shadow

屬性值：X 軸偏移量 Y 軸偏移量模糊半徑擴散半徑顏色內外陰影

注意：

X 軸偏移量和 Y 軸偏移量必須書寫
默認是外陰影，內陰影需要添加 inset

先，感謝 @神雕開發的海納思（hinas）固件，感謝 @Fatedier 開發的Frp應用，感謝 @伊戈爾·賽索耶夫開發的Nginx應用，感謝 @狗哥幫忙給電視盒子刷好固件。

簡單來說，在家的電視盒子刷成Ubuntu并且安裝好Lnmp環境，通過frp映射到互聯網上，再通過nginx反向代理提供一個80、443訪問的端口，就基本可以了。如您所見，我新搭建的巨齒鯊就是一個這樣的站點。

電視盒子是華為悅盒ec6108v9c ，屬于 hi3798mv100 芯片，恰好，在 @狗哥的幫忙下，有了這么一個盒子。具體刷機流程可以參考海納思官網

由于寶塔面板官方不再支持 armv7-32 位 CPU 的安裝，所以選擇付費10元通過 @神雕預制編譯好的固件，直接運行寶塔，使對硬件的需求降低，可以流暢運行LNMP環境，至此本地站點的雛形基本好了。

在本地完成建設后，需要互聯網訪問，那么需要一臺有獨立IP的VPS，在 Github 上找到Frp項目，直接安裝部署即可。

Frp中有四個文件：

frps
frpc
frps.toml
frpc.toml

其中 .toml 是配置文件。 frps（在Windows下是 frps.exe ）是服務端用的， frpc （在Windows下是 frpc.exe ）是客戶端用的。華為悅盒這個電視盒子是arm32架構，下載好相應固件放好位置后，刪除多余文件，保留 frpc 和 frpc.toml 即可。在 frpc.toml 寫入以下內容即可：

serverAddr = "0.0.0.0"
serverPort = 7000

[[proxies]]
name = "ssh"
type = "tcp"
localIP = "127.0.0.1"
localPort = 22
remotePort = 222

[[proxies]]
name = "web"
type = "http"
localPort = 80
customDomains = ["blog.jcs.moe"]

其中， 0.0.0.0 修改為服務器的IP地址。完成后通過 ./frpc -c ./frpc.toml 運行起來。如果需要更方便，可以通過 systemd 來控制。

如果您的 Linux 服務器上尚未安裝 systemd ，可以使用包管理器如 yum（適用于 CentOS/RHEL）或 apt（適用于 Debian/Ubuntu）來安裝它：

# 使用 yum 安裝 systemd（CentOS/RHEL）
yum install systemd

# 使用 apt 安裝 systemd（Debian/Ubuntu）
apt install systemd

使用文本編輯器 (如 vim) 在 /etc/systemd/system 目錄下創建一個 frps.service 文件，用于配置 frp服務。

vi /etc/systemd/system/frps.service

寫入內容：

[Unit]
# 服務名稱，可自定義
Description = frp server
After = network.target syslog.target
Wants = network.target

[Service]
Type = simple
# 啟動frps的命令，需修改為您的frps的安裝路徑
ExecStart = /path/to/frpc -c /path/to/frpc.toml

[Install]
WantedBy = multi-user.target

保存文件后設置 frps 開機自啟動：

systemctl enable frps

如果以上操作出現問題，比如權限不足啥的，可能需要root權限執行。完成后，就可以通過 systemd 命令管理 frp服務。

# 啟動frp
sudo systemctl start frps
# 停止frp
sudo systemctl stop frps
# 重啟frp
sudo systemctl restart frps
# 查看frp狀態
sudo systemctl status frps

本地客戶端配置好了，現在登錄你的VPS，配置 frp ，在服務端保留 frps 和它的配置文件 frps.toml 即可。并在配置文件下寫入以下內容：

bindPort = 7000
vhostHTTPPort = 8080

至此，通過 systemd 啟動你的 frp 就OK了。

當你訪問 blog.jcs.moe:8080 時，會通過 frp 這個訪問到盒子上，同理，如果你想通過ssh登錄管理，假設你的用戶名是test，那么直接：

ssh -o Port=222 test@x.x.x.x

frp 將請求發送到 x.x.x.x:6000 的流量轉發到內網機器的 22 端口。

由于VPS的80端口我默認給了nginx，那么我們可以通過nginx的反向代理來隱藏掉8080這個端口。新建一個nginx的配置文件，寫入如下內容：

server {
    listen 80;
    listen [::]:80;
    server_name blog.jcs.moe;
    charset utf-8;
    location / {
        proxy_pass http://blog.jcs.moe:8080;
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 避免超時
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        proxy_read_timeout 300s;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        proxy_pass http://blog.jcs.moe:8080;
        expires      30d;
    }
    location ~ .*\.(js|css)?$ {
        proxy_pass http://blog.jcs.moe:8080;
        expires      12h;
    }
}

至此，搭建完成。

也許未來有一天，夢幻辰風也會完全搬家到這個電視盒子上。主要是，功耗真的很低，據作者@神雕實測功耗約為3瓦，3x24x365÷1000x0.7≈18元/年，一杯奶茶錢，養活它一年。

雖然，有公網IP的服務器挺貴的，那為啥不直接把網站放在有公網IP的服務器上？

草率了。

在線咨詢

上一篇：PyScript：讓 Python 腳本在 Web 中跑起來
下一篇：如何在網頁設計中用好圓形要素

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商