这是我参与「第四届青训营」笔记创作活动的的第4天

布局技术

基础知识

1. 盒子模型

内容区(content)
    - 设置内容区需要两个样式
    - 设置内容高度：height
    - 设置内容宽度：width
    - 注意：height、width设置的大小是不包括边框的，也不包括内边距

边框(border)
- 盒子的边缘，边框的里面属于盒子内部，外面属于盒子外部
- 设置边框需要三个样式
    - 边框的宽度：border-width (不写的话，默认值是3个像素)
    - 边框的颜色：border-color
    - 边框的样式：border-style (可以设置为none)
                    - solid 实线
                    - dashed 虚线
                    - dotted 点状虚线
                    - double 双线
border简写属性(没有顺序)
    - border:xx  例如：border: 10px red solid;
    - border-top:xx  例如：border-top: 10px red solid;

其他属性

border-radius：边框圆角，点击了解
border-collapse：表格的边框是分开的还是合并的，点击了解

内边距(padding)
- 内容和边框之间的距离是内边距
- 一共有四个方向的内边距
    - padding-top
    - padding-bottom
    -...
- 如果设置了盒子宽度，再使用padding会使盒子宽度增加
- 背景颜色会延伸到内边距上，百分比相对于容器宽度
- padding:10px 20px 20px 10px;
- 填四个值：上 右 下 左  (顺时针)
    - 填三个值：上 左右 下
    - 填两个值：上下 左右
    - 填一个值：上下左右

外边距(margin)
    - 其他元素和边框之间的距离为外边距
    - 外边距不会影响盒子可见框的大小，但是会影响盒子的位置，也会影响盒子的实际占用空间
    - 一共有四个方向的外边距(与padding一样)
    - margin也可以设置负值，则会向相反的方向移动
    - 元素在页面中是按照自左向右的方式排列的
        所以默认情况下，如果我们设置的是左和上的外边距，自己就会移动
        如果设置的是右和下的外边距，则其他元素移动
   
    - margin: 0 auto;  设置左右外边距为auto，可以实现块元素水平居中
    - 行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可

外边距重叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠(左右外边距不会重叠)。
父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。(使用overflow:hidden科可以解决。点击了解)

box-sizing，点击了解

box-sizing: content-box：是默认值，设置border和padding均会增加元素的宽高。
box-sizing: border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

2. 块级元素与行级元素

display属性

block（块级元素）：

独占一行
width、height、margin、padding均可控制
width默认100%。

inline（行级元素）：

可以共占一行
width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效，width默认为本身内容宽度

inline-block（行内块级元素）：

可以共占一行
width、height、margin、padding均可控制
width默认为本身内容宽度

position布局

1. `position`

position属性用于指定一个元素在文档中的定位方式

relative：该关键字下，可以使用top, right, bottom, left等属性调整元素相对于初始位置的偏移量，尽管偏移但此元素仍然占用原来的位置。
absolutely：脱离文档流(不会占用原来的位置)，从此元素的父元素开始往上找，找到第一个为非static定位的父元素，使用top, right, bottom, left等属性调整元素相对于此父元素位置的偏移量.
fixed：脱离文档流，使用top, right, bottom, left等属性调整元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。
sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

2. `z-index`

属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

浮动布局

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float: left：向左浮动
float: right：向右浮动

clear:：由于会脱离文档流，可以使用clear属性清除浮动的影响，详细了解

float属性用于创建浮动框，将其移动到一边，直刭左边缘或右边缘触及包含块或另一个浮动框的边缘。从上往下找空间，上面有浮动盒子，就不会独占一行，剩余空间就可以用。

浮动盒子特性

脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标，相当于上面一个图层）
浮动的盒子不再保留原先的位置(下面未加浮动的盒子会覆盖上面加浮动盒子的位置)
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝的，是紧挨着起的，行内元素同理

使用浮动注意点

浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响(覆盖)浮动盒子后面的标准流，不会影响(覆盖)前面的标准流

为了约束浮动元素位置我们网页布局一般采取的策略是

先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置

网页布局第一准则：

多个块级元素纵向排列找文档流
多个块级元素横向排列找浮动
因为浮动可以改变元素标签默认的排列方式(可以让多个块级元素一行内排列显示)

flex布局

flex，Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力

Flex 容器的CSS属性

文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 display 属性值改为 flex 或者 inline-flex。完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列特点：

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

1. `flex-direction`

属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

row：你的主轴将沿着从左往右方向延伸 — 也就是 inline 排列的方向
row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。
column：你的主轴会沿着从上到下方向延伸 — 也就是 block 排列的方向
column-reverse：表现和column相同，但是置换了主轴起点和主轴终点

2. `flex-wrap`

属性指定 flex 元素是否允许多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

nowrap：默认值。不换行。
wrap：换行，第一行在Flex容器上方。
wrap-reverse：换行，第一行在Flex容器下方。

3. `justify-content`

属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间（主轴对齐方式）。详细了解

4. `align-items`

属性定义了浏览器之间，如何分配顺着弹性容器副轴的元素之间及其周围的空间（副轴对齐方式）。详细了解

.div-flex-item {
    width: 60px;
    height: 100px;
    /*  使用justify-content和align-items可实现水平竖直居中*/
    justify-content: center;
    align-items: center;
}

5. `align-content`

与align-items效果差不多，但有一些区别。详细了解

align-items 会将所有的盒子按照均匀排布 align-content会挤在一起
当在flex-wrap:nowrap模式的时候，align-items 仍然会居中，而algn-content 居中效果会消失

6. 在flex容器内部元素的CSS属性

order

定义flex项目的顺序，值越小越靠前。

flex-grow

定义flex 项主尺寸的 flex 增长系数。
负值无效，默认为 0。

flex-shrink

定义flex 项主尺寸的 flex 缩小系数。
负值无效，默认为 0。
负值无效，默认为1。

响应式布局

media查询

当屏幕宽度满足特定条件时应用css。

 /* 当width>=768px时显示样式  */
@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

calc() 函数允许在声明 CSS 属性值时执行一些计算
Bootstrap：Bootstrap文档，快速布局

CSS布局技术 | 青训营笔记