CSS3盒子模型（CSS3）

落日映苍穹つ 2023-10-03 13:46 42阅读 0赞

## CSS3盒子模型（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS3盒子模型</title>
        <style>
            * {
        
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            div {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                border: 20px solid red;
                padding: 15px;
                box-sizing: content-box;
            }
    
            p {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                border: 20px solid red;
                padding: 15px;
                /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
                box-sizing: border-box;
            }
        </style>
    </head>
    
    <body>
        <div>
            小猪乔治
        </div>
        <p>
            小猪佩奇
        </p>
    </body>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS3盒子模型（CSS3）

CSS3盒子模型（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2023年10月03日 13:46/ 0 赞/ 43 阅读

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

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

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

相关 CSS3 弹性盒子

目录弹性盒子的flex属性自元素的flex属性元素的土地扩张和收缩 W3C标准盒子与IE怪异盒子弹性盒子

朱雀/ 2023年06月26日 05:57/ 0 赞/ 59 阅读

相关 CSS3-盒子阴影

CSS3 新增了 `box-shadow` 样式属性用来给元素设置一个或多个下拉阴影的框；该属性可以设置多个属性值语法： box-shadow: h-shadow

分手后的思念是犯贱/ 2023年06月02日 09:15/ 0 赞/ 186 阅读

相关 CSS3入门与提高(二）——盒子模型

盒子模型盒子模型（CSS重点）盒子边框（border）盒子边框写法总结表内边距（padding）

桃扇骨/ 2023年03月03日 08:55/ 0 赞/ 123 阅读

相关 css盒子模型

1.盒子模型所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

叁歲伎倆/ 2022年09月21日 04:57/ 0 赞/ 62 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 323 阅读

相关 css盒子模型

一般称IE8及其以上为w3c盒子模型，W3C 盒子模型的范围包括 `margin、border、padding、content`，并且 `content` 部分不包含其他部分。

不念不忘少年蓝@/ 2022年07月15日 08:48/ 0 赞/ 278 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 327 阅读

相关 CSS基础（三）：w3c盒子模型和ie盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西

深藏阁楼爱情的钟/ 2022年05月24日 12:50/ 0 赞/ 259 阅读