css知识总结

• 清除浮动：
  1. 设置 float 属性会使元素脱离文档流，所有其父元素将不会被撑开，清除浮动使父元素被撑开；
  2. 在浮动元素后使用一个空元素，如 < div > < br > < hr >并在 css 中赋予 { clear: both } 属性；
  3. 浮动元素添加 overflow: hidden 或者 overflow: auto 属性；
  4. 给浮动元素的容器添加浮动；
  5. 给浮动元素后面的元素添加 clear 属性；
  6. 使用 css 的 after 伪类：
     • 给浮动元素容器添加一个类名 clearfix
     • 添加样式 clearfix: after { ... } （相当于在容器内部添加了一个 div.clear [类似于方法 1]）
• css 选择器是 从右到左 匹配元素的
• css 选择器的优先级：
  选择器|权值
  ---|:--:|---:
  标签选择器|1
  类选择器|10
  ID选择器|100
  优先级比较：!important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 同配符（*）> 继承 > 浏览器默认
• 并集选择器：多个选择器之间逗号分隔；
• 交集选择器：多个选择器之间紧挨着，没有分隔；
• 后代选择器： 用空格分隔；
• 子代选择器： 父选择器 > 子选择器；
• 超链接的伪类状态：
  • link 未访问
  • visited 已访问
  • hover 鼠标悬停其上
  • active 激活选中（鼠标点击为松开）
• < input > 常用的伪类：hover，focus，active
• 其他标签基本只有 hover 伪类状态
• position：
  • relative：元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素的位置（因此会在此元素未添加定位时所在的位置留下空白）。不改变页面布局是由于，元素在位置调整之前留下了占位的空白，位置调整并不影响其他元素的位置，而是和其他元素重叠；
  • absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位的祖先元素的偏移，来确定位置。绝对定位的元素可以设置外边距，且不存在外边距合并的情况。绝对定位的元素要指定 top，right，bottom，left 中任意两项，否则元素处于没有定位时的位置，即是脱离文档流，不占用当前位置；
  • fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素的位置。元素相对于屏幕的位置在页面滚动时不会改变。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性为非 none 时，属性的视口改为改祖先；
  • sticky：盒位置根据正常流计算，然后相对于改元素在流中的 flow root（BFC）和 containing block （最近的块级祖先元素）定位。在所有情况下，该元素均不对后续元素造成影响。当元素是粘性定位时，后续的位置仍按照元素未定位是的位置来确定；例：```{ position: sticky; top: 10px; } 在 viewport 视口滚动到距离元素上方 10px 之前，该定位元素为相对定位。之后，元素将固定在距离视口顶部 10px 的位置；
• text-align：定义行内内容如何相对于他的块级父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容对齐方式；
• vertical-align：用来指定行内元素（inline、inline-block）或表格元素（table-cell）的垂直对齐方式（相对于基线（baseline）的对齐）；
• 设置透明度：opacity：（0~1）| rgba();
• 块级格式化上下文（block formatting context，BFC）
  • css 渲染的一部分，是布局过程中生成块级盒子区域，也是浮动元素与其他元素的交互限定区域；
  • 具有 BFC 的元素与普通的容器元素没有区别，但在功能上 BFC 的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素；
  • 满足下列任一条件的元素，会创建 BFC
    1. 浮动元素（float 属性为除 none 以外的值）
    2. 绝对定位元素（position 属性为 absolute，fixed）
    3. display 为 inline-block / table-cell / table-caption 的元素
    4. overflow 的值不为 visible 的元素；
• 弹性盒子布局（FlexBox）：在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，可也以弹性伸缩其尺寸，即可以增加尺寸以填满未使用的空间，也可以收缩以避免元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控；
• 文字分散间隔：text-align：justify （文字向两侧对齐，对最后一行无效）；text-align-last：justify （使其对最后一行有效）
• line-height：对于块级元素，它指定行盒（line boxes）[即文本所在的和]的最小高度（推荐使用将其值设置为确定的数字，百分比等会带来不确定的结果）