CSS3盒子模型（CSS3）

落日映苍穹つ 2023-10-03 13:46 12阅读 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 条评论，12人围观）

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

相关阅读

相关 CSS3盒子模型（CSS3）

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

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

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

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

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

相关 CSS3 弹性盒子

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

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

相关 CSS3-盒子阴影

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

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

相关 css盒子模型

浏览器中的元素都是一个个的盒子，每一个盒子都有特定的结构。块级元素和行级元素块级元素（block element）块级元素会独占一行，默认其宽度自动填满其

绝地灬酷狼/ 2022年09月21日 11:56/ 0 赞/ 25 阅读

相关 css盒子模型

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

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

相关【CSS】——盒子模型

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

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

相关 css盒子模型

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

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

相关 css_盒子模型

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

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

相关 css 盒子模型

span标签(行内标签)：为了设置单独的样式 div标签(块级标签): 用来布局,会将其中的子元素内容作为一个独立的整体而存在

客官°小女子只卖身不卖艺/ 2021年07月24日 14:14/ 0 赞/ 556 阅读