盒子模型与布局理论知识

第一章：盒子模型

盒子模型

盒子的四个区域

四个区域对应的css,如何处理

①、填充区使用padding:（以上为开始，顺时针旋转）

padding:20px
||
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;

padding:20px 40px;
||
padding:20px 40px 20px 40px;
||
padding-top:20px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;

padding:20px 30px 40px;
||
padding:20px 30px 40px 30px;
||
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-left:30px;

padding:20px 20px 30px 10px;
||
padding-top:20px;
padding-right:20px;
padding-bottom:30px;
padding-left:10px;

②、外边距区使用margin:（以上为开始，顺时针旋转）

③、边框区使用border:（三个方面，四个方向）

④、内容区使用width,height:（width属性默认只是对内容区的宽度设置,height属性默认只是对内容区的高度设置，不是针对整个盒子的宽度，高度）

width:300px

注意：使用box-sizing属性可以设置width属性对于宽度的范围，box-sizing的值默认是content-box,代表宽度是对内容区的设置；box-sizing的值为border-box，代表宽度是对整个盒子的设置

第二章：多栏（多列）布局相关

传统布局(float)

使用方法

让块级元素横向布局，需要使用float:left | right

.container .item1{
    float: left;
}

存在可解决的问题

使用float之后，所在的父级元素，已无高度，会导致下方的元素，向上移动，产生多元素重叠的问题。

如何解决问题

①、给父级设置高度（不推荐）如：height:300px
②、给父级设置overflow:hidden，到达父级高度随子级高度自适应的效果(推荐使用)

无法解决的问题

1、元素之间的间距均匀分布，需要计算，而且不一定能均匀分布。
2、书写比较繁琐，代码比较冗余。

传统布局(display:inline-block)

使用方法

让块级元素横向布局，需要使用display:inline-block,让块级元素变成内联块级元素，内联块级元素特征：对宽度、高度支持、并且不独占一

.container .item1{
 	 display: inline-block;
}

存在可解决的问题

使用display:inline-block之后，元素之间会莫名产生空隙（空白），产生的未知区域，对于整体的布局会产生影响

如何解决问题

①、把元素标签的首尾相连（不推荐）

②、文字大小处理方式
给使用display:inline-block的元素的父级元素添加font-size:0px,并且该元素要设置有效字体大小

现代布局(display:flex)

使用方法

让多个元素横向布局，只需要给这些元素的父级元素添加display:flex

相关配套属性

具体描述：

详细讲解：
①、justify-content:就是如何管理元素之间的空白的分布
属性值：
1、flex-start：代表在排列方向上的从开始（上或者左）的位置分布
2、flex-end：代表在排列方向上的从结束（下或者右）的位置分布
3、center：代表在排列方向上的从中间的位置分布
4、space-around：代表空白分布在各个元素的中间和两边
5、space-between：代表空白分布在各个元素的中间

②、flex-direction:

③、flex-wrap:

④、order:

⑤、flex:

⑥、align-items | align-self:

⑦、align-content: