前端（一）CSS篇

时间  2019-11-17
标签 前端 css 栏目 CSS 繁體版
原文   原文链接

前言

本人是一名研究生，因为准备实习和秋招，因此整理一下前端的基础知识，帮助本身整理知识体系，理清知识点，系统的复习。css

CSS篇

一、盒模型

  • 由里向外content,padding,border,marginhtml

  • 标准模型的宽高只是内容（content）的宽高：box-sizing：content-box前端

  • IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高：box-sizing：border-boxcss3

二、 css3有哪些伪类，伪类选择器有哪些

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。web

  • 伪类：用于向某些选择器添加特殊的效果。例如，a标签的:link, :visited, :hover, :active; 以及 :first-child, :last-child。浏览器

  • 伪元素：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如:before,:after, :first-letter, :first-line。 css3只新增了一个伪元素 ::selection（改变用户所选取部分的样式）。bash

三、BFC（块级格式化上下文）

BFC定义:

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。websocket

BFC布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。
  • 属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每一个元素的margin box的左边， 与包含块border
  • box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

BFC的做用及原理

www.cnblogs.com/lhb25/p/ins…cookie

四、Flex 弹性盒布局

CSS3弹性盒布局的理解：

web应用有不一样设备尺寸和分辨率，这时须要响应式界面设计来知足复杂的布局需求，Flex弹性盒模型的优点在于开发人员只是声明布局应该具备的行为，而不须要给出具体的实现方式，浏览器负责完成实际布局。 当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。session

容器的属性

  • 主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

复制代码
  • 换行属性
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

复制代码
  • 主轴对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍。

复制代码
  • 交叉轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。

复制代码
  • 项目的属性

排列顺序，数值越小，排列越靠前，默认为0。

order: <integer>;
复制代码

项目的放大比例,默认为0，即若是存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */
复制代码

项目的缩小比例,默认为1，即若是空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */
复制代码

项目占据的空间,默认值为auto，即项目的原本大小

flex-basis: <length> | auto; /* default auto */
复制代码

简写：flex-grow, flex-shrink 和 flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
复制代码

独立的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码

五、水平垂直居中

贴上一位腾讯大佬总结的文章

16种方法实现水平居中垂直居中

按照固定宽高和不固定宽高分类各说几个方法就能够了。

  • 宽度和高度已知的
/* css */
#box{
    width: 400px;
    height: 200px;
    position: relative;
    background: red;
}
#box1{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50px;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
复制代码
  • 宽度和高度未知
/* css */
 #box{
    width: 800px;
    height: 400px;
    position: relative;
    background: red;
}
#box1{
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
复制代码
  • flex 布局
/* css */
#box{
    width: 400px;
    height: 200px;
    background: #f99;
    display: flex;
    justify-content: center;//实现水平居中
    align-items: center;//实现垂直居中
}
#box1{
    width: 200px;
    height: 100px;
    background: green;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
复制代码

-平移 定位+transform

/* css */
#box{
    width: 400px;
    height: 200px;
    background: red;
    position: relative;
}
#box1{
    width: 200px;
    height: 100px;
    background: #9ff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>
复制代码
  • table-cell布局
/* css */
#box{
    display: table-cell;
    vertical-align: middle
}
#box1{
    margin: 0 auto;
}
/* html */
<div id="box">
    <div id="box1">

    </div>
</div>

复制代码

5.二、CSS居中布局有哪些，适用于什么场景，举例说明？

  • 1）、CSS居中：margin设为auto

    • 作法：把要居中的元素的margin-left和margin-right都设为auto
    • 场景：只能进行水平的居中，且对浮动元素或绝对定位元素无效。

  • 2）、CSS居中：使用 text-align:center

    • 场景：只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE六、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

  • 3）、CSS居中：使用line-height让单行的文字垂直居中

    • 作法：把文字的line-height设为文字父容器的高度
    • 场景：适用于只有一行文字的状况。

  • 4）、CSS居中：使用表格

    • 作法：td/th元素设置align="center"、valign="middle"便可处理单元格里面内容的水平和垂直居中问题
    • 场景：必须是table

  • 5）、CSS居中：使用display:table-cell来居中

    • 作法：经过display:table-cell模拟表格单元格，这样就能够利用表格那很方便的居中特性了。
    • 场景：IE六、IE7都无效。

  • 6）、CSS居中：使用绝对定位进行居中

    • 场景：只适用于宽度或高度已知的元素。
    • 原理：经过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并非居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，因此须要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

  • 7）、CSS居中：使用绝对定位进行居中

    • 场景：只适用于宽度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

    • 原理：这里若是不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，因此必需要设置元素的高和宽。同时若是改变left，right , top , bottom的值还能让元素向某个方向偏移。

  • 8）、CSS居中：使用浮动配合相对定位来进行水平居中

    • 场景：不用知道要居中的元素的宽度，缺点是须要一个多余的元素来包裹要居中的元素。

    • 原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就须要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而由于相对定位正是相对于自身来定位的，因此自身一半的宽度只要把left 或 right 设为50%就能够获得了，于是不用知道自身的实际宽度是多少。

