Hello,everyone !
想以一个轻松愉悦的心情来开始我的每一篇文章。
这是每一次的整理和缩影，希望大家可以发表意见，促进成长。
一.盒模型
- 概念
CSS盒模型本质上是一个盒子，封装周围的HTML元素，是由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。 - W3C盒子模型（标准盒模型）
根据 W3C 的规范，元素内容占据的空间是由width属性设置的，而内边距（padding） 和边框（border）值是另外计算的。 - IE盒子模型（怪异盒模型）
在该模式下，设置 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 - box-sizing
box-sizing可以指定盒模型的种类，content-box以及border-box。content-box与border-box的区别在于盒模型的宽高计算方式不一样。
content-box
说明：在内容宽度和高度之外绘制内边距和边框
border-box
说明：在已设定的宽度和高度之内绘制设定元素的边框及内边距
代码如下：
.content-box{
width: 100px;
height: 100px;
border: 1px solid;
padding: 0px 10px;
box-sizing: content-box;
}
.border-box{
box-sizing: border-box;
}
二.BFC
- 定义
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 - 形成条件
1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）。 - 特性
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算。
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
三.页面布局
- 静态布局
静态布局（Static Layout）是最传统的网页布局方式。
特点：
1、页面不会因为浏览器窗口的大小不同而不同。
2、页面元素的尺寸通常使用的px作为单位。
3、在浏览器窗口中观察,通常居中对齐显示，两侧留白或平铺背景。
4、优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
5、缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。 - 响应式布局
在标签里加入下面的meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
通过媒体查询来设置样式。
/* 分辨率（width：1920，height：1080） */
@media screen and (min-width: 1900px){
}
/* 分辨率（width：1366，height：768） */
@media screen and (min-width: 1300px) and (max-width: 1400px){
}
- 弹性布局
弹性布局（flex-box）的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
1、display的取值：
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（css3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
2、flex-grow (适用于弹性盒模型容器子元素)
设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。用数值来定义扩展比率。不允许负值。默认值为0。
3、flex-shrink (适用于弹性盒模型容器子元素)
设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
4、flex-basis (适用于弹性盒模型容器子元素)
设置或检索弹性盒伸缩基准值。
5、flex (适用于弹性盒模型子元素)
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
4. 自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
这些是我本身没有很牢记的问题，整理下来，对我自己有个加深的作用，可以时刻学习到。
来源：CSDN
作者：weixin_42397189
链接：https://blog.csdn.net/weixin_42397189/article/details/103459362