盒子模型和css属性

小灰灰 2022-06-16 23:27 223阅读 0赞

1.对于css来说，最常见到的关键词就是盒子模型了。那么到底什么是盒子模型呢？ 其实盒子模型只是一种很形象的叫法。我们可以把盒子模型和生活中的某些真正的盒子关联起来。例如：蛋糕盒。

2.对于盒子模型来说，通常是由：内容模块、内边距、边框、外边距四部分组成，对应现实生活中的蛋糕盒，我们可以发现：蛋糕盒里面的蛋糕就相当于内容模块，蛋糕和包装盒之间的距离我们可以认为是内边距，包装盒那层薄薄的纸可以认为是边框，蛋糕盒和其他蛋糕盒的距离可以认为是外边距。

![Image 1][]

css盒子模型

3.所以对于盒子模型来说，它的组成就有：内容

border

padding

margin

4.首先介绍盒子模型中的border：

盒子模型的border（边框）是由：

border-style:(边框的样式) solid(实线)、dotted(点线)、dashed(虚线)

border-width:(边框的粗细) 1px...

border-color:(边框的颜色) red/\#rgb/rgba()

注意border的属性是复合属性，我们在使用的时候可以这样：

border: 1px solid red;

border:none;

5.盒子模型中的内边距padding:

盒子模型的padding是由：

padding-top:  
padding-bottom:  
padding-left:  
padding-right:

注意：padding也是复合属性，使用的时候可以这样：

padding:0 0 0 0(后面四个数值分别代表：上 右 下 左)。并且在使用padding

的时候会影响盒子本身的宽和高。

6.盒子模型中的外边距margin:

盒子模型的margin是由：

margin-top:

margin-bottom:

margin-left:

margin-right:

注意：margin也是复合属性，使用的方法和padding的方式是一样的。

margin:0 0 0 0(顺序仍然是：上 、右 、下 、左)。但是在使用margin的时候我们需要注意一些问题：

如果我们对父元素的第一个子元素设置margin-top，那么父元素也会受到影响即也会使外上边距移动相同的距离。

如果想要消除这种影响，最常见的方法是：

1.对父元素设置padding

2.对父元素设置overflow:hidden

6. 行内元素没有上下外边距属性

块级元素的上下外边距取最大值

行内块级元素上下边距是累加的

7.一个盒子的实际大小：

width+padding+border

一个盒子的占用空间：

width+padding+border+margin

8.在css中我们常常遇到设置水平居中的情况：

1.对于定宽块级元素，设置他们的居中可以这样：margin:0 auto来实现。

注意这样的情况要有两个前提条件：

1.定宽  2.块级元素

2.如果要对元素内部的文本或者图片设置居中，可以通过text-align:center来实现。

9.同样的我们也会遇到设置竖直方向居中的情况：

1.对于父元素的高度确定的情况，可以设置：line-height:height;来实现

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 CSS样式属性、盒子模型、扩展属性的使用

CSS样式属性、盒子模型、CSS3扩展属性 1. CSS 样式属性 1.1 字体 font-xxx 1

古城微笑少年丶/ 2023年07月24日 02:52/ 0 赞/ 31 阅读

相关 css盒子模型

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

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

相关 css盒子模型

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

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

相关【CSS】——盒子模型

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

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

相关 css盒子模型

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

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

相关盒子模型和css属性

1.对于css来说，最常见到的关键词就是盒子模型了。那么到底什么是盒子模型呢？其实盒子模型只是一种很形象的叫法。我们可以把盒子模型和生活中的某些真正的盒子关联起来。例如：蛋糕

小灰灰/ 2022年06月16日 23:27/ 0 赞/ 224 阅读

相关 css的字体设置，css的盒子模型，css的盒子模型的边框，盒子模型的内边距属性，盒子模型的外边距属性，

10 字体 Fond-size：100px；设置字体的大小 color：red；设置字体的颜色 11 CSS盒子模型：所有的html元素都是一个四边形，即一个盒子。

阳光穿透心脏的1/2处/ 2022年06月06日 03:07/ 0 赞/ 283 阅读

相关 css_盒子模型

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

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

相关 CSS：盒子模型和box-sizing属性

目录一、W3C盒子模型（标准盒子模型）二、IE盒子模型（怪异盒模型）示例： -------------------- 盒子模型：W3C盒子模型、IE盒子模

偏执的太偏执、/ 2021年07月25日 11:55/ 0 赞/ 382 阅读