本文总结了CSS布局的四种主要方式：盒子布局，浮动布局，定位布局和弹性盒子。详细介绍了盒子模型的构成及常用属性，浮动布局的float属性和clear解决方案，定位布局的position属性，以及弹性盒子的display、flex-direction、flex-wrap等关键属性的设置和作用。
- 盒子布局
- 浮动布局
- 定位布局
- 弹性盒子
- 其他
1 盒子布局
关于盒子模型：网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。（源自百度百科，我还是写不出这么客观严谨的东西）
构成： 边界（margin）、边框（border）、填充（padding）、内容（content）
1.1 常用属性
不知道记不记得住，但是应该可以加深印象。
上图可以很清楚的反应每个属性的用途。（不知道什么意思就翻译吧）
- boder： 边框，引号内按四个按上右下左的顺序。
（在vscode里面打出border后会显示很多其他的如下图，按所需进行选择）
当然也可以按照边框粗细、板框类型、边框颜色的顺序打。如下：
.css
#baishu{
width: 200px;
height: 200px;
border: 1px dashed orange ;
}
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="..\css新\shiyan.css">
</head>
<body>
<div
最低0.47元/天 解锁文章
扫一扫
1589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
