非专业人士的CSS修炼

背景

作为一个非科班出身的程序员。从后台开发小可怜，转成了前端开发大可怜。
一上手就是修改react项目的bug，一直没有系统的学过CSS。都是用到什么现学的，是时候整理下常用的了。

position

fixed
固定布局：可以实现底部按钮栏，不会随着浏览器上下滑动而移动。可以理解为：已经脱离文档流了吧。我是固定的，谁动我都不动。
效果1：
此处有图
底部操作栏都不动。上面的内容可以上下滑动。
效果2:
顶部导航栏和底部操作栏都不动。只有中间的内容区可以上下滑动。
此处有图。
不过遇到了个问题。就是中间内容去的输入框，错误提示信息，滑动时图层显示在了导航栏和底部操作栏上面。通过修改图层级别好像解决了。
static默认值
relative
relative 在父组件里面，合并多个小组件时，小组件的位置时相对于父组件移动的。
此处有图。例如给小组件设置，margin-left:1rem
那么小组件就相对于父组件右移1rem,产生一些距离感。我一直以为relative 才是默认值。
relative 是在布局流中的，不会遮盖其他元素。倒是不在布局流中的，可以遮盖其他元素，实现重叠效果
stikcy
黏住你。好像是可以实现固定效果。例如一张列表的表头。我上下滚动内容的时候，并不希望表头也动。或者可以实现固定列效果，左右滚动内容时，想某一列可以固定下来。
此处有图

position的值， relative和absolute分别是相对于谁进行定位的？ absolute :生成绝对定位的元素，
相对于最近一级的 定位不是 static 的父元素来进行定位。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static默认值。没有定位，元素出现在正常的流中 sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不
在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档
普通流的块框上。

display

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不
存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的
宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属
性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺
寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

选择符

这里是引用
1）id选择器（ # myid）
2）类选择器（.myclassname）
3）标签选择器（div, h1, p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（lia）
7）通配符选择器（ * ）
8）属性选择器（a[rel = “external”]）
9）伪类选择器（a: hover, li:nth-child）

样式优先级

优先级为:
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高