CSS基础

选择器权重

继承样式：0
标签选择器、伪元素选择器：1 （a{}, div::before)
类选择器、伪类选择器、属性选择器：10 (class, a:first-child, a[title])
id 选择器：100(id="")
内联样式：1000(style="")

可继承类属性

字体系列 font
文本系列

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色

光标形态 cursor
visibility
list-style

display

interhit：默认继承父元素的display table：块级元素表格 list-item：类似ul里面li

行内元素,行内块元素

行内元素不能设置水平方向的margin和padding，可以设置垂直方向的margin和padding，不会自动换行
行内块元素内联对象会排列在同一行

隐藏元素方法

display: none：渲染树不会包含这个对象，在页面不占据位置，无法响应事件，但是DOM树中仍然会存在。
visibilty:hidden: 在页面占据位置，但无法响应事件
opacity: 0：透明度为0，在页面占据位置，也能响应事件
transform: scale(0, 0): 缩放值为0，占据位置，不响应事件
z-index: 负值

link和@Import

link是在页面载入时同时加载，@import是页面加载完后加载。
link支持用js控制dom改变样式，import不支持
import只能加载css,link可以加载其他如rss

伪元素伪类

伪元素是在内容前后插入样式，但这些元素实际并不在文档中生成
伪类是把特殊效果添加到特定选择器上，不会产生新的元素，如hover

盒模型

content -> padding -> border -> margin
普通盒模型 width只包含content，IE(box-sizing: border-box)包含content padding border

translate改变位置而不是定位

translate不会触发重绘回流，定位用到cpu，效率低

CSS3新特性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadoweflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画,多背景

雪碧图的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：减少http请求，减少图片字节
缺点：需要借助工具取得位置，维护困难

calc

首先使用上必须在+,-,*,/前后加空格，用一个简单的例子

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}

line-height

line-height是指一行文本的高度，包含了字间距，实际上是指一条基线到另一条基线的距离
如果没有指定height，高度由line-height指定。

CSS百分比参照问题

参照父元素width的元素：padding, margin, width, text-indent
参照父元素height的元素：height
参照父元素属性的元素：font-size, line-height
相对定位时，top参考父元素content的高度，left参考宽度
绝对定位时，top参考最近定位元素包含padding的高度

css文件加载不受跨域限制

如何判断元素是否到达可视区域

window.innerHeight：浏览器可视区高度
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
img.offsetTop 图片距离文档顶部的距离
img.offsetTop < window.innerHeight + document.body.scrollTop

css提高性能

加载性能

打包压缩
少使用@import，多使用link

渲染性能

减少回流重绘，可以先让更改的元素脱离文档流(比如display:none)，然后再更改，最后使其返回文档。
少使用浮动定位

css预处理器和后处理器

预处理器：用来编译less,sass等
后处理器：后处理器，如postcss，通常用来给已经完成的样式表添加前缀，如浏览器前缀等等

display: inline-block间隙

有空格时有间隙，删除空格
margin为正值时，设置为负
设置font-size时，可设置font-size和letterspace等

溢出省略号表示

单行

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

多行

overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

媒体查询

CSS3的新特性，@media标签，主要用来根据用户不同屏幕大小返回不同样式

回流与重绘

首先从输入url后页面渲染过程开始讲起

HTML代码解析成DOM树
CSS代码解析成CSSOM树
整合成render树
生成布局，将整合的DOM节点放到应该放的位置，但此时还未渲染到页面上
绘制页面，属于宏任务

回流

回流发生在JS动态控制DOM结构,且有DOM节点的几何元素发生改变时，即重新执行上面的第四步，例如:

window大小被修改
增加删除DOM结构
元素的尺寸发生变化
offsetWidth 和 offsetHeight ,offset... ,clientWidth,client...,scrollTop,scroll...

重绘

重新执行上面的第五步，简单来说，所有非几何元素信息改变都会发生重绘，比如说布局没发生改变，内容发生变化，像分页器那种页面，就是重绘。

回流一定重绘，重绘不一定回流

例题

<body>
    <div id="app">   
    </div>
    
    <script>
        let el = document.getElementById('app')
        el.style.width = (el.offsetWidth+1)+'px'
        el.style.width = 1+'px'
    </script>
</body>

知识点：

