前端（一）CSS篇

四叶草hhc
885 阅读29分钟

前言

本人是一名研究生，由于准备实习和秋招，所以整理一下前端的基础知识，帮助自己整理知识体系，理清知识点，系统的复习。

CSS篇

1、盒模型

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

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

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

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

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

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

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

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

BFC定义:

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

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…

4、Flex 弹性盒布局

CSS3弹性盒布局的理解：

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

容器的属性

  • 主轴的方向
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;

5、水平垂直居中

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

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.2、CSS居中布局有哪些，适用于什么场景，举例说明？

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

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

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

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

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

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

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

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

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

    • 做法：通过display:table-cell模拟表格单元格，这样就可以利用表格那很方便的居中特性了。
    • 场景：IE6、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、三栏布局

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

/* 浮动布局 */
  .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.2、圣杯布局

  • ① 特点

    比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是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.3、双飞翼布局

  • ① 特点

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

    <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.3、左右等高布局

table 布局就登场了

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

7、移动端粘连布局

  • 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、响应式布局，怎么做移动端适配

8.1、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.2、媒体查询（响应式)布局

移动端优先首先使用的是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.3、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.4、响应式布局的特点

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

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

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

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

用 padding-bottom 撑开边距就可以了。

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

10、如何实现一个三角形

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

11、如何实现一个扇形

<!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>

12、css解析顺序

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

13、css 如何开启 gpu 加速

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

14、清除浮动

常用的一般为三种 .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避免浮动造成的元素塌陷

15、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>

16、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]

17、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等

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

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

19、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)

21、css3的新特性transform,transition,animation

一、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,%等等。

二、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`，也可以是前后两个类的改变。

三、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:告诉浏览器将元素的格式保持为动画结束时候的样子。

22、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

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

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

24、重排（Reflow）是什么？

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

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

25、重绘（Repaint）是什么？

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

触发Repaint的条件：
  • DOM改动
  • CSS改动

26、如何减少重绘、避免重排？

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

  • DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的所有子孙节点，所以，将需要变动的DOM节点先汇总到DocumentFragment，然后一次性插入，可以减少DOM操作的次数。
  • CSS层面：操作多个样式时，可以先汇总到一个类中，然后一次性修改

27、saas和less不同于普通css的地方

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

28、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： 用于指定要用来翻译属性值的方案。

29、1. Xhtml和html的区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。
avatar
文章
阅读
粉丝