js学习笔记（二）网易微专业课程

网易微专业课程笔记

页面架构：

1、CSS Reset:要在写产品css之前写，重置元素的浏览器的默认样式。
2、布局解决方案：

	<div class="divs">
		<div class="con">DEMO</div>
	</div>

- 水平居中布局

方法1：

  .divs { text-align: center; } /* 水平居中 */
  .con { display: inline-block; } /* 内容有多宽，背景就有多宽 */

方法2

  .con { display: table; margin: 0 auto; }

方法3

  .divs { position: relative; } /*相对定位*/
  .con { position: absolute; /* 绝对定位，宽度由内容决定*/
          left: 50%;  /*左侧边居中*/
          transform: translateX(-50%); /*相对自身向左移50%*/
          } 

方法4

  .divs { display: flex; /*div中元素宽度为auto*/
          justify-content: center; /*水平居中*/
      }

方法5

  .divs { display: flex; /*div中元素宽度为auto*/
      }
   .con { margin: 0 auto; }

- 垂直居中布局

方法1

  .divs { height: 100%; position: relative; }
  .con { position: absolute;
          top: 50%;
          transform:translateY(-50%);}

方法2

  .divs { height: 1000px;
          display: table-cell;
          vertical-align: middle;
          }

方法3

  .divs { height: 1000px; display: flex; align-items: center; }

水平垂直居中

方法1

  .con { display: table; margin: 0 auto; }
       /*水平居中*/
   .divs { height: 1000px; display: flex; align-items: center; }
       /*垂直居中*/

方法2 ```css .divs { position: relative; height: 100%; } /相对定位/ .con { position: absolute; /* 绝对定位，宽度由内容决定/ left: 50%; /左侧边居中/ top: 50%; transform: translate(-50% ,-50%); /相对自身向左移50%*/ }

- 方法3
```css
           .divs { display: flex; /*div中元素宽度为auto*/
                    justify-content: center; /*水平居中*/
                    height: 1000px;
                    align-items: center;
                }

定宽与自适应

    <div class="con">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right1</p>
            <p>right2</p>
        </div>
    </div>

方法1

   .left {
              float:left;
              width: 100px;
              position: relative;
          } /*左定宽*/
  .right {
      margin-left: 120px;
  } /*右自适应*/
  .r-fix {
      float: right;
      width: 100%;
      margin-left: -100px;
  }

方法2

  .left {
      float: left;
      width: 100px;
      margin-right: 20px;
      }
  .right {
      overflow: hidden;
  }

方法3

  .con {
      display: table;
      width: 100%;
      table-layout: fixed;
  }
  .left,.right {
  display: table-cell;
  } /*变成水平的两个单元格*/
  .left {width: 100px; padding-right: 20px;} /*不能在table设置margin值*/

方法4

  .con {display: flex;}
  .left {width: 100px; margin-right: 20px;}
  .right {flex:1;} /*将剩下的空间全部占用*/

多列定宽方法：

  将定宽属性都设置成 class = left；自适应为 class = right；

等分布局解决方案

方法1 ```html

111

222

333

- 方法1
```css
.con { margin-left: -20px;} /*全部增加一个间距宽*/
.p { float: left;width: 25%;padding-left: 20px;box-sizing: border-box;}/*将等分和间距连起来*/

方法2

.con_fix {margin-left: -20px;}/*全局加一个间隔*/
.con {
display: table;
width: 100%;
table-layout: fixed;
}/*布局优先，加速渲染；使未设宽度的单元格平分屏幕*/
.p {
display: table-cell;
padding-left: 20px;
} /*单元格设置边距不能使用margin*/

方法3（笔记看不明白了啊！！回顾一下视频回去）

.con {display: flex;}
.p {flex:1;}
.p {margin-left: 20px;}
/*不用全局分配是由于flex的特性：将减去margin后的剩余空间平分*/

等高问题(笔记看不懂了！！看完视频再来补充！！！)

  方法1：table 单元格本身等高
  方法2：flex 自身等高，拉伸对齐
  方法3：float 伪等高

<div class="con">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="bottom">bottom</div>
    <div class="right">right</div>
</div>

.con {overflow: hidden}/*截到最高内容*/
.left,.right {
padding-bottom: -9999px;
margin-bottom: -9999px;
}
.left {
float:left;
width: 100px;
margin-right: 20px;
}
.right {overflow: hidden;}

全屏布局

方法1

<div class="con">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="bottom">bottom</div>
    <div class="right">
        <div class="in">right</div>
    </div>
</div>

html,body,.con {
height:100%;
overflow:hidden;
}
.top{ 
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100px;
}
.left {
position:absolute;
left: 0;
top: 100px;
bottom: 50px;
width: 200px;
}
.right {
position: absolute;
left: 200px;
right: 0;
top: 100px;
bottom: 50px;
}
.bottom {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 50px;
}
.right .in {min-height:1000px;}
.right{overflow: auto;} /*出现滚动条*/

方法2 ```html

top

left

right

bottom

```css
html,body,.con {
            height:100%;
            overflow:hidden;
        }
.con {
    display: flex;
    flex-direction: column; /*列的布局，默认为row*/
}
.top {height: 100px;}
.bottom {height: 100px;}
.middle {flex: 1;}/*中间占据全局的剩余区域*/
.left {width: 200px; float: left;}
.right {
    flex: 1;/*占据中间部分剩余区域*/
    overflow: auto;
}
.right .in {min-height: 100px;}

将固定数值变为百分比%即可根据屏幕变化调整上下左右侧边栏的大小

响应式

1、虚拟视窗概念

    <meta name="viewport"  //虚拟视窗
    content="width=device-width, //将viewport宽度设置为设备宽度
    initial-scale=1.0, //初始缩放为1.0，网页不被缩小
    user-scalable=no" /> //禁止触摸缩放

在自适应时要减少定宽的使用

2、媒体查询

    @media screen and (max-width:320px) {
        /*视窗宽度 < = 320px */
    }
    @media screen and (min-width:760px) {
        /*视窗宽度 > = 760px */
    }
    @media screen and (min-width:760px) and (max-width:1000px) {
     /* 760px < = 视窗宽度 < = 1000px */
    }

页面优化

1、减少请求

1、图片合并
2、减少css文件请求
    - 将多个css问价合并为一个
    - 少量css样式内联
    - 不使用import方式引入css文件
    - css值缩写，省略值为0的单位
    - 颜色值最短表示
    - css选择器合并
    - 压缩css文件（工具）

2、减小图片大小

1、选择合适的图片格式
2、压缩图片（压缩工具）
3、

3、页面性能

1、所有表现用css实现
2、图片不要有缩放（避免回流渲染）
3、尽量避免Hack

element.style.color = "red";
// 可以改为下面的形式更好一些
element.className = "a";
.a {color:red;}

网易微专业课程笔记

页面架构：

- 水平居中布局

- 垂直居中布局

水平垂直居中

定宽与自适应

等分布局解决方案

等高问题(笔记看不懂了！！看完视频再来补充！！！)

全屏布局

响应式

页面优化

FEATURED TAGS

FRIENDS