CSS盒子模型-CSS入门基础（021）

最新推荐文章于 2023-07-11 20:20:15 发布

虾米大王

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量346

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111739153

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于盒子模型的内容。

在HTML入门知识中，我们学习了一个很重要的理论：块元素和行内元素。现在我们介绍一个极其重要的CSS理论：CSS盒子模型。

在CSS盒子模型理论中，页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两个方面来理解：

一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content内容、padding内边距、margin外边距、border边框，这4个属性组成。此外盒子模型还有宽度width和高度height两个属性辅助。

记住，所有元素都可以看成一个盒子！

下图是一个CSS盒子模型的内部结构图。

从上图可以看出每个元素模拟盒子模型时的状态。

CSS盒子模型的属性
属性	说明
border	边框
margin	外边距，定义页面中元素与元素之间的距离
padding	内边距，定义内容与边框之间的距离
content	内容，可以是文字或者图片

其中，padding称为内边距，也可以叫做补白。图中的margin-top指的是顶部外边距、margin-right指的是右部外边距，以此类推。

1、内容区content

内容区是CSS盒子模型的中心，它呈现了盒子的主要内容，这些内容可以是文本、图片等多种类型。

内容区是盒子模型必备的组成部分，其他三个属性则是可选的。

内容区自己有三个属性：width宽度，height高度和overflow溢出。使用width和height属性可以指定盒子内容区的宽度和高度。这个宽度和高度只是针对内容区而言，不包括padding部分。

当内容信息太多时，超出了内容区所占的范围，可以使用overflow溢出属性来指定是否换行处理。

2、内边距padding

内边距，是指内容区和边框之间的空间距离，可以看做是内容区的背景区域。

关于内边距属性有5种，分别是padding-top，padding-bottom，padding-left，padding-right和简洁写法的padding。

3、边框border

在CSS盒子模型中，边框和之前我们学习的边框是一样的。

边框属性有，border-width、border-style、border-color和简洁写法的border。

border-width指定边框宽度，border-style指定边框的类型，border-color指定边框的颜色。

4、外边距margin

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

外边距使得元素之间不需要紧凑的连接在一起，这是CSS布局的一个重要技巧。

外边距的属性也是5种，margin-top，margin-bottom，margin-left，margin-right和简洁写的的margin。

另外，CSS允许给外边距属性指定负数值，当指定外边距为负值时，整个盒子将向相反方向移动，会产生盒子重叠效果。这个就是“负margin技术”。

内容区、内边距、边框、外边距这些概念比较抽象，对于初学者来说，理解起来是有一定难度的，这个就需要自己多写代码来体会了。

示例代码：

<html>  <head>    <title>盒子模型</title>    <style type="text/css">      #main {        display: inline-block;        border: 1px solid black;      }      .ye {        display: inline-block;        padding: 20px;        margin:40px;        border: 1px solid red;        background-color: #fce9b8;      }      span {        border: 1px solid blue;        background-color: #c5fcdf;      }    </style>  </head>  <body>    <div id="main">      <div class="ye"><span>虾米大王</span></div>    </div>  </body></html>

我们把class为ye的div层看做一个盒子，则span浅蓝色部分代表内容区，浅红色部分表示内边距区，红色边框与黑色边框之间的空白为外边距区，红色的边框为盒子的边框。

宽度width和高度height：

从W3C标准的CSS盒子模型中，元素的宽度width和高度height是针对内容区而言的，这个大家需要非常清楚的记住。很多初学者容易把内边距也认为是内容区的一部分。

语法：

width:像素值；height:像素值；

只有块元素可以设置width和height，行内元素是无法设置width和height。

示例代码：

<html>  <head>    <title>设置宽高</title>    <style type="text/css">      #div1 div {        width:100px;        height:30px;        border: 1px solid black;        margin-bottom:30px;      }            #div1 span {        width:100px;        height:30px;        border: 1px solid black;      }    </style>  </head>  <body>    <div id="div1">      <div></div>      <span><span>    </div>  </body></html>