技术贴

css看这篇就够了

概述

这篇文章里面我不想讲一些概念性的东西，这些概念性的知识是必要的，但是也是可以很容易在往上搜索到的，需要的同学自己可以在往上查找，我希望讲述一些我自己内化的知识，这些知识在实际工作中用的比较多，也可以作为一个手册，有需要可以随时查找。

范围

这篇文档讲述的内容暂时不会包括移动端的 css 技术，说实话移动端的我了解的也比较少，主要平时用的比较少。另外，老版本 IE 的兼容性问题也不会被提及，因为这些陈旧的知识，慢慢会被舍弃掉，平时用的也不多。

基础部分

盒模型

盒模型盒模型

1
box-sizing: content-box|border-box|inherit;
属性类型 可选值 说明
box-sizing content-box width 仅仅包含内容，不包含 border 和 padding
box-sizing border-box width 包含 border 和 padding

选择器

Demo

选择器类型 举例 权级 权重
元素选择器 p / span 1 1
id 选择器 #id 3 100
类选择器 .class 2 10
通用选择器 * {} 0 0
组合选择器 1. 后代；2. 子带；3. 兄弟选择器；4. 交集选择器；5. 并集选择器 - -
伪类选择器 span:hover{} 2 -
属性选择器 span[class=”aa”] / a[href] 2
!important - 5 10000
内联样式 - 4 1000

需要补充的是：

  1. 权值可以相加，权级不可跃迁，比如 11 个 class 选择器 也小于 1 个 id 选择器
  2. 组合选择器可能是元素选择器，类选择器，id 选择器，因此要具体情况具体分析
  3. 权值相同时，以最后面的生效
  4. 权值不同时，权重高的生效

块元素和行内元素

块元素

  1. 默认情况下，块元素是独占一行的。
  2. 常见的块元素：div, p, h1-h6, table, hr, ul, ol, form
  3. 高度，行高，内外边距均可设置
  4. 宽度缺省是容器宽度的 100%
  5. 可以容纳内联元素和其他块元素

行内元素

也叫内嵌元素或者内联元素。

  1. 默认情况下，现在在一行，一行显示不下，才会换行显示。
  2. 任何不是块级元素的都是行内元素，比如：a, span, label, strong
  3. 宽高，行高，内外边距均不可设置；
  4. 宽度就是它容纳的文本或者图片的宽度，不可改变；
  5. 行内元素只能容纳其他行内元素或者文本；

当然如果把行内元素转化为块元素（display: inline-block or block），则该行内元素具有块元素的一切特征。

标准文档流

  1. 将窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素，即为标准文档流。
  2. 每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行放不下，则再另起一行浮动。
  3. 内联元素不会独占一行，除非一行摆不下，才会另起一行
  4. 浮动，绝对定位，固定定位，这三种情况将使元素脱离标准文档流
  5. 浮动元素不占任何正常标准文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间
  6. 相对定位（position: relative）并不会脱离文档流，只是相对于原位置进行偏移，但仍保留原位置。

浮动和定位

css 布局有三种机制 – 普通流，浮动，定位，下面讲一下浮动和定位。

浮动（float）

浮动例子[demo](float - JSRUN.NET)

1
2
float = left | right | none | inherit
clear = left | right | none | inherit

浮动的特点：

  1. 脱离标准流，不占位置（自己原来的位子漏给后面的标准流）
  2. 浮动只能往左或者往右移动，不能上下浮动，直到它的边缘碰到包含框或者另一个浮动元素为止，如果父亲元素装不下了，默认另起一行显示，浮动元素之间默认无缝隙。
  3. 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动之后可以直接设置宽高，默认行为类似于行内块特性，不需要 display 转换。

浮动的使用技巧：一般一个标准流的父亲，里面一个孩子浮动了，其他的孩子也都浮动了。

浮动元素于父元素的关系：

  1. 浮动的元素压不住父元素的边框；
  2. 浮动的元素压不住父元素的 padding;
  3. 定位可以随便压；

清除浮动的理解：

  1. 清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标准流的影响；
  2. 清除浮动是针对标准流元素的，清除的是浮动元素对自身的影响；
  3. 清除浮动意味着，清除那一侧的元素不再具有浮动效果（实际还是有浮动的）;

什么时候清除浮动？

  1. 父亲没有高度；
  2. 子元素有浮动；
  3. 因为浮动影响了后面的布局；

定位

Demo例子

1
position = relative | absolute | fixed | static
  1. 相对定位（position: relative）: 不会脱离文档流，不影响其他元素的布局，只是基于原位置偏移了一定的位置，并保留原来占的位置。
  2. 绝对定位（position: absolute）: 会脱离文档流，会影响其他元素的布局，元素原先在标准文档流中所占的空间会关闭，就好像该元素原本不存在一样， 相对于离它最近的父元素带有相对定位或者绝对定位的元素做偏移。
  3. 固定定位（position: fixed）: 会脱离文档流，以浏览器的可视窗口为基准进行偏移，跟父元素没有任何关系，不随滚动条滚动。