六、三栏布局

6.一、高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么？

/* 浮动布局 */
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
复制代码
/* 绝对定位布局 */
 .layout.absolute .left-center-right>div{
  position: absolute;
 }
.layout.absolute .left{
  left:0;
  width: 300px;
  background: red;
}
.layout.absolute .center{
  left: 300px;
  right: 300px;
  background: yellow;
}
.layout.absolute .right{
  right:0;
  width: 300px;
  background: blue;
}
复制代码
/* flex布局 */
  .layout.flexbox{
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex:1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }

复制代码

6.二、圣杯布局

  • ① 特色

    比较特殊的三栏布局，一样也是两边固定宽度，中间自适应，惟一区别是dom结构必须是先写中间列部分，这样实现中间列能够优先加载。

<article class="container">
    <div class="center">
      <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

复制代码
.container {
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

复制代码

  • ② 实现步骤

    • 三个部分都设定为左浮动，不然左右两边内容上不去，就不可能与中间列同一行。而后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行

    • 经过设置margin-left为负值让left和right部分回到与center部分同一行

    • 经过设置父容器的padding-left和padding-right，让左右两边留出间隙。

    • 经过设置相对定位，让left和right部分移动到两边。

- ③ 缺点

center部分的最小宽度不能小于left部分的宽度，不然会left部分掉到下一行

若是其中一列内容高度拉长(以下图)，其余两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)

6.三、双飞翼布局

  • ① 特色

一样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。并且任何一栏均可以是最高栏，不会出问题。

<article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

