CSS知识点

双飞翼布局

代码如下

    
header

    

    

        
main
        
HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        
        
    
 
    

    
sub
        
oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000
    

      

    
extra
        
BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
        88888888888888888888
    
    

        
footer
    

这里相应解释一下，中间的main设置了width：100%，所以后面的浮动元素没有位置换行到了下一行，但是实际还是相当于排在main的后面。此时，left块使用margin-left：-100%，则让left块向左边移动了父元素100%的距离，成功移动到了main的左边，对于右侧元素，使用margin-left：-自身width，则可以移动到main的右侧，最后，给main加一个wrap，给上合适的margin，左右侧栏设置position：relative方便调整，布局完成。

BFC

创建BFC的方法：

• 根元素或其它包含它的元素
• 浮动元素的不是 none
• 绝对定位的元素 (元素具有为 absolute或 fixed)
• 内联块 inline-blocks (元素具有display： inline-block）
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 块元素具有overflow且值不是 visible

BFC的特点：

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。

margin负值

对于static元素：

当元素没有设置width（或者width：auto）时，margin left/right为负值会使元素向指定的方向拉伸，增加元素的宽度。
当元素设置了width属性时，margin left/top设置负值会使元素向左/上偏移，而margin right/bottom会将后续的元素拖拉进来，覆盖本来的元素。我认为这与BCF中margin box的左边会与包含块的左边相接触以及BFC内部的Box会在垂直方向，从顶部开始一个接一个地放置这两个规则有关。

对于浮动元素：

如果向浮动的方向设置负margin，会使元素向这个方向移动，如果设置与浮动方向相反的负margin，会使后面的浮动元素覆盖本身。著名的双飞翼布局就是将浮动和margin负值应用起来实现的。

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

flex容器结构

容器上的属性

以下六个属性设置在容器上

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1 . flex-direction决定了主轴的方向（也就是项目的排列顺序）

主轴的四个方向

这个属性可能有四个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2 .flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
可能为以下下三个值：
1 .nowrap(默认)：不换行
2 . wrap：换行，第一行在上方。
3 . wrap-reverse：换行，第一行在下方。

3 . flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: || ;

4 . justify-content属性
justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content

它可能有五个值：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5 . align-items
align-items: flex-start | flex-end | center | baseline | stretch;

align-items

6 .align-content
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

image.png

该属性可能取得值
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目上的属性

以下六个属性设置在项目上
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1 .order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2 .flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3. align-self属性
   align-items: flex-start | flex-end | center | baseline | stretch;
   属性和align-items一致