第一章:css进阶【必备篇】

1,853 阅读7分钟

整理中高级前端系列,可以当作面试复习,也可以当作实战来看,分享一下 方便自己,方便他人。有不足的地方欢迎评论~

第一趴:css进阶

第二趴:js进阶

第三趴:vue框架 - 正在整理

第四趴:工程化

结构性属性:display、position、 overflow、float、margin、padding

表现性属性:background、border、font、text

css 选择器

id、类、标签名、伪类(:link、:visited、:hover、:active、:nth-child(n))、伪元素(:before、:after)、 关系选择器、后代选择器

选择器:>、+和~

  1. 同层相邻组合选择器 + 选择header元素后紧跟的p元素
  2. 同层全体组合选择器 ~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素
  3. 子组合选择器 > 选择一个元素的直接子元素

css设计模式

设计模式:是一套反复使用的、多数人知晓的、经过分类、代码设计经验的总结。

遵循三大原则

  • 分:功能模块分类
  • 拆:分之后,还可以把重复 冗余的代码 拆出来
  • 排:经过 分、拆 之后其实就已经十分清晰了,这一步 主要是多文件引用排序问题

OOCSS- Object Oriented CSS(提供了思想)

直译过来就是,结构和皮肤分离,容器和内容分离。 即不要把结构和皮肤以及内容进行强耦合,而是相互独立,所要达到的目标是更易复用和组合,可以选择使用,选择引用等。

SMACSS - Scalable and Modular Architecture for CSS (实战)

1、Base(基础) 基础的样式,就是一些需要最先定义好,针对于某一类元素的通用固定样式。

2、Layout(布局) 布局样式,是跟页面整体结构相关,譬如,列表,主内容,侧边栏的位置、宽高、布局方式等。

3、Module(模块) 模块样式,就是我们在对页面进行拆的过程中,所抽取分类的模块,这类的样式分别写到一起。

4、State(状态) 页面中的某些元素会需要响应不同的状态,比如,可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。

5、Theme(主题) 主题是指版面整个的颜色、风格之类,一般网站不会有频繁的较大的改动,给我们印象比较深的是QQ空间,其他应用的不是很多,所以,这个一般不会用到,但有这样一个意识是好的,需要用到的时候,就知道该怎样规划。

BEM

它是一种怎样去组织、编写代码的思想,而且,看似简单的它,对前端界的影响却是巨大的。 它的核心如下: Block(块)、Element(元素)、Modifier(修饰符) 它帮助我们定义页面中每一部分的级别属性,从某种意义上说,也是一种“拆”。

盒模型

诞生缘由:默认盒模型实际占用空间为: margin+border+padding+width(height) 这种计算方式非常不方便,比如:对于非px为单位的宽高设置:

.div {
    width:50%;
    border: 1px solid #ccc;
}

我们想要宽度为50%,但实际大小却是 50%+2px......

因此box-sizing有两个常用值:content-box标准盒模型和border-box怪异盒模型

  • content-box(默认值):  border+padding+ width
  • border-box(推荐用法):宽高是包含 border和padding的

BFC-块级格式化上下文

  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • display: inline-block(内联块)、table-cell(表格单元格)、
  • 具有overflow 且值不是 visible 的块元素,
  • flex item 和 grid item

特点

  • 块级盒的垂直方向距离由上下 margin 决定,同属于一个 BFC 中的两个或以上块级盒的相接的 margin 会发生重叠;
  • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此;
  • 计算 BFC 的高度时,浮动元素也参与计算。

IFC-行内格式化上下文

  • 水平方向上,当所有盒的总宽度小于匿名行盒的宽度时,那么水平方向排版由 text-align 属性来决定;
  • 垂直方向上,行内级盒的对齐方式由 vertical-align 控制,默认对齐为 baseline
  • 行盒的高度由内部子元素中实际高度最高的盒子计算出来,值得注意的是,行内盒(inline boxes)的垂直的 borderpaddingmargin 都不会撑开行盒的高度。

问题1: item之间会产生水平间隙,是因为换行产生空白符。两种解决方案:

  • 代码不换行
  • 设置父元素font-size为0,重置子元素的font-size

问题2: 一般为了避免这个垂直的间隙,在设置 inline-block 的时候,还需要顺手带个 vertical-align: middle;

双飞翼、圣杯、flex - 三列布局

都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局

考点:margin: - 负边距

通过负边距进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

负边距对浮动元素的影响 image.pngimage.png

圣杯布局:

<body>
  <div class="content">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
