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小时内与您取得联系。

整合营销服务商