css盒子模型

目录

盒⼦模型简介

标准盒⼦模型

内容区域

内边距

边框

外边距

弹性盒⼦模型

⽗元素上的属性

display属性

flex-direction属性

justify-content 属性

align-items 属性

⼦元素上的属性

Flex

---

盒⼦模型简介

        所有HTML元素可以看作盒⼦，在CSS中，"box model"这⼀术语是⽤来设计和布局时使⽤。 CSS盒模型本质上是⼀个盒⼦，封装周围的HTML元素，它包括：边距（margin），边框（border），填充 （padding），和实际内容（content）。

下⾯的图⽚说明了盒⼦模型(Box Model)：

不同部分的说明：

1、margin（外边距）：清除边框外的区域，外框是透明的。

2、border（边框）： 围绕在内边距和内容外的边框。

3、padding（内边距）：清除内容周围的区域，内边距是透明的。

4、content（内容）：盒⼦的内容，显示⽂本和图像。

如果把盒⼦模型看作是⼀个⽣活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒⼦中的泡 沫，边框等同于快递盒⼦，外边距等同于两个快递盒⼦之间的距离。

标准盒⼦模型

 盒⼦模型分为内容区域、内边距、边框、外边距。

内容区域

Content内容区域包含宽度（width）和⾼度（height）两个属性。 块级元素默认宽度为100%，⾏内元素默认宽度是由内容撑开，不管块级元素还是⾏内元素，默认⾼度都是由 内容撑开。

内边距

CSS padding（填充）定义元素边框与元素内容之间的空间，即上下左右的内边距。

​
div{
 padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
}

​

为了缩短代码，它可以在⼀个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写 属性是: padding:25px 50px 75px 100px;

上填充为25px

右填充为50px

下填充为75px

左填充为100px

注意：padding会撑⼤容器。

边框

CSS边框属性允许你指定⼀个元素边框的样式和颜⾊。

div{ 
 border: 1px solid #f1f1f1; 
}

solid: 定义实线边框。

外边距

CSS margin(外边距)属性定义元素周围的空间。它可以指定不同的侧⾯不同的边距：

div{
 margin-top:100px;
 margin-bottom:100px;
 margin-right:50px;
 margin-left:50px;
}

为了缩短代码，有可能使⽤⼀个属性中margin指定的所有边距属性。这就是所谓的简写属性。margin:25px 50px 75px 100px;上边距为25px 右边距为50px 下边距为75px 左边距为100px。

取值：

1、auto；

2、定义⼀个固定的margin；

3、定义⼀个使⽤百分⽐的边距。

弹性盒⼦模型

        弹性盒⼦是 CSS3 的⼀种新的布局模式。 CSS3 弹性盒是⼀种当⻚⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。 引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对⻬和分配空⽩ 空间。

⽗元素上的属性

display属性

display:flex;开启弹性盒,属性设置后⼦元素默认⽔平排列。

flex-direction属性

flex-direction 属性指定了弹性⼦元素在⽗容器中的位置。

取值：

1、. row：横向从左到右排列（左对⻬），默认的排列⽅式。

2、column：纵向排列。

justify-content 属性

内容对⻬（justify-content）属性应⽤在弹性容器上，把弹性项沿着弹性容器的主轴线。

常⽤的值就是：center。

align-items 属性

align-items 设置或检索弹性盒⼦元素在侧轴（纵轴）⽅向上的对⻬⽅式。

常⽤的值就是：center。

⼦元素上的属性

Flex

根据弹性盒⼦元素所设置的扩展因⼦作为⽐率来分配剩余空间(权重)。