css基础

选择器

• 简单选择器：

1、元素选择器，p标签，div标签等
2、类选择器，类选择器由一个点“.”以及类后面的类名组成。

<li class="first done">Create an HTML document</li>
.first {
  font-weight: bold;
}

3、id选择器 #

<p id="polite"> — "Good morning."</p>
#polite {
  font-family: cursive;
}

4、通用选择器 *
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

• 属性选择器：通过属性/属性值匹配一个或多个元素。
  https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors

• 伪类：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
  常见伪类 :hover,:link,:active,:target,:not(),:focus

• 伪元素：匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
  常见伪元素：::first-letter,::first-line,::before,::after,::selection注意双冒号。

• 组合器： 这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
  https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors
  

  组合选择器

• 多重选择器：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。

背景

background-color
background-image
background-position 指定背景应该出现在元素背景中的位置。
background-repeat
background-attachment 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?

层叠和继承

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
没有选择器, 规则在一个元素的 <style> 属性里	1	0	0	0	1000

盒子模型

• margin
  外边距塌陷：
  https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties
• 溢出
  采用overflow属性控制， auto hidden visible
  背景裁剪：background-clip
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
• 轮廓
  盒子的 outline 看起来像边框，但是它不是盒模型的一部分。它表现得像边框，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边框之外，外边距区域之内）。
• box-sizing:border-box
  完全改变盒子模型
  一般情况下，盒子的宽度=width+padding+border
  当应用了该属性后，盒子的宽度=width
• 盒子的显示类型
  display三种常见的值：
  block（块盒）, 被定义为堆放在其它盒子之上的盒子，盒子前后的内容处于不同行，可以设置宽高
  inline（行内盒）, 随文档的文本流堆放，宽高对行内盒无效，padding，margin，border的设置会改变周围文本的位置，但不会影响周围块盒的位置。
  inline-block（行内块盒）不会换行，同时也能设置宽高，维护块的整体性，不会跨段换行。

浮动

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats
clear: both;控件的左侧和右侧不允许出现浮动元素
浮动带来的问题：
https://mdn.github.io/learning-area/css/css-layout/floats/3_broken-layout.html
清除浮动：
https://www.zhihu.com/question/19915431
去除浮动对高度的影响：
http://www.cnblogs.com/chaixiaozhi/p/8486647.html
父布局overflow:hidden

---

定位(Position)

• 静态定位 static 默认
• 相对定位 relative 仍在文档流中，相对于自己原始位置定位，right:10px，表示原始位置基础上偏移10px;
• 绝对定位 absolute 脱离文档流，它是相对于父元素定位的， 父元素必须有position：absolute或者position：relative，若其父元素没有，则逐层网上寻找，直至浏览器窗口
• 固定定位 fixed 脱离文档流

float 和 position脱离文档流的区别：
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围；
而对于使用absolute、fixed的position脱离文档流的元素，其他盒子内的文本都会无视它。

---

Flexbox

flex-wrap: wrap 自动换行
flex-direction 方向
以上两个属性可简写为flex-flow: row wrap;

• Flex项的动态尺寸
  flex: 1;（类似Android中LinearLayout的weight）
  flex: 2 200px;(该目标最少占据200px，且该200px不参与2的分配，flex分配剩下的空间)

• Flex的全写与缩写
  上述中flex：1其实是flex的简写，对应的全写应该是flex-grow
  Flex是一个可以指定最多三个不同值的缩写属性，第二个是flex-shrink， 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。
  第三个是上面讨论的最小值。可以单独指定全写 flex-basis

• 水平和垂直对齐

  div {
    display: flex;
    align-items: center;//控制在交叉轴（y轴）上的位置，默认拉伸以填满y轴所有空间
    justify-content: space-around;//控制主轴（x轴）上的位置，这里是均匀分布，四周留有空间
  }
  

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
  注意：align-items: stretch;这是它的默认属性，对应的元素默认会将高度撑满父元素。所以子元素设置了display:flex后，宽高自动填满父布局可用空间。
  当flex属性的父元素未设置宽/高时，其宽/高为子元素的实际宽高之和。如果子元素设置的flex-basis之和大于子元素实际宽/高之和，子元素会撑出父元素。

• 排序

  button:first-child {
    order: 1;
  }
  

  默认为0,越大越靠“后”，可以为负值。

• flex嵌套
  https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html

• flex ： auto
  相当于flex：1 1 auto; 它会将父控件剩余空间填满

• flex : none
  相当于flex：0 0 auto; 保持子控件自己的宽高，此时弹性布局失去了弹性

• 参考：
  https://segmentfault.com/a/1190000004288826
  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

BFC

参考：
https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
bfc的三个特性：
a.阻止外边距折叠
b.可以包含浮动的元素
c.可以阻止元素被浮动元素覆盖

常见的触发BFC如下：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

---

CSS对齐

http://www.cnblogs.com/chaixiaozhi/p/8490725.html
float 默认顶部对齐
行内元素 默认底部对齐

---

遇到问题

margin子父共享：
https://blog.csdn.net/sinat_27088253/article/details/52954688