CSS标准盒子模型详解

水深无声 2023-10-02 17:44 33阅读 0赞

### **所有的 HTML 元素都是以矩形为基础** ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16][]

Content :内容

width：content box的宽度  
height：content box的高度

**padding：内边距**

padding用来控制元素内容与border之间的空隙大小。

有三种方式可以设置：

padding: 10px;

CSS允许使用padding-top、padding-right、padding-bottom、padding-left属性来设置四个不同方向的padding值。

padding-top: 40px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    padding-left: 40px;

如果不想每次都要分别声明padding-top、padding-right、padding-bottom、padding-left属性，可以把它们汇总在一行里面一并声明(从padding-top开始按顺时针顺序）

padding: 10px 20px 10px 20px;

border：容器边框（border-width,border-style,border-color）

有两种方法添加边框

1.      border: 2px solid red;
2.      .red-border {
            border-color: red;
            border-width: 2px;
            border-style: solid;
          }

margin：外边距

和padding一样，margin也有三种设置方式

margin: 20px;

margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;

margin: 40px 20px 20px 40px;

当margin：auto时，呈现的效果为水平居中

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/054e69b2379243bcb81c8f2c7979cf36.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAR2F2aeabpg==,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS标准盒子模型详解

所有的 HTML 元素都是以矩形为基础 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg

水深无声/ 2023年10月02日 17:44/ 0 赞/ 34 阅读

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

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

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

相关 CSS详解（6.盒子模型）

文章目录一，盒子模型的内容二，属性说明三，盒子模型的分类四，正常盒子模型五，怪异盒子模型六，旧伸缩盒ccs3 七，新

今天药忘吃喽~/ 2023年06月30日 10:55/ 0 赞/ 33 阅读

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

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

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

相关 css盒子模型

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

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

相关 CSS——（2）盒子模型与标准流

上篇博客[《CSS——（1）基础》][CSS_1]中简单介绍了CSS的概念和几种使用方法，现在主要是介绍其的核心内容。盒子模型为了理解盒子模型，我们可以先从生活中的盒子

绝地灬酷狼/ 2022年08月10日 14:44/ 0 赞/ 206 阅读

相关【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 阅读

相关标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

转载自：[http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html][http_www.cnblogs.com

- 日理万妓/ 2021年12月22日 09:13/ 0 赞/ 368 阅读