CSS笔记
inline（行内元素）:
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
- block（块级元素）:
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
- inline-block（融合行内于块级）:
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
脱离文档流：其实就是不在document页面上占据空间，可以层叠，覆盖到其他元素上。在文档空间被剥夺后，排在它后面的元素会顶替上来，占据它原来的空间。没有脱离的文档必须按顺序排列好，不能覆盖别人。
定位指的是用left、right、top、bottom四种属性去指定位置，使用时一定要明确该节点的相对参照物是谁，position的值不同，参照物也不相同。例子：top: 10px表示离上方的相对参照物10px的距离，只有定位的元素（非static）， z-index才会有效
position: absolutely绝对定位（相对于已绝对定位的祖先元素）。使用该属性后，节点会主动重叠。left、right、top、bottom这四种属性也是相对于绝对定位的祖先元素去做设置。若没有绝对定位的祖先元素，则以浏览器窗口为相对参照。元素设置absolutely之后会完全脱离文档流，display变为inline-block，float失效——相当于display：none的效果
position: relative节点不会主动重叠(原本空间任然占据文档流，不会被其他元素顶替)，此时left、right、top、bottom会以父元素为相对定位参照，设置这四种属性时会与兄弟节点发生视觉上的偏移重叠覆盖（其实原本空间并没变）——相当于visibility:hidden的效果
position: fixed固定定位（相对于窗口），元素完全脱离文档流、float失效。当父元素有transform属性时会失效
若父子都有z-index，则子的index会被父覆盖
清除浮动的五种方法：父元素设置高度、设置overfloaw：hidden、设置clear：both、使用伪元素、使用弹性布局display：flex
background-clip: content-box背景颜色只在content部分生效
3d轮播图https://www.w3school.com.cn/tags/att_img_alt.asp
element.style {
transform: translateZ(-26.5px) rotateX(2280deg);
-webkit-transition: 1.2s;
width: 728px;
height: 90px;
}
弹性布局：display属性设置为flex以后，子元素的float、clear、vertical-align将会失效，元素设置absolute之后弹性布局会失效
弹性布局也能控制文本节点
flex-direction(子元素的排列方向是从下到上还是从右到左，当值为row时主轴为水平轴，值为column时主轴为垂直轴)
flex-wrap(折行——若父盒子设置了宽度且子元素排列方向为横向排列。那么子元素宽度溢出时，可用该属性设置折行样式)
flex-flow(结合以上两种属性统一设置)
justify-content(设置沿主轴方向的子元素排列方式，居中排列、平均分布、周围留空的完全平均分布)
align-items(设置交叉轴的子元素排列方式可以在容器中进行统一设置，也可以对单个子元素进行设置 )
flex-grow(直接对单个子元素按比例分配剩余可用空间，若有4个子元素设置此属性为2，则将可用空间分成2*4份。若为0则不分配剩余可用空间)
flex-shrink(当空间不足时，按比例对子元素进行缩小，若为则不缩小)
flex-basic(主轴方向的像素值，其实就是高宽，主轴为x则为宽，y则为长 )
flex(可对flex-grow、flex-shrink、flex-basic进行组合设置)
order(设置子元素的排列顺序，数值越大越靠后)
https://www.runoob.com/w3cnote/flex-grammar.html
box-sizng:border-box;元素设置该属性后padding和border不占据宽度
*{margin:0; padding:0;}——body ,ul, li ,p,h1~h6,dd,dt 等都有默认的margin 或padding值的，这样就不方便我们精确控制，加上这句就可以删除浏览器这些默认值
margin:auto可以设置居中，margin-right:auto可以靠右边自动撑满