复制代码
.container {
        min-width: 600px;//确保中间内容能够显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

复制代码
  • ② 实现步骤(前两步与圣杯布局同样)

三个部分都设定为左浮动，而后设置center的宽度为100%，此时，left和right部分会跳到下一行； 经过设置margin-left为负值让left和right部分回到与center部分同一行； center部分增长一个内层div，并设margin: 0 200px；

  • ③ 缺点

多加一层 dom 树节点，增长渲染树生成的计算量。

  • 两种布局实现方式对比:

    • 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
    • 两种布局方式在实现上也有相同之处，都是让三列浮动，而后经过负外边距造成三列布局。
    • 两种布局方式的不一样之处在于如何处理中间主列的位置：
    • 圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
    • 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

5.三、左右等高布局

table 布局就登场了

section {
    width:100%;
  display: table;
}
article  {
    display: table-cell;
}
.left {
    height: 100px;
    background: red;
}
.right {
    background: black;
}

复制代码

七、移动端粘连布局

  • 1）.特色

    • 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。

    • 当<main>元素比较短的时候(好比小于屏幕的高度),咱们指望这个<footer>元素可以“粘连”在屏幕的底部

<div id="wrap">
      <div class="main">
        main <br />
        main <br />
        main <br />
      </div>
    </div>
    <div id="footer">footer</div>

复制代码
* {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一层层继承下来
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

复制代码
  • 2）.实现步骤
    • (1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
    • (2)wrap区域的高度经过设置min-height，变为视口高度
    • (3)footer要使用margin为负来肯定本身的位置
    • (4)在main区域须要设置padding-bottom。这也是为了防止负 margin 致使 footer 覆盖任何实际内容。

八、响应式布局，怎么作移动端适配

8.一、meta viewport：让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。

移动端适配方案：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码
width=device-width: 让当前viewport宽度等于设备的宽度

user-scalable=no: 禁止用户缩放

initial-scale=1.0: 设置页面的初始缩放值为不缩放

maximum-scale=1.0: 容许用户的最大缩放值为1.0

minimum-scale=1.0: 容许用户的最小缩放值为1.0

复制代码

8.二、媒体查询（响应式)布局

移动端优先首先使用的是min-width，PC端优先使用的max-width。

移动优先：

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

复制代码

PC优先：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

复制代码

8.三、rem布局

rem 布局的本质是等比缩放,rem和em单位同样，都是一个相对单位，不一样的是em是相对于父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算的，这样一来rem就完美的绕开了复杂的层级关系，实现了相似em单位的功能。默认状况下，浏览器给的字体大小是16px，按照转化关系16px = 1rem。

rem响应式的布局思想：

  • 通常不要给元素设置具体的宽度，可是对于一些小图标能够设定具体宽度值
  • 高度值能够设置固定值，设计稿有多大，咱们就严格有多大
  • 全部设置的固定值都用rem作单位（首先在HTML总设置一个基准值：px和rem的对应比例，而后在效果图上获取px值，布局的时候转化为rem值)
  • js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把以前的基准值按照比例进行从新的设定，这样项目就能够在移动端自适应了

rem布局的缺点：

在响应式布局中，必须经过js来动态控制`根元素font-size`的大小，也就是说css样式和js代码有必定的耦合性，且必须将改变font-size的代码放在css样式以前
复制代码
/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就能够动态定义font-size的大小，从而1rem在不一样的视觉容器中表示不一样的大小，用rem固定单位能够实现不一样容器内布局的自适应。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

复制代码
/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

复制代码

8.四、响应式布局的特色

在实际项目中，咱们可能须要综合上面的方案，好比用rem来作字体的适配，用srcset来作图片的响应式，宽度能够用rem，flex，栅格系统等来实现响应式，而后可能还须要利用媒体查询来做为响应式布局的基础，所以综合上面的实现方案，项目中实现响应式布局须要注意下面几点：

  • 设置viewport
  • 媒体查询
  • 字体的适配（字体单位）
  • 百分比布局
  • 图片的适配（图片的响应式）
  • 结合flex，grid，BFC，栅格系统等已经成型的方案

参考： 移动端是怎么作适配的？

九、 如何实现一个最大的正方形

用 padding-bottom 撑开边距就能够了。

section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

复制代码

十、如何实现一个三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
复制代码

十一、如何实现一个扇形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
    .sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <div class="sector"></div>
</body>

</html>


复制代码

十二、css解析顺序

css 选择器匹配元素是逆向解析
复制代码
  • 由于全部样式规则可能数量很大，并且绝大多数不会匹配到当前的 DOM 元素（由于数量很大因此通常会创建规则索引树），因此有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
  • 若是正向解析，例如「div div p em」，咱们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，若是遇到不匹配就必须回到最上层那个div，往下再去匹配选择器中的第一个div，回溯若干次才能肯定匹配与否，效率很低。
  • 逆向匹配则不一样，若是当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。

1三、css 如何开启 gpu 加速

请参考网易云社区的文章 CSS动画的性能分析和浏览器GPU加速

1四、清除浮动

经常使用的通常为三种 .clearfix, clear:both, overflow:hidden;

比较好是 .clearfix,伪元素万金油版本...后二者有局限性..等会再扯

.clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
    
    
<!--
为毛没有 zoom ,_height 这些...IE6,7这类须要 csshack 再也不咱们考虑以内了
.clearfix 还有另一种写法...
-->

.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}

<!--
用display:table 是为了不外边距margin重叠致使的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->
复制代码

clear:both:如果用在同一个容器内相邻元素上,那是贼好的...有时候在容器外就有些问题了, 好比相邻容器的包裹层元素塌陷

overflow:hidden:这种如果用在同个容器内,能够造成 BFC避免浮动形成的元素塌陷

1五、css动画

CSS 中transition和animate有何区别? animate 如何停留在最后一帧?

  • transition通常用来作过渡的, 没时间轴的概念, 经过事件触发(一次),没中间状态(只有开始和结束)
  • animate则是作动效,有时间轴的概念(帧可控),能够重复触发和有中间状态; 过渡的开销比动效小,前者通常用于交互居多,后者用于活动页居多;
  • 至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就能够了
animation-fill-mode: forwards;  
<!--backwards则停留在首帧,both是轮流-->

复制代码

动画例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box-sizing</title>
  <style>
    .test {
      box-sizing: border-box;
      border: 5px solid #f00;
      padding: 5px;
      width: 100px;
      height: 100px;
      position:absolute;
      /*
      简写的姿式排序
      @keyframes name : 动画名
      duration 持续时间
      timing-function 动画频率
      delay 延迟多久开始
      iteration-count 循环次数
      direction 动画方式,往返仍是正向
      fill-mode  通常用来处理停留在某一帧
      play-state running 开始,paused 暂停 ....
       更多的参数去查文档吧..我就不一一列举了
      */
      animation: moveChangeColor  ease-in 2.5s 1  forwards running;
    }

    @keyframes moveChangeColor {
       from {
         top:0%;
         left:5%;
         background-color:#f00
       }
       to{
         top:0%;
         left:50%;
         background-color:#ced;
       }
    }

  </style>
