theme: condensed-night-purple

一、居中

水平居中

1.行内元素水平居中：利用$\color{red}text-align:center$实现行内元素水平居中

2.块级元素水平居中：通过固定宽度的块级元素的margin-left和margin-right设成auto，就可以实现块级元素的水平居中

<div>
    <p class="center-block">
    </p>
</div>
div {
    height:100px;
    border: 2px dashed #f69c55;
}
.center-block {
    margin: 0 auto;
    width: 8rem;
    padding:1rem;
    color:#fff;
    background:#000;
}

3.多块级元素水平居中利用flex布局

   <div id="app">
        <div class="center-block">
            A
        </div>
        <div class="center-block">
            B
        </div>
        <div class="center-block">
            C
        </div>
        <div class="center-block">
            D
        </div>
    </div>
    #app {
        height: 100px;
        border: 2px dashed #f69c55;
        display: flex;
        justify-content: center;
    }

    .center-block {
        width: 200px;
        padding: 1rem;
        color: #fff;
        background: #000;
    }

垂直居中

1.单行行内元素垂直居中

通过设置内联元素的高度{height}和行高{line-height}相等，从而使元素垂直居中

2.多行元素垂直居中

利用表格布局的vertical-align:middle可以实现子元素的垂直居中

3.块级元素垂直居中

$\color{blue}固定高度的元素$

已知居中元素的高度和宽度，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中

$\color{blue}未知高度的块级元素$

借助css3中的transform属性向Y轴反向偏移50%的方法实现垂直居中，部分浏览器可能存在兼容性问题

 transform:translate(-50%)

水平垂直居中

1.固定宽度水平垂直居中

利用margin，定位

2.未知宽度元素水平垂直居中

利用2D变化，在水平和垂直方向都反向平移宽高的一半

3.利用flex布局

二、CSS清除浮动

清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题

父级div定义伪类after和zoom
父级div定义height
结尾处加空div标签clear:both
父级div定义overflow：hidden
父级div定义overflow：auto
父级元素div定义display:table
结尾处加br标签clear：both

三、position属性

absolute生成绝对定位的元素
relative生成相对定位的元素
fixed生成绝对定位的元素
static没有定位，元素出现在正常的文档流中
inherit规定从父元素继承position属性的值

absolute和fixed共同点与不同点

共同点：使元素脱离普通文档流，不再占据文档物理空间覆盖非定位文档元素改变行内元素的呈现方式

不同点：1.absolute与fixed的根元素不同，absolute的根元素可以设置，fixed根元素是浏览器 2.在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置

四、文字溢出省略

单行

white-space:nowrap;
text-overflow:elipsis;
overflow:hidden

多行

display：-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

五、BFC：块级格式化上下文

块级格式化上下文是web页面的可视化css渲染出的一部分，它是块级盒布局出现的区域，也是浮动元素进行交互的区域创建条件

浮动元素（float不是none）
绝对定位元素（元素具有position为absolute或fixed）
内联块（元素具有display：inline-block）
表格单元格（元素具有display：table-cell）
表格标题（元素具有display：table-caption）

六、rem单位

rem是一个相对单位，相对于html元素的字体大小

em是一个相对单位，相对于父元素的字体大小

vw/vh css新单位与视图相关vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

rem适配方案原理

1.使用媒体媒体查询根据不同设备设置html字体大小

2.页面元素使用rem做尺寸单位

七、link和@import有什么区别

1.link属于html标签，而@import是css中提供

2.在页面加载的时候，link会同时被加载，而@import引用的css会在页面加载完成后才会加载引用的css

3.Link引入样式的权重大于@import

八、什么是fouc？如何避免？

在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面出现一些奇怪的现象，以无样式显示页面内容瞬间闪烁，这种现象称之为文档样式的短暂失效，简称fouc

原因：使用import方法导入样式表

将样式表放在底部

有几个样式表，放在html结构的不同位置

解决方法：使用link标签将样式表放在文档head中

九、rgba()和opacity的透明效果有什么不同

1.rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度

2.而rgba()只作用于元素的颜色或其背景色（不继承）

css常用总结