CSS知识点

2017-06-14 本文已影响55人王小维WW

双飞翼布局

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
    .sub,
    .main,
    .extra{ 
        float: left;
        min-height: 130px;
    }
    .sub{
        margin-left: -100%;
        width: 200px;
        background: red;
    }
    .extra{
        margin-left: -220px;
        width: 220px;
        background: blue;
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: green;
        word-break: break-all;
    }
    .footer{ 
        clear: both;
    }
</style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
    <div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        HHHHHHHHHHHHHHHHHHHHHH
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
        </div>
    </div> 
    <div class="sub">
    <h4>sub</h4>
        <p>oooooooooooooo
        00000000000000000
        ooooooooooooooo
        ooooooooooooooo
        000000000000000</p>
    </div>

      <div class="extra">
    <h4>extra</h4>
        <p>BBBBBBBBBBBBBB
        BBBBBBBBBBBBBBBBBB
        88888888888888888888</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>

这里相应解释一下，中间的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的特点：

内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算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: <flex-direction> || <flex-wrap>;

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

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)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

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