代码演示效果链接：
一、框模型（盒模型）相关知识
1、框模型（盒模型）五要素：width,height,padding,border, margin
2、padding、margin属性简写：padding/margin: 5px 10px 5px——第二个表示左右
3、border属性简写：border-right: 1px solid green—— 宽度 样式 前景色
4、小提示:
- 轮廓
outline: 位于border与margin之间,因为不占空间, 可暂时忽略 - 轮廓没有针对各条边的属性,只能统一设置
- 默认,内容区的背景色会延伸到内边距范围内,内边距是透明的
- 外边距始终是透明的,可能透过它看到父元素
- 内边距,边框不允许是负值, 而外边距允许
内边距影响到盒子大小, 而外边距影响到盒子的位置
边框颜色默认与内容区前景色相同,例如文本是黑色, 边框就是黑色
- 如果边框是虚线,是可以透过边框线的间隙看到内容区元素的背景色
5、 调整元素框的大小
5.1 display属性
- display: 属性, 默认值
inline,适用所有元素, 不能继承 - display 改变的是显示方式, 并不能改变元素的本质
- 例如,块级元素不允许做为行内元素后代, 并不会因为它显示为行内块而改变
5.2 块级框
- 块级框宽度,其实就是内容区宽度,由左内边界到右内边界的距离, 高度也一样
- 元素内容宽度可以用
box-sizing进行调整,默认为内容宽度(content-box)
5.3 box-sizing属性
box-sizing: 指示浏览器如何计算一个元素的总宽度和总高度- 盒模型中,元素的
width/height默认只会应用到”内容区” - 当盒子中存在
padding/border时,计算盒子总大小非常麻烦
| 序号 | 属性值 | 描述 |
|---|---|---|
| 1 | content-box |
默认值,width/height只应用到内容区 |
| 1 | border-box |
width/height还包括padding,border |
- 即
width总宽度是不变的, 宽度计算边界在边框上,所以width=broder+padding+content box-sizing: 适用于所有能设置width和height的所有元素box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)
6、 横向格式化
涉及七个属性
| 序号 | 属性 | 默认值 | 描述 |
|---|---|---|---|
| 1 | margin-left |
auto | 左外边距, 正负均可 |
| 2 | border-left |
0 | 左边框 |
| 3 | padding-left |
0 | 左内边距 |
| 4 | width |
auto | 内容区宽度, 必须正值 |
| 5 | padding-right |
0 | 右内边距 |
| 6 | border-right |
0 | 右边框 |
| 7 | margin-right |
auto | 右外边距, 正负均可 |
- 这七个属性影响着块级框的横向布局
- 本个属性相加应该等于父元素容纳块的宽度,而这个宽度就是父元素的 width 值
- 七个属性中,只有内容区和左右外边距,允许设置
auto,其它属性要么0,要么具体值
7、纵向格式化
与横向格式化一样,也涉及七个属性
| 序号 | 属性 | 默认值 | 描述 |
|---|---|---|---|
| 1 | margin-top |
auto | 上外边距, 正负均可 |
| 2 | border-top |
0 | 上边框 |
| 3 | padding-top |
0 | 上内边距 |
| 4 | height |
auto | 内容区高度, 必须正值 |
| 5 | padding-bottom |
0 | 下内边距 |
| 6 | border-bottom |
0 | 下边框 |
| 7 | margin-bottom |
auto | 下外边距, 正负均可 |
二、 auto用法演示
- 横向格式化时, 左右外边距值为
auto时, 由浏览器根据父元素空间自动计算 - 纵向格式化时, 上下外边距值为
auto时, 浏览器会将它强制设置为0
<!-- 横向格式化时`auto`--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>横向格式化时`auto`</title><style>div {width: 800px;background-color: darkgray;}/*life/right-auto:由浏览器根据父元素空间自动计算*/p {margin-left: auto; /*左边由浏览器根据父元素空间自动计算*/margin-right: 100px;width: 200px;}</style></head><body><div><p>更好更快</p></div></body></html><!-- 纵向格式化时上下外边距值为`auto`--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纵向格式化时上下外边距值为`auto`</title><style>body {width: 400px;}.one {width: 100px;height: 80px;background-color: green;}/*纵向格式化时, 上下外边距值为`auto`时, 浏览器会将它强制设置为`0`*/.two {width: 100px;height: 80px;background-color: yellow;/*margin-top: 10px;*/margin-top: auto;}</style></head><body><div class="one">1</div><div class="two">2</div></body></html>
三、 flex布局知识
1、display: flex;设置容器为弹性容器
2、flex术语
2.1 flex-flow: row wrap;：设置容器水平排列，允许换行; flex-flow: cloum nowrap;：设置容器垂直排列，不允许换行;
2.2 justify-content:设置容器中弹性项目在主轴上的对齐方式：
justify-content: flex-start;默认，左对齐justify-content: flex-end;右对齐justify-content: center;居中
分配主轴上剩余空间：
justify-content: space-between;两端对齐justify-content: space-around;分散对齐justify-content: space-evenly;平均对齐
2.3 align-items:设置项目在交叉轴上的排列方式
align-items:flex-start;默认，顶部align-items:flex-end;下到上align-items:center;居中
2.4 align-content:设置项目在多行容器中在交叉轴上的对齐/排列方式
align-content:space-around;分散对齐align-content: space-between;两端对齐align-content: space-evenly;平均对齐
四、总结
本节重点掌握盒模行五要素及其属性的设置。
浮动和定位很少用，简单了解掌握一下。