浏览器会生成一个回流队列，将触发回流的几何信息改变存储起来，直到没有样式修改，浏览器按照这个队列进行批量回流(一个队列一次回流)
offsetLeft,offset....会刷新回流队列，即强制执行回流队列后清空，并将offset..推入回流队列。所以看上面那道题，清空原本就是空的回流队列后，只有一条回流队列，里面存储三份导致回流产生的几何信息改变结果，所以只进行一次回流，也就进行一次重绘

布局

两栏布局

多指左侧宽度固定，右侧宽度自适应

左侧浮动，右侧设置margin值，width自适应(撑满父盒子)

<div class="outer">
        <div class="left"></div>
        <div class="right"></div>
</div>

.outer {
            height: 100px;
        }
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .right {
            margin-left: 200px;
            height: 100px;
            background-color: yellow;
        }

右侧创建BFC使其不会与左侧浮动重叠

.right {
     overflow: hidden;
     height: 100px;
     background-color: yellow;
}

利用flex布局

        .outer {
            display: flex;
            height: 100px;
        }
        .left {
            width: 200px;
            height: 100px;
            background-color: green;
        }
        .right {
            flex: auto;
            height: 100px;
            background-color: yellow;
        }

flex: flex-grow flex-shrink flex-basis

三栏布局

通常指两侧宽度固定，中间宽度自适应

定位实现

        .outer {
           position: relative;
           height: 100px;
       }
       .left {
           position: absolute;
           top: 0;
           left: 0;
           width: 200px;
           height: 100px;
           background-color: yellow;
       }
       .right {
           position: absolute;
           top:0;
           right: 0;
           width: 100px;
           height: 100px;
           background-color: green;
       }
       .center {
           width: auto;
           height: 100px;
           margin-left: 200px;
           margin-right: 100px;
           background-color: black;
       }

浮动 + BFC/margin

       .outer {
         height: 100px;
     }
     .left {
         float: left;
         width: 200px;
         height: 100px;
         background-color: yellow;
     }
     .right {
         float: right;
         width: 100px;
         height: 100px;
         background-color: green;
     }
     .center {
         width: auto;
         height: 100px;
         overflow: hidden;
         background-color: black;
     }
 ```
 ### flex
 ```css
         .outer {
         height: 100px;
         display: flex;
     }
     .left {
         width: 200px;
         height: 100px;
         background-color: yellow;
     }
     .right {
         width: 100px;
         height: 100px;
         background-color: green;
     }
     .center {

         height: 100px;
         flex:1;
         background-color: black;
     }

圣杯布局

圣杯布局实现思路如下：

首先html结构里，center放在最前
给center, left, right添加浮动，其中center的宽度为100%，由于宽度所以left,right被挤下去
给center父元素outer添加padding，限制center的宽度
给left和right添加margin，使其回到outer上，此时left，right覆盖在center上
给left和right添加相对定位，使其回到两边，不覆盖center

双飞翼布局

与圣杯布局的不同在于其先让left，right覆盖center，然后在center内添加盒子inner-center放置内容，并给这个盒子添加margin，使其不会给left，right覆盖

首先html结构里，center放在最前
给center, left, right添加浮动，其中center的宽度为100%，由于宽度所以left,right被挤下去
给left，right添加margin，使其回到outer上，此时left，right覆盖在center上
给inner-center添加margin，使其不被覆盖

水平垂直居中

定位 + translate/ margin
flex：justify-content和align-items

flex布局

首先是父元素的属性

flex-direction: 主轴的排列方向(row, column, row-reverse, column-reverse)
flex-wrap: 是否换行(no-wrap, wrap, wrap-reverse)
flex-flow: flex-direction | flex-wrap
justify-content: 主轴的排列方式(flex-start, flex-end, space-around, space-between, center)
align-items: 交叉轴元素的排列方式(flex-start, flex-end, center, stretch(default):占满交叉轴，baseline：第一行文字基线
align-content：多根轴线的排列方式(flex-start, flex-end, center, space-around, space-between)

然后是子元素的属性

order：数值越小，默认越靠前，默认为0
flex-grow: 放大比例，默认为0，如果子元素都为1，则等分剩余空间，如果一个是2，其他是1，则2那个子元素占据两份
flex-shrink: 缩小比例，默认为1，即空间不足时会缩小
flex-basis：length | auto: 给元素在分配多余空间前占据一定的位置。
flex: flex-grow, flex-shrink, flex-basis, 后面两个可选，flex-auto:1,1,auto; flex:none = 0,0,none
align-self:设定单个元素在交叉轴的排列方式

CSS八股笔记自用1