Day_4 #5

New Issue

2026-09-11T18:27:43+08:00

pjc commented

2026-09-11 18:27:43 +08:00

No description provided.

chenlan114514 commented

2026-09-15 21:12:45 +08:00

能说清楚 padding / border / margin 各自作用
能算出盒子总宽度 250
圆角效果正常

box.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8"/>
        <title>盒模型练习</title>
        <style>
            .box1{
                width: 200px;
                padding: 20x;
                border:5px solid black;
                margin:30px;
            }

            .box2{
                width: 200px;
                padding: 20x;
                border:5px solid black;
                margin:30px;
                border-radius:10px;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
    <div class="box1">我是 box1</div>
    <div class="box2">我是 box2</div>
  </body>
</html>

- [x] 能说清楚 padding / border / margin 各自作用 - [x] 能算出盒子总宽度 250 - [x] 圆角效果正常 **box.html** ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"/> <title>盒模型练习</title> <style> .box1{ width: 200px; padding: 20x; border:5px solid black; margin:30px; } .box2{ width: 200px; padding: 20x; border:5px solid black; margin:30px; border-radius:10px; background-color: lightblue; } </style> </head> <body> <div class="box1">我是 box1</div> <div class="box2">我是 box2</div> </body> </html> ```

box.jpg

47 KiB

123qwe123410 commented

2026-09-15 21:58:10 +08:00

能说清楚 padding / border / margin 各自作用
能算出盒子总宽度 250
圆角效果正常

<html lang="zh"> <head> <style> .box1 { border: 5px solid rebeccapurple; background-color: rgb(202, 13, 195); padding: 20px; margin: 30px; width: 200px; height: 150px; }

.box2 {
border: 5px solid rebeccapurple;
background-color: rgb(8, 250, 145);
padding: 20px;
margin: 30px;
width: 200px;
height: 150px;
border-radius: 10px;
}

</style>

</head>

盒了你

再盒你（圆角）

</html>

能说清楚 padding / border / margin 各自作用能算出盒子总宽度 250 圆角效果正常 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>看我盒了你</title> <style> .box1 { border: 5px solid rebeccapurple; background-color: rgb(202, 13, 195); padding: 20px; margin: 30px; width: 200px; height: 150px; } .box2 { border: 5px solid rebeccapurple; background-color: rgb(8, 250, 145); padding: 20px; margin: 30px; width: 200px; height: 150px; border-radius: 10px; } </style> </head> <body> <div class="box1">盒了你</div> <div class="box2">再盒你（圆角）</div> </body> </html>

屏幕截图 2026-09-15 215841.png

25 KiB

656123 commented

2026-09-17 20:11:49 +08:00

<html lang="CN"> <head> <style> .box1{width: 200px;padding: 20px;border: 5px solid black;margin: 30px;} .box2{border-radius: 10px;background-color: #c7e9ff;} </style> </head>

我是box1盒子

我是box2盒子

</html>

<!DOCTYPE html> <html lang="CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型练习</title> <style> .box1{width: 200px;padding: 20px;border: 5px solid black;margin: 30px;} .box2{border-radius: 10px;background-color: #c7e9ff;} </style> </head> <body> <div class="box1">我是box1盒子</div> <div class="box2">我是box2盒子</div> </body> </html><img width="1170" alt="屏幕截图 2026-09-17 201051.png" src="attachments/b6fa8c4d-3c69-4aac-ac9b-d41e03abf760">

屏幕截图 2026-09-17 201051.png

481 KiB

Augbb-Ugb commented

2026-09-18 19:23:20 +08:00

完成;200+2*(20+5)=250

<!DOCTYPE html>
<html lang="zh">
    <head>
        <style>
            .box1
            {
                background-color: aqua;
                width: 200px;
                padding: 20px;
                border: 5px black solid;
                margin: 30px;
                text-align: center;
            }
            .box2
            {
                background-color: pink;
                border-radius: 10px;
                text-align: center;
                position:fixed;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            Abandon all hope, ye who enter here
        </div>
        <div class="box2">
            汝等こゝに入るもの一切の望みを棄てよ
        </div>
    </body>
</html>

完成;200+2*(20+5)=250 ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .box1 { background-color: aqua; width: 200px; padding: 20px; border: 5px black solid; margin: 30px; text-align: center; } .box2 { background-color: pink; border-radius: 10px; text-align: center; position:fixed; } </style> </head> <body> <div class="box1"> Abandon all hope, ye who enter here </div> <div class="box2"> 汝等こゝに入るもの一切の望みを棄てよ </div> </body> </html> ```

WangSongRu1 commented

2026-09-20 00:50:04 +08:00

![image.png](/attachments/c730b895-1504-439d-a4a5-a48fe400ebd2) ![image.png](/attachments/2bbfd899-61b9-42ae-8b0c-633b5b9d3ec8)

image.png

134 KiB

image.png

83 KiB

longyueshengge commented

2026-09-21 01:21:13 +08:00

能说清楚 padding / border / margin 各自作用
能算出盒子总宽度 250
圆角效果正常
不知道为什么浏览器显示边框4.667

能说清楚 padding / border / margin 各自作用能算出盒子总宽度 250 圆角效果正常不知道为什么浏览器显示边框4.667

屏幕截图 2026-09-21 011305.png

90 KiB

屏幕截图 2026-09-21 011925.png

12 KiB

屏幕截图 2026-09-21 011300.png

126 KiB

屏幕截图 2026-09-21 012115.png

34 KiB

xzh4git commented

2026-10-02 13:29:24 +08:00

算出来是250
但是网页显示是249.7
<!doctype html>

<html lang="zh"> <head> <style> .box1 { width: 200px; padding: 20px; border: 5px solid purple; margin: 30px; background-color: goldenrod; } .box2 { width: 200px; padding: 20px; border: 5px dashed black; margin: 30px; background-color: lightcoral; border-radius: 10px; } </style> </head>

盒子 1

盒子 2

</html>

算出来是250 但是网页显示是249.7 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>盒子模型试验</title> <style> .box1 { width: 200px; padding: 20px; border: 5px solid purple; margin: 30px; background-color: goldenrod; } .box2 { width: 200px; padding: 20px; border: 5px dashed black; margin: 30px; background-color: lightcoral; border-radius: 10px; } </style> </head> <body> <div class="box1">盒子 1</div> <div class="box2">盒子 2</div> </body> </html>

Andy commented

2026-10-07 18:20:42 +08:00

已全部完成

屏幕截图 2026-10-07 182008.png

251 KiB