【前端基础篇】CSS基础速通万字介绍（下篇）2：https://developer.aliyun.com/article/1617348
内边距
padding设置内容和边框之间的距离
基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-toppadding-bottompadding-leftpadding-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-topmargin-bottommargin-leftmargin-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 项目如何在容器内分布：
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基础速通万字介绍（下篇）的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️
