CSS3常用方法 _css

元素居中 1、text-align: ;
在没有浮动的情况下，将需要居中的元素设为行内元素(: )或行内块元素(: -block) ，然后在父元素上加上属性text-align: ;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在父元素上加上属性text-align: 即可
2、: 0 auto;
居中的元素是块级元素，内联元素需加上属性: block;且元素不浮动
3、偏移
.fu{width: 200px;height: 200px;position: relative;background-color: red;}.fu span{position: absolute;/* 以元素右上点为基准，将该点居中 */left: 50%;top: 50%;/* 以元素自身宽高为基准，左移并上移宽高的一半 */transform: translate(-50%, -50%);}
该方法在使用非常方便，但是兼容性一般，很多浏览器并不兼容该属性
4、弹性布局: flex;
.fl{width: 200px;height: 200px;background-color: red;display: flex;justify-content: center;align-items: center;}
设为flex布局以后，子元素的float、clear和-align属性将失效
使用flex居中不需要知道元素本身宽高以及元素的属性
四种定位 1、相对定位：:
保留原来位置，不脱离文档流，相对于原位置定位，经常与z-index属性进行层次分级
2、绝对定位：:
脱离文档流，是整个元素的左上角（含）相对于最近的、非定位的父元素的外边界或者说内边界定位的;如果没有非定位的父元素，则相对于“浏览器可视窗口”定位（不是body也不是html元素，而是屏幕的可视区的左上角（不含工具条）），经常与z-index属性进行层次分级
3、固定定位：:fixed
脱离文档流，是相对于“浏览器的可视窗口”来定位的而不是html也不是body也不是屏幕！经常与z-index属性进行层次分级
4、粘性定位：:
是css定位新增属性；可以说是（静态定位）和（固定定位）fixed 的结合；它主要用在对事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到粘性定位的要求时(比如top：100px)；:这时的效果相当于fixed定位，固定到适当位置
5、默认值
(静态定位): ，元素框正常生成的， top leftright这几个偏移属性还有z-index不会影响其静态定位的正常显示（默认情况下的定位，仅作了解，不会使用）
对于元素本身特性的影响：:fixed和(除外) ，将使元素变为block元素，并脱离文档流
布局方法
1、table 表格布局
【CSS3常用方法】2、flex 布局 (弹性布局)
flex布局教程
3、float 浮动布局
float布局教程
4、绝对定位布局 :
5、响应式布局
6、grid 网格布局：
值描述
none
默认值。不定义行或列的尺寸。
grid--rows / grid--
规定列和行的尺寸。
grid--areas
规定使用命名项目的网格布局。
grid--rows / grid-auto-
规定行的尺寸（高度），以及列的自动尺寸。
grid-auto-rows / grid--
规定行的自动尺寸，并设置 grid-- 属性。
grid--rows / grid-auto-flow grid-auto-
规定行的尺寸（高度），以及如何放置自动就位的项目，和列的自动尺寸。
grid-auto-flow grid-auto-rows / grid--
规定如何放置自动就位的项目，和行的自动尺寸，以及设置 grid-- 属性。