Web Front End Basics Summary

CloudEmperor
427 阅读7分钟

一. CSS

  1. 说说盒模型类型及区别

  • IE盒子模型box-sizing:border-box;（怪异模式）

    特点：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

  • W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

    特点：盒子定义宽高 = 内容宽高（content）

  1. div垂直居中
//HTML
<div class="parent">
	<div class="child"></div>
</div>


//CSS
/*方法一：通过flex布局*/
html, body {
	margin: 0;
	padding: 0;
	height: 100%;  //高度必须设置，否则垂直方向不居中
}
div.parent {
	display: flex;
	height: 100%;  //高度必须设置，否则垂直方向不居中
	justify-content: center;
	align-items: center;
}
div.child {
	width: 200px;
	height: 200px;
	background-color: red;
}

/*方法二：绝对定位 + margin偏移*/

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
div.parent {
	position: relative;
	height: 100%;
}
div.child {
	width: 200px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px; //宽高的一半
	margin-left: -100px; //宽高的一半
}


/*方法三：绝对定位 + translate*/

div.child {
	width: 200px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  //50%参照自身宽高
}


/*方法四：绝对定位 + margin:auto*/

div.child {
	width: 200px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}


/*方法五：使用 grid 布局*/

div.parent {
	display: grid;  //父容器grid布局
	height: 100%;
}
div.child {
	justify-self: center;
	align-self: center;
	width: 200px;
	height: 200px;
	background-color: #0000FF;
}


/*方法六：伪元素*/

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}
  1. 文字单行显示/三行显示
/*1. 单行文本的溢出显示省略号，用text-overflow:ellipsis属性，同时注意加width来兼容部分浏览器*/
.textOVerFlow {
    width:100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

/*实现多行文本溢出显示省略号(适用于WebKit浏览器及移动端)*/
.textOVerChecked {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3; //要显示超出几行省略就设置数字几
    -webkit-box-orient: vertical
}
  1. 三栏布局的实现及优缺点

/*需求：假设已知高度，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适应*/
/*5种实现方式：浮动布局、绝对定位布局、flex布局、表格布局、网格布局*/
/*推荐使用：float布局、flex布局、grid网格布局*/

/*************************************************************************/
/*1.浮动布局*/
//优点：兼容性十分好
//缺点：元素浮动以后是脱离文档流的，若处理不好会带来问题

//HTML
<!-- 浮动解决方案 -->
  <section class="layout float">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>浮动解决方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
    </article>
  </section>
//CSS
 .layout article div {
      min-height: 100px;
    }
    /* 浮动布局========== start=================== */
    .layout.float .left {
      float: left;
      width: 300px;
      background: rosybrown;
    }

    .layout.float .right {
      float: right;
      width: 300px;
      background: royalblue;
    }

    .layout.float .center {
      background: yellow;
    }
    
/*************************************************************************/
/*2.绝对定位布局*/
//优点：快捷，配合js使用很快，不容易出问题
//缺点：布局是脱离文档流的，那下面的子元素也必须脱离文档流

//HTML
<!-- 绝对定位布局解决方案 -->
<section class="layout absolute">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>绝对定位方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>
//CSS
    .layout.absolute .left-right-center>div {
      position: absolute;
    }

    .layout.absolute .left {
      left: 0;
      width: 300px;
      background: rgb(44, 151, 212);
    }

    .layout.absolute .center {
      right: 300px;
      left: 300px;
      background: rgba(150, 22, 201, 0.5);
    }

    .layout.absolute .right {
      right: 0;
      width: 300px;
      background: springgreen;
    }

/*************************************************************************/
/*3.flex布局*/
//优点：比较完美，移动端基本使用flex布局
//缺点：没有太多问题

//HTML
<!-- flex布局解决方案 -->
<section class="layout flexbox">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>弹性布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

//CSS
    .layout.flexbox .left-right-center {
      display: flex;
    }

    .layout.flexbox .left {
      width: 300px;
      background: violet;
    }

    .layout.flexbox .center {
      flex: 1;
      background: lightblue;
    }

    .layout.flexbox .right {
      width: 300px;
      background: yellowgreen;
    }

/*************************************************************************/
/*4.表格布局*/
//优点：兼容性很好,三栏会同时增高和降低（也可能是缺点~）
//缺点：对SEO不友好，麻烦，操作有点繁琐

//HTML
<!-- 表格布局解决方案 -->
<section class="layout table">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>表格布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

//CSS
   	.layout.table .left-right-center {
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-right-center>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: lightslategray;
    }
    .layout.table .center{
      background: rgb(223, 19, 145);
    }
    .layout.table .right{
      width: 300px;
      background: mediumblue;
    }	


/*************************************************************************/
/*5.网格布局*/
//优点：可以做复杂的事，同时代码量也不多,是新技术
//缺点：基本没有

//HTML
<!-- 网格布局解决方案 -->
<section class="layout grid">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>网格布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

//CSS
   .layout.grid .left-right-center{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: rgb(44, 151, 212);
    }
    .layout.grid .right{
      background: rgb(197, 35, 17);
    }

二. JS

  1. 重绘和回流
一.浏览器渲染过程如下:
1.HTML代码转化成DOM Tree
2.CSS代码转化成CSSOM Tree（CSS Object Model）
3.结合DOM和CSSOM，生成一棵渲染树Render Tree
4.生成布局（flow），将所有渲染树进行平面合成（！此步骤再次触发即回流）
5.将布局绘制（paint）在屏幕上（！此步骤再次触发即重绘）

二.概念
重绘概念：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流概念：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

注：回流必将引起重绘，而重绘不一定会引起回流。

三. 哪些情况会发生重绘，回流？
1.页面初始渲染
2.改变字体，改变元素尺寸（宽、高、内外边距、边框，改变元素位置等
3..改变元素内容（文本或图片等或比如用户在input框中输入文字）
4.添加/删除可见DOM元素（注意：如果是删除本身就display:none的元素不会发生重排；visibility:hidden的元素显示或隐藏不影响重排）
5.fixed定位的元素,在拖动滚动条的时候会一直回流
6. 调整窗口大小（Resizing the window）
7.计算 offsetWidth 和 offsetHeight 属性

四.如何减少回流，重绘？
1.修改html元素中对应的class名，利用class替换样式
2.csstext（利用cssText属性合并所有改变，然后一次性写入）
3.display:none（隐藏元素，应用修改，重新显示）
4.cloneNode （将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换回去）
5.document.createDocumentFragment()；（使用文档片段（document fragment）在当前DOM之外构建一个子树，再插回去）
6.使用trsansform。相对而言使用transform实现的动画效果肯定比使用改变位置(margin-left等)这些更加流畅
avatar
文章
阅读
粉丝