CSS解析

盒子模型(box-sizing)

  1. 盒子模型包括了四部分，margin、padding、border、content
  2. 分为IE盒子模型(border-sizing)和标准盒子模型(content-sizing)
  3. ie 盒子模型的width/height 包含了padding和border
  4. 标准盒模型的width/height 不包含padding和border

position包含几种属性

  1. static：默认状态，没有定位，正常流
  2. fixed：生成绝对定位元素，相对于浏览器窗口定位
  3. absolute:生成绝对定位元素，相对于与static定位外的第一个父元素定位
  4. relative:生成相对定位元素
  5. sticky:粘性定位，sticky元素效果完全受制于父级元素们

CSS选择器及优先级

选择器 格式 优先级权重
id选择器 #id 100
类选择器 .className 10
属性选择器 a[ref=’eee’] 10
伪类选择器 li:last-child 10
标签选择器 div 1
伪元素选择器 li:after 1
相邻兄弟选择器 h1+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符选择器 * 0

注：

  1. !important优先级最高
  2. 优先级相同情况下，最后出现的样式生效
  3. 继承得到的样式的优先级最低；

display的属性及作用

属性 作用
none 元素不显示，从文档流中移除
block 块类型，默认是父元素的宽度，可设置宽高，换行显示
inline 行内元素类型，默认宽度为内容宽度，同行显示
inline-block 默认宽度为内容宽度，可设置宽高，同行显示
list-item 向块元素一样显示，并添加样式列表标记
table 此元素会作为块级表格显示
inherit 从父元素继承display属性的值

BFC(块级格式化上下文)

定义

通俗来说BFC就是容器，用来管理内部块级元素，与这个区域外无关

特性

  1. BFC会阻止垂直外边距折叠
  2. BFC不会重叠浮动元素
  3. BFC可以包含浮动—-清除浮动

Flex布局

flex-direction:

决定主轴的方向(即项目的排列方向)

1
2
3
4
5
6
7
8
.container {
    flex-direction: row | row-reverse | column | column-reverse;
    
    // row，主轴为水平方向，起点在左端。
    // row-reverse：主轴为水平方向，起点在右端
    // column：主轴为垂直方向，起点在上沿
    // column-reverse：主轴为垂直方向，起点在下沿
}

flex-wrap:

决定容器内项目是否可换行

1
2
3
4
5
6
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
// nowrap 不换行,自动调整尺寸
// wrap：项目主轴总尺寸超出容器时换行，第一行在上方
// wrap-reverse：换行，第一行在下方

flex-flow: (忽略)

flex-direction 和 flex-wrap 的简写形式

1
2
3
4
.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content：

定义了项目在主轴的对齐方式。

1
2
3
4
5
6
7
8
9
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
    
    // flex-start 左对齐
    // flex-end：右对齐
    // center：居中
    // space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
    // space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
}

align-items:

定义了项目在交叉轴上的对齐方式

1
2
3
4
5
6
7
8
.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
// flex-start：交叉轴的起点对齐
// flex-end：交叉轴的终点对齐
// center：交叉轴的中点对齐
// baseline: 项目的第一行文字的基线对齐
//

align-content:

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

1
2
3
4
5
6
7
8
9
10
.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

// flex-start：轴线全部在交叉轴上的起点对齐
// flex-end：轴线全部在交叉轴上的终点对齐
// center：轴线全部在交叉轴上的中间对齐
// space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
// space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

清除浮动

1
2
3
4
5
6
7
// 父级div定义伪类:after和zoom
.contain:after{
    clear:both;
    content:"";
    visibility:hidden;
}

link并行下载

@import 引入的资源编译、加载、执行完成后才会执行后续

为性能提高建议使用link

CSS动画和过渡

transition

强调的是单一属性的动画效果，从开始到结束整个过程中间不会发生动画的转折

animation

强调的是多种动画属性的结合，能够有效的排列动画执行的时间 某时做某事 ，可以简单也可以复杂

CSS优化和提高性能

加载性能

  1. css压缩
  2. css单一样式
  3. 减少使用@import，建议使用link，因为前者是等待页面加载完成在加载CSS,后者是同时加载

选择器性能

  1. 避免使用通配规则
  2. 尽量少使用标签进行选择，用id或class

渲染性能

  1. 慎重使用高性能属性：浮动、定位
  2. 尽量减少页面的重排
  3. 属性值为0时不加单位
  4. 标准化各种浏览器前缀，带浏览器前缀的在前，标准属性在后
  5. 优化嵌套，避免层级太深
  6. 使用CSS雪碧图，减少http请求