问题

CSS选择器有哪些？
CSS里的定位分别是什么？ 及作用
CSS垂直居中问题?
CSS里的单位？ 区别是什么？及移动端的适配rem？
移动端适配1px的问题？
BFC是什么现象？ 怎么触发?
transform动画和直接使⽤用left、top改变位置有什什么优缺点?
如何实现固定宽高比?

盒子大小

box-sizing: content-box
盒子的宽度为100px; 盒子占据空间的宽度为120px 

  1. .box { width: 80px; padding:5px; border:5px solid; margin: 10px }

box-sizing: border-box
width和height属性的值将会包含内边距和边框 IE

BFC

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不为visible

    可见格式化模型

    CSS中有几种不同的定位模型，包括浮动、绝对定位和相对定位，除非特别指定，否则所有的元素盒子都会在常规文档流中生成，即position属性的默认值为static，顾名思义，常规文档流中元素盒子的位置，由元素在HTML中的位置决定

块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由它们的上、下外边距决定

行内盒子是沿文本流水平排列的，也会随着文本换行而换行。它们之间的水平间距可以通过水平方向上的内边距、边框、外边距来调节。但行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响。此外，给行内盒子明确设置宽度和高度也不会起作用

相对定位
无论是否位移，相对定位的元素仍然会在文档流中占用初始的空间。因此这样平移元素会导致它遮挡其他元素

绝对定位
绝对定位会把元素拿出文档流。因此也就不会占用原来的空间。
绝对定位元素的包含块，是距离它最近的定位祖先，也就是display属性设置为static之外的任意值的祖先元素、

选择器

基础选择器:
tagname- 类型选择器 优先级 0,0,1
.class- 类选择器 0,1,0
#id- id选择器 1,0,0
*- 通用选择器 0
组合选择器：
子组合选择器 > .parent>.child
相邻兄弟选择器 + p+h2 匹配目标元素紧跟其后的元素
伪类选择器：用于选中处于某个特定状态的元素 或 元素相对于其父级或兄弟元素位置
:first-child
:last-child
:only-child
:nth-child(an+b)
:foucs
:hover
:root

伪元素选择器:
:before
:after
:first-letter

属性选择器: 优先级 (0,1,0)
[attr]: 匹配的元素拥有指定的属性attr， 如: input[disabled]
[attr=”value”]: 拥有指定的属性，且属性值等于指定的字符串值 ，如input[type=”radio”]

background

background属性是8个属性的简写

background-image: ;
background-position: ;
background-size: ;
background-repeat: ;
background-origin: ;
background-clip: ;
background-attachment: ;
background-color: ;

使用简写属性background可以设置指定的值，同时把其他属性重置为初始值

flex布局问题

flex的高度问题!

画三角形

image.png·

div {
  width: 0;
  height: 0;
  border: 30px solid;
  border-left-color: transparent;
  border-bottom-color: brown ;
  border-right-color: burlywood;
  border-top-color: royalblue;
}

1. 盒子大小

默认情况下, 元素盒子的width和height属性指的是内容盒子，也就是元素可渲染内容区的宽度和高度。
这时候添加边框和内边距并不会影响内容盒子的大小，但会导致整个元素盒子变大,如果想给元素盒子的每一边都添加5px的边框和5px的内边距，同时又想让元素盒子的宽度为100px，应该像下面这样把内容区域设置为80px, 如果这个元素盒子外围还有10px的外边距,那么整个盒子占据空间的宽度就是120px

.mybox {
    width: 80px;
  padding: 5px;
  border: 5px solid;
  margin: 120px;
}

box-sizing属性可以改变计算盒子大小的方式,box-sizing的默认值为content-box,如果把box-sizing的值改为boxder-box, 那么width和height属性的值将会包含内边距和边框,外边距仍然会影响盒子在页面中占据的整体空间，即它的宽度不会算到width中

.mybox {
  box-sizing: border-box;
    width: 100px;
  padding: 5px;
  border: 5px solid;
  margin: 120px;
}

行内盒子

由一行文本形成的水平盒子叫行盒子(line box),而行盒子的高度由所包含的行内盒子决定,修改行盒子大小的唯一途径,就是修改行高(line-height), 或者给它内部的行内盒子设置水平方向的边距, 内边距，或外边距

2. 外边距折叠

1. 两个外边距会折叠成一个外边距

2.嵌套元素, 内边距折叠

在一个元素嵌套着另一个元素的情况下，假设没有内边距或者边框来分隔外边距，它们的上下外边距也会折叠

