css类问题整理

1.让元素水平居中

1.父元素定宽，子元素margin:0 auto;
2.父position: relative; 子position: absolute;right: 0;left:0;margin:auto;
3.父position: relative; 子position: absolute;left:50%;margin-left: -50px;
4.父元素display: flex;justify-content: center;
5.父元素 text-align: center; 子元素display: inline-block;
6.父元素position: relative; 子元素position: absolute; left: 50%;transform: translate(-50%, 0);

2.让元素垂直居中

1.知道宽度高度 父position: relative; 子position: absolute;top: 50%;margin-top: -25px;
2.父position: relative; 子position: absolute;top: 0;bottom:0;margin:auto;
3.父position: relative; 子position: absolute;top: 50%;transform: translate(0 , -50%);
4.父display: flex;align-items: center;

3.让元素绝对居中

1.父position: relative; 子position: absolute;top: 0;bottom:0;left:0;right:0;margin:auto;
2.父position: relative; 子position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%)
3.父dispaly:flex;justify-content:center;algin-item:center;

4.清除浮动的方法

1)父添加个高度
2)父：overflow:hidden
3)在最后子元素后多一个块级元素，并添加clear: both;属性
4)父添加伪类after ,设置clear: both;属性

.f:after{
	content: '';
   	height: 0;
   	line-height: 0;
   	display: block;
   	visibility: hidden;
   	clear: both;
}

4.左侧定宽，右侧自适应

1)左侧左浮动，右侧margin-left,父清除浮动
2)左侧absolute,右侧margin-left,
3)父 flex,右flex-grow:1
4)父display: table;子display: table-cell;
5)父display: grid;左grid-column:1;右grid-column:2

5.BFC有什么用

BFC格式化上下文，它是一个独立的渲染区域，让处于 BFC内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
如何产生BFC?

display: inline-block
position: absolute/fixed

BFC最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响

6.link与@import的区别

1)@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2)加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3)@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4)可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

6.圣杯布局和双飞翼布局

圣杯+双飞翼布局