盒子模型（详细）

怼烎@ 2024-04-03 09:44 95阅读 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 条评论，95人围观）

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

相关阅读

相关盒子模型（详细）

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

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

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

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

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

相关盒子模型

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

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

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

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

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

相关盒子模型

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

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

相关盒子模型

![盒子模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关盒子模型

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

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

相关盒子模型

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

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

相关 css 怪异盒子模型(ie盒子)

标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距怪异盒子设置方式:box-sizin

àì夳堔傛蜴生んèń/ 2021年07月24日 14:07/ 0 赞/ 672 阅读

相关盒子模型

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

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