7.18盒子模型

最新推荐文章于 2024-07-18 17:34:14 发布

wink在干嘛

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量135

点赞数

分类专栏：前端0到1 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_61214373/article/details/125842128

版权

前端0到1 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天给大家分享一些关于盒子模型的知识点，加油！！！

一、盒子模型

1、认识盒模型

在HTML中，标签都是一个长方形模型，他们包含有内容区（content）、内填充（padding）、边框（border）、外边距（margin），这些特性和日常生活中常见盒子比较相似，所以我们称之为盒模型。每一个HTML标签都可以看做一个盒子。

2、相关的css属性

盒模型示意图：

按照盒子从里到外的顺序来学习：

a、内容区

放置内容的部分，可以由盒子中的内容撑开，或者设置 width height 属性来指定固定的大小。

div{
    width: 100px;
    height: 100px;
    background-color: red; /*添加背景色以便于观察*/
}

b、内填充

相当于内容四周的填充物（例如：泡沫、报纸、气垫等），CSS属性里面称之为内边距padding；

padding属性接收长度值或百分比值，但是不接收负值：

 div{
    padding-top: 10px;   /*上内边距*/
    padding-right: 5px;  /*右内边距*/
    padding-bottom: 5px; /*下内边距*/
    padding-left:5px;    /*左内边距*/
}

padding属性可以使用一个属性表示四个方位的值，接收的值个数不同意思不同：

/* case 1 */
div{ padding: 10px; } /* 上下左右 全部10px */

/* case 2 */
div{ padding: 10px 5px; } /* 上下 10px    左右 5px */

/* case 3 */
div{ padding: 10px 5px 7px; } /* 上 10px    左右 5px    下 7px */

/* case 4 */
div{ padding: 10px 9px 8px 7px ; } /* 上 10px  右 9px  下 8px  左 7px */

内边距部分会显示盒子背景；

内边距会撑大盒子的整体大小，但是不会影响内容的大小；

这种一个属性有很多子属性的我们称之为复合属性。

c、边框

相当于盒子的包装本身，CSS属性里面称之为border，是包裹在padding外层的东西；

可由统一的border属性来规定边框大小：

/*三个值分别表示： 四周边框大小   边框线类型   边框线颜色 */
div{ border: 5px solid red; }

边框线类型：

值	描述
none	定义无边框。
solid	定义实线。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
double	定义双线。双线的宽度等于 border-width 的值。

border也可由分解属性表示：

div{
  border-top: 10px solid red;
  border-right: 5px solid red;
  border-bottom: 7px solid red;
  border-left: 8px solid red;
}

还可进一步分解为border-width、border-style、border-color

/* case 1 */
div{
  border-width: 5px;
  border-style: solid; 
  border-color: red;
}

/* case 2 */
div{
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: pink;
}

d、外边距

相当于盒子和其他盒子之间的间距，CSS属性里面称之为margin；

外边距是在边框外层的，不会显示盒子的背景；

margin属性的值和padding很类似，演示一下~

margin允许负值；

margin多了左右的auto值，可以用来将盒子在父级中左右居中；

3、怪异盒模型

怪异盒模型和标准盒模型的区别在于，width、height所包含的部分不同。标准盒模型width和height只表示content内容区。而怪异盒模型的width、height包含content、padding和border部分。

我们可以使用 box-sizing 属性来指定盒模型类型：

/*标准盒模型*/
.div1{
    box-sizing: content-box; /*标准盒模型，默认值*/
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid green;
    background-color: red;
}

/*怪异盒模型*/
.div2{
    box-sizing: border-box; /*开启怪异盒模型*/
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid green;
    background-color: red;
}

4.、外边距合并

在某些特定情况下，两个盒子之间的上下外边距会合并：

兄弟元素之间外边距合并

<style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 50px;
  }
  .box2{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 30px;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>

父子元素之间上外边距合并

<style>
  .wrap{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 50px;

    /*当父元素top方向添加border或padding，不会合并*/
    /*border-top: 1px solid blue;*/
    /*padding-top: 10px;*/
  }
  .child{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 30px;
  }
</style>
<div class="wrap">
  <div class="child"></div>
</div>