<style>
// 主设置 padding
.content {
  overflow: hidden;
  padding: 0 100px;
  }

  .middle,
  .left,
  .right {
    position: relative;
    float: left;
    height: 80px;
  }

  .middle {
    width: 100%;
    background: green;
  }

  .left {
    width: 100px;
    left: -100px;
    margin-left: -100%;
    background: yellow;
  }

  .right {
    width: 100px;
    right: -100px;
    margin-left: -100px;
    background: pink
  }
</style>
  1. 先写middle,然后是left和right,因为需要先渲染middle
  2. left、right需设置position:relative以及相应的left、right值
  3. 理解负边距的作用,left的margin-left:-100%使它上移一行,同时right向左移占据left原先位置,同理,right的margin-left:-100px使它上移并靠右

双飞翼布局

区别在于 中间多了一曾包裹,其他基本一致,利用 float: left + margin-left 负边距

<style>
  .middle {
    width: 100%;
  }

  .middle,
  .left,
  .right {
    height: 500px;
    float: left;
  }

  .inner-middle {
    height: 100%;
    background-color: #555;
  }

  .left {
    width: 200px;
    margin-left: -100%;
    background-color: #333;

  }

  .right {
    width: 200px;
    margin-left: -200px;
    background-color: #999;

  }
</style>

<body>
  <div class="middle">
    <div class="inner-middle">这就是中间地带</div>
  </div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</body>

flex 布局实现

<style>
  .content {
    display: flex;
  }

  .middle,
  .left,
  .right {
    height: 200px;
  }

  .middle {
    /* flex: 1;  */
    /* 1 1 0% */

    flex: auto; 
    /* 1 1 auto */

    /* flex: none;  */
    /* 0 0 auto */

    background: green;
  }

  .left {
    width: 100px;
    order: -1;
    background: yellow;
  }

  .right {
    width: 100px;
    background: pink
  }
</style>

<body>
    <div class="content">
        <div class="middle">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

弹性布局flex

具体用法移步阮一峰的flex语法flex实战,讲得非常通俗易懂.

注意点:

不确定多少的列表展示,最后一行需要左对齐的时候,解决方案:

.list:after {
  content: "";
  flex: auto;
}

网页生成的过程

  1. HTML代码转化成DOM
  2. CSS代码转换成CSSOM(CSS Object Model)
  3. DOM和CSSOM结合,生成一颗渲染树(render tree)包含每个节点的视觉信息
  4. 生成布局(Layout)即将所有渲染树的所有节点进行平面合成
  5. 讲布局绘制(paint)在屏幕上

以上五步里面,1-3都非常快,4-5是最耗时的。

生成布局(flow)和绘制(paint)这两步,合称为 渲染(render)

image.png

重绘(repaint)和重排(reflow)

以下三种情况会导致网页的重新渲染,此时就需要重新 布局和绘制

  • 修改DOM
  • 修改样式表
  • 用户事件(鼠标悬停、页面滚动、输入框文字、改变窗口大小等)

重绘:所有对页面视觉表现属性的修改,比如:背景色、文字颜色。 重排:修改布局必然导致重绘,比如:DOM操作、元素大小、间距等。

详情可查看::www.ruanyifeng.com/blog/2015/0…

link和@import的区别?

  • link属于XHTML标签,而@import是CSS提供的。
  • 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。
  • link方式的样式权重高于@import的权重。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

Sass

记录和介绍常用语法:

  • & 代表当前所属选择器: &:hover {xxx} 
  • 定义 width:5em:变量,后期直接使用。width:5em :变量,后期直接使用。width: 5em !global; 全局可用。
  • @import "foo.scss" : 导入本地scss
  • @extend .cssname: 将.cssname下的所有样式继承给 当前作用域
  • @for、@each 可以有规律的循环输出多个类元素

mixin混合指令(性能比@extend更好)

定义: @mixin 后添加名称与样式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

使用@include指令引用混合 mixin 样式

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

如何优雅的使用BEM

  • 灵活的 &__
.aboutSection {
    &__wrapper {
        max-width 108rem;
        padding: 3rem 0;
    }
    &__headingContainer {
        background-color: steelblue;
    }
}
  • @extend
.nav {
    background-color: steelblue;
    &__container {
        display: flex;
        justify-content: space-between;
    }
    &__item {
        color: white;
        &--active {
            @extend .nav__item;
            border-bottom: 1px solid red;
        }
    }
}

// 解析成css

.nav {
  background-color: steelblue;
}
.nav__container {
  display: flex;
  justify-content: space-between;
}
.nav__item, .nav__item--active {
  color: white;
}
.nav__item--active {
  border-bottom: 1px solid red;
}

第一趴:css进阶

第二趴:js进阶

第三趴:vue框架 - 正在整理

第四趴:工程化

同学觉得有帮助的可以点个赞,以示鼓励~ 😊