今天继续CSS的学习 以下是学习内容
盒子模型
Margin（外边距）：清楚边框外的区域，外边距是透明的
Border（边框）：围绕在内边距和内容外的边框
Padding（内边距）：清除内容周围的区域，内边距是透明的
Content（内容）：盒子的内容，显示文本和图像
假设中有以下代码
div
{
width:100px;
height:100px;
background-color:red;
}
<body>
<div></div>
</body>
当加入 padding:50px(上下) 10px(左右); 后
会让原来的方框变大 其中的文本会向中间靠拢
当加入 border:5px solid blue;后
会出现蓝色边框
当加入 margin: 50px;后
原方框上下左右会有50px像素的距离
每个元素可用值-方向来规定单方向
弹性盒子模型（CSS3）
假设存在一个大盒子中有三个小盒子
<body>
<div class=”container”>
<div class=”box1”></div>
<div class=”box2”></div>
<div class=”box3”></div>
</div>
</body>
<head></head>中有以下代码
<style>
.container
{
width: 500px;
height: 500px;
background-color: #555555;
}
.box1
{
width: 100px;
height: 100px;
color: red;
}
.box2
{
width: 100px;
height: 100px;
color: green;
}
.box3
{
width: 100px;
height: 100px;
color:blue;
}
</style>
会看到三个垂直相邻方框在一个大的灰色方框
当在.container中加入
display:flex; 后三个方框水平相邻摆放
因为默认弹性盒子内容水平摆放
可以用flex-direction来调整方向
只需要在.container中加入
flex-direction： row-reverse;
会出现翻转原来红色在第一个变成蓝色在第一个
row：横向从左到右（左对齐） 默认
row-reverse：反转横向排列（右对齐）
column：纵向排列
column-reverse：反转纵向排列
justify-content属性：内容对其（水平方向）
flex-start：默认值 居上
flex-end：居下
flex-center: 居中
align-items属性（垂直方向）
flex-start：默认值 居上
flex-end：居下
flex-center: 居中
以上均为作用于父元素
flex-grow为子元素上的属性 需要写在.box1-3中 分配空间
如flex-grow:1;flex-grow:2;
文档流：在文档中可显示对象在排列时所占用的位置/空间。
<body>
<p>文本1</p>
<img src=”图片链接” alt=””>
<p>文本2</p>
</body>
想让页面上文本1和文本2间不出现空格折叠问题需要
浮动 绝对定位 固定定位
明天将详细的学习三种方法
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~