</head>

<body>
  <div class="test"></div>
</body>

</html>

复制代码

1六、css选择器

  • 通用选择器：*
  • 类别选择器：.class
  • id选择器：#id
  • 标签选择器：p
  • 后代选择器：div p
  • 子选择器：div > p
  • 群组选择器：div , p
  • 相邻同胞选择器：div +p
  • 伪类选择器：:link :visited :active :hover :focus :first-child
  • 伪元素选择器：:first-letter :first-line:before :after :lang(language)
  • 属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

1七、CSS 有哪些样式能够给子元素继承

可继承：

  • 字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
  • 文本相关：letter-spacing, text-align, text-indent, text-transform, word-spacing
  • 列表相关：list-style-image, list-style-position, list-style-type, list-style 颜色：color

不可继承的通常是会改变盒子模型的:display,margin、border、padding、height等

1八、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内: input,span,a,img以及display:inline的元素
  • 块级: p,div,header,footer,aside,article,ul以及display:block这些
  • void: br,hr

1九、position的值， relative和absolute分别是相对于谁进行定位的？

-absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

  • fixed（老IE不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame进行定位。

-relative生成相对定位的元素，相对于其在普通流中的位置进行定位。

  • static 默认值。没有定位，元素出如今正常的流中

  • sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

20、CSS3有哪些新特性？

  • （1）边框：
border-radius：圆角边框，border-radius:25px;

box-shadow：边框阴影，box-shadow: 10px 10px 5px #888888;

border-image：边框图片，border-image:url(border.png) 30 30 round;
复制代码
  • （2）背景：
background-size：规定背景图片的尺寸，background-size:63px 100px;

background-origin：规定背景图片的定位区域，背景图片能够放置于 content-box、padding-box 
或 border-box 区域。background-origin:content-box;

CSS3 容许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
复制代码
  • （3）文本效果：
text-shadow：向文本应用阴影，能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
text-shadow: 5px 5px 5px #FF0000;

word-wrap：容许文本进行换行。word-wrap:break-word;
复制代码
  • （4）字体：CSS3 @font-face 规则能够自定义字体。
  • （5）2D 转换（transform）
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
transform: translate(50px,100px);

rotate()：元素顺时针旋转给定的角度。容许负值，元素将逆时针旋转。
transform: rotate(30deg);

scale()：元素的尺寸会增长或减小，根据给定的宽度（X 轴）和高度（Y 轴）参数。
transform:scale(2,4);

skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。
transform: skew(30deg,20deg);

matrix()： 把全部 2D  转换方法组合在一块儿，须要六个参数，包含数学函数，
容许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

复制代码
  • （6）3D 转换
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);

rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
复制代码

  • （7）transition：过渡效果，使页面变化更平滑

  • （8）animation：动画 使用CSS3 @keyframes 规则。

  • border-image

新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别以下：

  • content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right
复制代码

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom
复制代码
  • padding-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom
复制代码

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
复制代码
  • border-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)
复制代码

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
复制代码

2一、css3的新特性transform,transition,animation

1、transform

css3引入了一些能够对网页元素进行变换的属性，好比旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性

transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，若是将一个元素旋转45度，它其实是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。
复制代码

  • 旋转：transform:rotate(-45deg);

  • 缩放：transform:scale(.5);scaleX(2);scaleY(3)。若是给了负值，可以达到翻转的效果：scaleX(-1)

  • 移动：transform:translate(1px,2px).使用其余单位：em,%也是能够的。

  • 倾斜：transform:skew(45deg,0);

固然，以上多个tranform的属性能够结合使用；

transform-origin:通常来讲，当对一个元素使用transform时，web浏览器就会以元素的中心点做为变黄点。该属性能够指定变换点，能够提供关键字，以pixel为单位的绝对值，以及em,%等等。

2、transition

transition能够实现动态效果，其实是必定时间以内，一组css属性变换到另外一组属性的动画展现过程。

为了使transition生效，须要作这么几件事：
【1】两个样式：一个是最初的样式，一个是最终的样式，transition能够实现这两种演示见的转换过程。

【2】transition属性:
复制代码

transition使用4个属性控制：

  • 要以动画展现哪些属性（transition-property）:可使用all关键字

  • 动画过程有多久(transition--duration),

  • 控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），

  • 动画是否延迟执行（transition-delay）等

可使用快捷方法来定义上述属性：

.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc; 
}

复制代码

