2019-02-05 14 CSS基础语法

li strong {
  font-style: italic;
  font-weight: normal;
}

#red{color: RED}
<p id="red">红色段落</p>

.center{text-align: center;}
<h1 class="center">居中</h1>

[title]
{
  color: red;
}

img
{
  float:right;
}

正常文档流(Normal flow)
- 正常流, 即包含块格式化(block formatting), 行内格式化(inline formatting), 相对定位(relative positioning), 以及run-in boxes的定位, 盒模型会基于写作模式(writing mode), 写作模式是水平方向的, 则正常流（句子是从左到右或从右到左书写）, 而写作模式是垂直方向, 则句子是垂直方向书写, 普通流是元素在多数情况下呈现在 web 页面上的方式。所有 HTML 都在块框( block boxes，块级元素 )或者行内框( inline boxes，行内元素 )中。
浮动(脱离正常的文档流)
- float用于将盒子(box)置于左侧或者右侧, 同时内容环绕展示
- 清除浮动, 添加clear属性即可, left值清除左浮动, right值清除右浮动, both则清除左右浮动
定位(position)
- 相对定位, 偏移的参照位是其原先在正常文档流中的位置, 页面其它元素不会因该元素的位置变化而受到影响, 该元素在正常流中的位置会被保留

    .item {
      position: relative;
      bottom: 50px;
    }

绝对定位, 将其完全从正常流中移除, 其原本占据的空间也会被移除, 该元素定位相对于视口容器, 除非某个祖先元素也是定位元素(position值不为static); 需要相对于某个容器元素进行相对定位, 则将容器元素设置一个除了static之外的值

    .item {
      position: absolute;
      top: 20px;
      right: 20px;
    }

固定定位, 相对于窗口, 且从正常文档流中被移除, 当页面滚动, fixed元素保留在相对于视口的位置; 需要fixed元素相对于某个容器定位, 则将容器元素设置为transform、perspective、filter三个属性之一(不为默认值none).

    .item {
      position: fixed;
      top: 20px;
      left: 20px;
    }

STICKY定位, 将元素在页面滚动时如同在正常流中, 但当滚动到相对于视口的某个特定位置就固定在屏幕上, 类似position: fixed, 备注：存在兼容性问题

    .item {
      position: sticky;
      top: 0px;
    }

弹性布局(Flex Layout)
- 内容按行或者按列布局, 即可使用display: flex;将元素变为弹性布局
- 弹性盒子的轴(axes), flex-direction默认值为row, 即按行排列, 而flex-direction的值则为弹性盒子的主轴(main axis), 交叉轴则和主轴垂直的一条轴
- flex-grow、flex-shrink、flex-basis用于控制弹性项在主轴的空间大小
- flex-basis会为弹性项设置未拉伸和压缩时的大小
- flex-grow, 弹性项会被允许拉伸来占据更多空间
- flex-shrink, 弹性项会被压缩
```
   // 效果显示如下图
   .container {
     ...
     display: flex;
     ...
   }

   .item {
     flex: 1 1 0;
     ...
   }

   .contaienr :first-child {
     flex: 2 1 0;
   }
```
盒模型的生成, 所有元素均会生成一个盒子(box)
- 不生成盒子或内容(display: none;), 元素以及它所有的内容(包括所有子元素)都不会生成, 这样元素不会被展示, 并不会保留其本该占有的空间

    .item {
      display: none;
    }