【HTML+CSS】3.盒子模型＆Flex布局-CSDN博客

本文链接：https://blog.csdn.net/Nian_kuian/article/details/148077080

📘博客主页：程序员葵安

🫶感谢大家点赞👍🏻收藏⭐评论✍🏻

文章目录

一、盒子模型

1.1 选择器

结构伪类选择器

基本使用

作用：根据元素的结构关系查找元素。

li:first-child {
  background-color: green;
}

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

div::before {
  content: "before 伪元素";
}
div::after {
  content: "after 伪元素";
}

注意点：

必须设置 content: ””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

1.2 盒子模型

作用：布局网页，摆放盒子和内容。

盒子模型-组成

内容区域 – width & height
内边距 – padding（出现在内容与盒子边缘之间）
边框线 – border
外边距 – margin（出现在盒子外面）

盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

边框线

四个方向

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细线条样式颜色（不区分顺序）

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding / padding-方位名词

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

padding 多值写法

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

版心居中

左右 margin 值为 auto（盒子要有宽度）

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

提示：属性值是圆角半径

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影

注意：

X 轴偏移量和 Y 轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.5);
}

二、Flex布局

2.1 标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

2.2 浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

<style>
  /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
  .one {
    width: 100px;
    height: 100px;
    background-color: brown;

    float: left;
  }

  .two {
    width: 200px;
    height: 200px;
    background-color: orange;

    /* float: left; */

    float: right;
  }
</style>

<div class="one">one</div>
<div class="two">two</div>

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

overfow法清除浮动

.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

2.3 Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行
nowrap：不换行（默认）

行内对齐方式

属性名：align-content

注意：该属性对单行弹性盒子模型无效。