盒子模型（详细）

怼烎@ 2024-04-03 09:44 34阅读 0赞

![34f6be79d97749b3aedd7639ab0005dd.png][]新建2个文档一个存放css,一个存放需要的img图片

创建一个html文档，超文本标记语言书写

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<link rel="stylesheet" type="text/css" href="css/index\_div.css">  
<title>盒子模型</title>  
</head>  
<body>  
<div class="box">  
<div class="box\_main">  
<h1>  
心之旅途  
</h1>  
<img src="img/图层 1.png" alt="" class="b1\_img">  
<img src="img/矩形 1.png" alt="" class="b1\_img">  
<img src="img/pic (3).png" alt="" class="b2\_img">  
<p>人生就是一次充满未知的旅行，在乎的是沿途的风景，在乎的是看风景的心情，旅行不会因为美丽的风景终止。走过的路成为背后的风景，不能回头不能停留，若此刻停留，将会错过更好的风景。</p>  
<span>  
独行旅者 · 2020-12-12  
</span>  
</div>  
</div>  
</body>  
</html>

在css文档中创建一个css文件

\*\{  
margin: 0;  
padding: 0;  
\}  
.box\{  
width: 1000px;  
height: 800px;  
\}  
.box\_main\{  
width: 580px;  
margin: 0 auto;  
\}  
.box\_main h1\{  
font-size: 30px;  
margin-top: 120px;  
\}  
.b1\_img\{  
display: block;  
float: left;  
\}  
.b2\_img\{  
display: block;  
margin-top: 35px;  
margin-left: -12px;  
\}  
.box\_main p\{  
font-size: 18px;  
margin-top: 20px;  
line-height: 36px;  
\}  
.box\_main span\{  
font-size: 18px;  
line-height: 36px;  
float: right;  
\}

[34f6be79d97749b3aedd7639ab0005dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/efb9f429999b474a925e387d2be9fe6c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关盒子模型（详细）

![34f6be79d97749b3aedd7639ab0005dd.png][]新建2个文档一个存放css,一个存放需要的img图片创建一个html文档，超文本标记语言书

怼烎@/ 2024年04月03日 09:44/ 0 赞/ 35 阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 103 阅读

相关盒子模型

盒模型原理：对所有的盒子，在浏览器中所占据的空间进行计算盒子：只要在浏览器中占据位置的元素，都是我们计算的盒子 \->inline inline-block bloc

傷城~/ 2023年06月12日 09:20/ 0 赞/ 21 阅读

相关 CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（padding）、内填充（padding）、

分手后的思念是犯贱/ 2023年06月01日 11:13/ 0 赞/ 188 阅读

相关盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型具有属性： 1. content内容 2. padding内边距 3. border

╰半夏微凉°/ 2023年05月31日 06:58/ 0 赞/ 28 阅读

相关盒子模型

![盒子模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

今天药忘吃喽~/ 2023年02月16日 06:45/ 0 赞/ 132 阅读

相关盒子模型

W3C标准的盒子模型是：width(height) 都不包含padding和border的。但是ie浏览器的盒子模型 width和height是包含padding bor

╰+攻爆jí腚メ/ 2022年07月15日 00:47/ 0 赞/ 255 阅读

相关盒子模型

盒子模型的概念页面中所有元素都可以看成是一个“矩形”，占据着一定的页面空间，这些被占用的空间都比单纯的内容要大这个矩形框就是盒子. 盒子模型的组成: ![

不念不忘少年蓝@/ 2021年11月11日 00:01/ 0 赞/ 400 阅读

相关 JQuery盒子模型

JQuery盒子模型 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

曾经终败给现在/ 2021年07月25日 21:38/ 0 赞/ 424 阅读

相关盒子模型

盒子模型 ![70][] 今年过年不收礼，收礼就收五仁月饼！！！下面咱们就来讲一讲盒子模型。最近快过端午节了，收到了两盒月

- 日理万妓/ 2021年06月11日 15:11/ 0 赞/ 609 阅读