【前端基础篇】CSS基础速通万字介绍（下篇）3

【前端基础篇】CSS基础速通万字介绍（下篇）2：https://developer.aliyun.com/article/1617348

内边距

padding设置内容和边框之间的距离

基础写法

默认内容是顶着边框来放置的. 用 padding 来控制这个距离

可以给四个方向都加上边距

• padding-top
  
• padding-bottom
  
• padding-left
  
• padding-right
  

<div>
   test
</div>

div {
    height: 200px;
    width: 300px;
    padding-top: 5px;
    padding-left: 10px; 
}

此时可以看到带有了一个绿色的内边距.

注意:

整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒子).

使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)

复合写法：

可以把多个方向的 padding 合并到一起.

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

控制台中选中元素, 查看右下角, 是很清楚的

外边距

基础写法

控制盒子和盒子之间的距离.

可以给四个方向都加上边距

• margin-top
  
• margin-bottom
  
• margin-left
  
• margin-right
  

<div class="first">蛤蛤</div>
<div>呵呵</div>

div {
    background-color: red;
    width: 200px;
    height: 200px;
}
.first {
    margin-bottom: 20px;
}

复合写法

规则同 padding

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左

块级元素水平居中

前提:

• 指定宽度(如果不指定宽度, 默认和父元素一致)
  
• 把水平 margin 设为 auto
  

三种写法

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意:

这个水平居中的方式和 text-align 不一样.

margin: auto 是给块级元素用得到.

text-align: center 是让行内元素或者行内块元素居中的.

另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.

去除浏览器默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.

为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.

使用通配符选择器即可完成这件事情.

* {
    marign: 0;
    padding: 0;
}

弹性布局

flex 是 flexible box 的缩写. 意思为 “弹性盒子”.

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

什么是 Flexbox？

Flexbox 是一种 CSS 布局模式，全称为“Flexible Box”，即“弹性盒子”。它的设计目标是提供一种更高效的方式来排列、对齐和分布容器内的元素，即使它们的大小未知或动态变化。Flexbox 特别适合应用于小型布局组件，如按钮组、导航栏等。

Flex 容器和项目

要使用 Flexbox 布局，首先要定义一个Flex 容器。在 Flex 容器中，所有直接子元素都会自动成为 Flex 项目。在一个 Flexbox 布局中，您只需要对容器应用 display: flex;，即可激活 Flexbox 模式。

代码示例

```html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

在这个例子中，.container 是 Flex 容器，.item 是 Flex 项目。

主要的 Flexbox 属性

容器属性

以下属性应用于 Flex 容器，用于控制项目如何布局：

flex-direction：定义主轴的方向（项目的排列方向）。

• row：从左到右排列（默认）。
• row-reverse：从右到左排列。
• column：从上到下排列。
• column-reverse：从下到上排列。

.container {
  flex-direction: row;
}

justify-content：定义沿主轴对齐项目的方式。

• flex-start：项目从起点开始排列（默认）。
• flex-end：项目从终点开始排列。
• center：项目居中排列。

• space-between：项目之间的间隔相等，起点和终点没有间隔。
• space-around：项目之间的间隔相等，起点和终点有半个间隔。

.container {
  justify-content: center;
}

align-items：定义沿交叉轴对齐项目的方式（通常是垂直方向）。

• stretch：项目被拉伸以适应容器（默认）。
• flex-start：项目在交叉轴的起点对齐。

• flex-end：项目在交叉轴的终点对齐。
• center：项目在交叉轴上居中对齐。
• baseline：项目的文本基线对齐。

.container {
  align-items: center;
}

flex-wrap：控制项目是否换行。

• nowrap：所有项目在一行（默认）。
• wrap：项目在必要时换行。
• wrap-reverse：项目在必要时换行，但行顺序反转。

.container {
  flex-wrap: wrap;
}

项目属性

这些属性用于控制 Flex 项目如何在容器内分布：

1. flex：综合属性，定义项目的增长、缩小和基础尺寸。

• flex: 1; 表示项目将平分剩余空间。

.item {
  flex: 1;
}

align-self：允许单个项目独立对齐，而不影响其他项目。

• 可以使用 auto、flex-start、flex-end、center、baseline、stretch 等值。

.item {
  align-self: flex-end;
}

order：定义项目的排列顺序。默认值为 0，值越小，项目越靠前。

.item {
  order: 1;
}

常见布局示例

水平和垂直居中

实现一个盒子在容器内水平和垂直居中对齐：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

创建导航栏

创建一个简单的导航栏，其中菜单项均匀分布：

.nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem;
}

.nav a {
  color: white;
  text-decoration: none;
}

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

响应式网格布局

创建一个响应式网格布局，项目根据屏幕宽度自动换行：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  flex: 1 1 calc(33.333% - 10px);
  background-color: #ddd;
  padding: 20px;
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 1rem;
}

.nav a {
  color: white;
  text-decoration: none;
}

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

以上就是关于【前端基础篇】CSS基础速通万字介绍（下篇）的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️