浮动和定位的使用的场景：

  1. 浮动会脱离文档流，但是也会影响其后面的元素排布，因此如果是需要方便的布局，选择绝对定位比较好，浮动一般用于导航条等横式布局中。

  2. 父元素内部是浮动元素的，如果需要撑满父元素，有几种方式：

    1. 父元素设置伪元素清除浮动
    2. 父元素内部加入一个清除浮动的元素
    3. 父元素设置 overflow

  3. 父元素内部是绝对定位元素的，父元素的高度是撑不开的，如果需要撑开，需要通过 javascript 计算父元素的高度

弹性盒子布局(flex)

Flex 布局是 css3 新加入的布局方案，可以简便，完整，响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex 布局将成为未来布局的首选方案。

1
display: flex | (inline - flex)

注意：设置 Flex 布局后，子元素的float,clear,vertical-align属性将失效。

对着上图解释一下 flex 布局的大致情况：

  1. 采用 flex 布局的元素，称为容器，它的所有子元素自动成为容器的成员，称为项目。
  2. 容器默认存在两个轴，主轴（main axis）和侧轴（cross axis），两个轴互相垂直。主轴的开始位置（与边框的交叉点，左侧或者上侧）叫做main start ,结束位置叫做main end; 侧轴的开始位置叫做cross start,结束位置叫做cross end。
  3. 项目默认沿主轴排列，单个项目占据的主轴空间叫做main size, 占据的侧轴空间叫做cross size。
容器的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 定义了主轴的方向：
// 水平（起点在左端）| 水平（起点在右端）| 垂直（起点上端）| 垂直（起点下沿）
flex-direction: row(默认) | row-reverse | column | column-reverse;
// 定义了项目在主轴上排不下，应该如何显示
// 不换行 | 换行 | 换行（行序置换）
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
// flex-direction 和 flex-wrap的简写,比如 row nowrap
flex-flow: <flex-direction> <flex-wrap>;
// 定义了项目在主轴上的对齐方式。
// flex-start: 左对齐（第一个项目紧靠左边框）
// flex-end: 右对齐（最后一个项目紧靠左边框）
// center: 居中
// space-between: 两端对齐（紧靠边框），项目之间的间隔都相等
// space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍
justify-content: flex-start(默认值)|flex-end|center|space-between|space-around;
// 定义了项目在侧轴上的对齐方式。
// flex-start: 侧轴起点对齐（所有项目上沿紧靠上边框）
// flex-end: 侧轴终点对齐（所有项目下沿紧靠下边框）
// center: 居中
// baseline: 以所有项目的第一行文字作为基线对齐
// stretch: 如果项目未设置高度或者设置为auto,则将占满整个容器的高度
align-items: flex-start|flex-end|center|baseline|stretch(默认值);
// 定义了多跟轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。
// flex-start: 与侧轴的起点对齐，最上面一根轴线紧靠上边框
// flex-end: 与侧轴的终点对齐，最下面一根轴线紧靠下边框
// center: 与侧轴的中点对齐
// space-between: 与侧轴两端对齐，轴线之间间隔均分
// space-around: 每根轴线两侧间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍。
// stretch: 轴线占满整个交叉轴
align-content: flex-start|flex-end|center|space-between|space-around|stretch(默认)

项目的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 定义了项目的排列顺序，数值越小，排列越靠前，默认为0
order: <integer>;
// 定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大
// 如果所有项目的flex-grow的属性都为1，则他们将等分剩余空间（如果有的话）。
// 如果一个项目的flex-grow的属性都为2，其他项目都为1，则前者占据的剩余空间将比其他项目多1倍。
flex-grow: <number>;
// 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
// 如果所有项目的flex-shrink都为1，则当空间不足时，都将等比例缩小。
// 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-shrink: <number>; // 默认 1
// 定义了项目的宽度，如果同时定义了width, width属性无效，默认值是auto。
// 默认为auto时，width还是有效的。
flex-basic: <length> | auto;
// 是flex-grow,flex-shrink,flex-basis的简写，默认值是0 1 auto。后两个属性可选。
// 建议优化使用这个属性，而不是单独写三个分离的属性，因为浏览器会推断相关值
// 该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)
flex: number | [<flex-grow> <flex-shrink>? || <flex-basis>]；
// 该属性允许定义单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

关于 flex 的几点理解：

  1. 容器设为 flex 后，项目可以设置宽高，无论项目是否是行内元素还是块级元素
  2. flex-basis 针对于主轴上的宽或者高，如果设置了值，则主轴对应的宽和高设置会失效
  3. 主轴是水平方向时，项目如果设置了高度，则容器设置 align-items: stretch 也不会生效；反之主轴是垂直方向也是类似的，项目如果设置了宽度，则容器设置了 align-items:stretch 也不会生效。