float布局
-
子元素写上
float：left -
父元素必须加上 clearfix，写法：
.clearfix{ content :''; display : block; clear : both;
}
使用技巧：
- 最后一个子元素不设置width， 或者设置max-width
- img 设置Max-width
- 如果图片下面有多余的空白，就在图片上写上 vertical-align: top或者middle
- 如果border干扰了布局，可以用outline: 1px solid red, outline不占用位置
- 固定元素的块级元素居中的方法： 写上margin: 0 auto; 或者margin-left: auto; margin-right: auto;(比前者好，因为没有影响上下的Margin)
- 平均布局的关键点：负Margin
flex布局
游戏中学习：
grid布局
游戏中学习：
图片中的页面可以由grid分解成几个5行两列，代码如下：
结果显示：
mrowlhaha.github.io/cssSimpleCo…
关于定位：
position的五种取值：
- static
- relative
- absolute
- fixed
- sticky
注意，一般 子绝父相 （孩子用了绝对定位，父元素要用相对定位）
层叠上下文：
我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
以下情况会使元素创建层叠上下文：
-
html 元素
-
position: relative; z-index: 0;
-
position: absolute; z-index: 0;
-
opacity: 0.5;
-
position:fixed; z-index: auto;