常见定位方案

  • 普通流(normal flow)

    在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

  • 浮动(float)

    在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

  • 绝对定位(absolute positioning)

    在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

格式化上下文（Formatting Context）

BFC 即 Block Formatting Contexts (块级格式化上下文)
这些会触发BFC特性

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 应用

1. 浮动元素

<style>
.parent { border:2px solid red; }
.child { height:100px; width: 100px; background-color: green; float:left;}
</style>
<div class="parent">
    <div class="child"></div>
</div>

浮动元素会脱离普通文档流,由于容器内元素浮动，脱离了文档流，所以容器只剩下了2px的边框高度,如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

.parent { overflow: hidden }

2. BFC 可以阻止元素被浮动元素覆盖

<style>
.one{ height: 100px; width: 100px; float: left; background: lightblue}
.two{ width: 200px; height: 200px; background: rgba(233,78,119,.4)}
</style>

<div class="one">我是一个左浮动的元素</div>
<div class="two">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden

3. 防止外边距塌陷

<style>
.outer { background-color: #ccc;  margin: 0 0 40px 0;}
p { padding: 0;  margin: 20px 0 20px 0; background-color: rgb(233,78,119); color: #fff;}
  <style>

<div class="outer">
  <p>I am paragraph one and I hava a margin top and bottom of 20px</p>
  <p>I am paragraph one and I hava a margin top and bottom of 20px</p>
</div>

由于 p 元素的外边距和外层 div 的外边距之间没有任何东西而导致它们折叠，使 p 段落最后会与盒子的顶部和底部平齐。所以在 p 段落的上面和下面我们没有看到任何灰色。

如果我们对盒模型应用 BFC ，那么它将包括段落和边距并使之不会塌陷，所以我们将在边距的后面看到灰色的背景。

.outer { background-color: #ccc; margin: 0 0 40px 0; overflow: auto; }

BFC 再一次使元素包含在其中，阻止其外边距塌陷或超出盒模型。

创建 BFC 新方式

使用 overflow 属性或其他方式创建 BFC 有两个问题。第一，这些方法对于它们真正的用途会产生副作用。使用 overflow 属性创建一个 BFC 并且包含浮动，但是在某些情况下你可能会发现得到一个了不必要的滚动条，或者阴影被剪掉了。这是由于 overflow 属性本质上是告诉浏览器在溢出的情况下应该怎样做—产生滚动条或者剪掉元素。浏览器实际上做了你让它做的工作！
即使在没有任何副作用的情况下，使用 overflow 属性也可能会让另一个开发人员感到困惑。为什么 overflow 属性设置为自动或滚动？开发者最初的目的是什么？他们希望在这个组件上使用滚动条吗？怎样创建一个 BFC 是行之有效的？应该是没有造成其他行为而创造出迷你的布局， 或者保证是在安全范围内的，它将不会引发任何意想不到的问题，并且开发人员的意图也很清晰。 CSS 工作组认为有一个很方便的新的 display 属性: flow-root 。
你可以在任何情况下使用 display: flow-root ，它将会创建一个新的有用的 BFC ，它包含浮动，阻止外边距塌陷，并且阻止元素环绕浮动。

支持这个属性的浏览器是有限的，但如果你认为这将是方便的，你可以去支持它。然而，即使目前你不能够在你的代码很流利的使用 flow-root 功能，但你现在明白了 BFC 是什么，以及当你使用 overflow 属性或其它方法包含浮动的时候你明白了你在做什么。了解这样一个事实：比如 BFC 将阻止元素环绕浮动，这在不支持的浏览器中想创建 Flex 或 Grid 布局的时候都是非常有用的。

参考:
理解 CSS 布局和块级格式化上下文

行盒子与清除

浮动元素会脱离文档流，因此不会再像非浮动元素一样影响其他元素，实际上，严格来讲并非如此

如果浮动元素后面跟着的是常规文档流中的元素，那么这元素的盒子就会当浮动元素不存在一样，该怎么布局就怎么布局。
但是，这个元素盒子中的文本内容会记住浮动元素的大小，并在排布时避开它，为其留出相应的空间，从技术角度来讲，就是跟在浮动元素后面的行盒子会缩短，从而为浮动元素留空，造成

4. Flex布局复习

flex方向: 主轴(main axis)与辅轴(cross axis)
  • flex-direction: row-reverse 排列方向反转

.nav-bar li: first-child {
margin-right: auto
}

sticky footer
CSS3宽高比

reference

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
你可能不太熟知的布局技巧
5分钟带你手摸手实现卡券径向渐变特效
css知识点