盒子模型和css属性

小灰灰 2022-06-16 23:27 200阅读 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 条评论，200人围观）

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

相关阅读

相关 css盒子模型

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

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

相关盒子模型和css属性

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

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

相关 css盒子模型

CSS盒子模型 ![Center][] 一个区块元素所占的空间总大小： X轴：margin-left + border-left + padding-left + w

今天药忘吃喽~/ 2022年06月11日 00:51/ 0 赞/ 295 阅读

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

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

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

相关【CSS】盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，

以你之姓@/ 2022年04月01日 02:40/ 0 赞/ 368 阅读

相关 css盒子模型

盒模型的概念盒子模型（box model）。网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒子模型的概念可以结合我们

喜欢ヅ旅行/ 2022年01月22日 07:51/ 0 赞/ 485 阅读

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

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

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

相关 CSS盒子模型

目录一网上盒子模型分析二点睛三代码四解读 -------------------- 一网上盒子模型分析 ![2020072519250610

Bertha 。/ 2021年07月24日 21:02/ 0 赞/ 503 阅读

相关 css 盒子模型

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

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

相关 CSS盒子模型

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。盒子模型通过四个边界来描述：margin（外边距），bord...

你的名字/ 2021年03月26日 14:51/ 0 赞/ 648 阅读