通常来讲，将transition属性应用到最初的样式里，而不是放在结束的样式里，即定义动画开始以前的元素外观的样式。只须要给元素设置一次transition，浏览器就会负责以动画展现从一个样式到另外一个样式，再返回最初样式的变化过程。

不过，在使用css下拉菜单的时候，有一个技巧，为了防止鼠标离开菜单的时候，菜单很快消失，能够利用transition-delay让元素很快显示，可是慢慢消失，作法是，在初始样式中添加以下代码：

transition-dealy:.5s
在：hover中不要添加延迟：

transition-delay:0
复制代码
【3】触发器：经常使用的触发器是几个伪类，`:active,:target,:focus`，也能够是先后两个类的改变。
复制代码

3、animation

transition只能从一组css属性变成另外一组css属性。animation则能够在多组属性之间变换。

transition必须使用触发器触发，animation可使用触发器，也能够在页面加载完成的时候自动触发。

建立动画有两个步骤：
1）.定义动画：主要指定义关键帧
复制代码
@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}
复制代码
2）.将动画应用到元素上
复制代码

可使用一下css属性定义动画：

.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
    animation-delay:.5s;
    animation-iteration-count:infinite;  
    animation-direction:alternate
}

复制代码
  • animation-name:和当初定义的动画名称相对应；
  • animation-duration：动画执行一次持续的时长； -animation-timing-function：动画速率变化函数；
  • animation-delay：动画延迟执行的时间长度；
  • animation-iteration-count：动画执行的次数，能够是数字，或者关键字：infinate(无限运行)；
  • animation-direction:alternate; - alternate(奇数次超前运行，偶数次后退运行).如但愿动画从黄色到蓝色，而且再重复一次，使用alternate关键字就可以防止从蓝色突变为黄色
  • animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。

2二、HTML5增长哪些新特性？

  • HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

  • 拖拽释放(Drag and drop) API

  • 语义化更好的内容标签（header,nav,footer,aside,article,section）

  • 音频、视频API(audio,video)

  • 画布(Canvas) API

  • 地理(Geolocation) API

  • 本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失；

  • sessionStorage 的数据在浏览器关闭后自动删除

  • 表单控件，calendar、date、time、email、url、search

  • 新的技术webworker, websocket, Geolocation

2三、浏览器渲染过程是怎样的？

  • HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
  • 在布局阶段，把DOM Tree和CSS Rule Tree通过整合生成Render Tree
  • 元素按照算出来的规则，把元素放到它该出现的位置，经过显卡画到屏幕上

2四、重排（Reflow）是什么？

定义：DOM中各个元素都有本身的盒子模型，须要浏览器根据样式进行计算，并根据计算结果将元素放到特定位置，这就是Reflow

触发Reflow的条件：
复制代码
  • 增、删、改、移DOM
  • 修改CSS样式
  • Resize窗口
  • 页面滚动
  • 修改网页的默认字体

2五、重绘（Repaint）是什么？

定义：当各类盒子的位置、大小以及其余属性改变时，浏览器须要把这些元素都按照各自的特性绘制一遍，这个过程称为Repaint。

触发Repaint的条件：
复制代码
  • DOM改动
  • CSS改动

2六、如何减小重绘、避免重排？

本质上，就是合并修改。具体的措施有：

  • DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的全部子孙节点，因此，将须要变更的DOM节点先汇总到DocumentFragment，而后一次性插入，能够减小DOM操做的次数。
  • CSS层面：操做多个样式时，能够先汇总到一个类中，而后一次性修改

2七、saas和less不一样于普通css的地方

  • 定义变量，能够把反复使用的css属性值定义成变量，而后经过变量名来引用它们，而无需重复书写这一属性值；
  • 嵌套写法，父子关系一目了然；
  • 使用运算符，能够进行样式的计算；
  • 内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；
  • 继承：为多个元素定义相一样式的时候，咱们能够考虑使用继承的作法；
  • Mixins （混入）：有点像是函数或者是宏，当某段CSS常常须要在多个元素中使用时，能够为这些共用的 CSS 定义一个Mixin，而后只须要在须要引用这些 CSS 地方调用该 Mixin 便可。

2八、meta标签

meta标签：提供给页面的一些元信息（名称/值对）， 好比针对搜索引擎和更新频度的描述和关键词。

name：名称/值对中的名称。经常使用的有author、description、keywords、generator、revised、others。 
把 content 属性关联到一个名称。

http-equiv：没有name时，会采用这个属性的值。经常使用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。

content： 名称/值对中的值， 能够是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一块儿使用。

scheme： 用于指定要用来翻译属性值的方案。
复制代码

2九、1. Xhtml和html的区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程