收下这波总结😃

nanfeiyan
1,681 阅读6分钟

盒模型

标准盒模型和怪异盒模型

盒子模型众所周知，这里先简单介绍一下。

可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

[参考链接] www.cnblogs.com/yky-iris/p/…

垂直居中方法

  1. flex:
display: flex;
justify-content: center;
align-items: center;
  1. postion + transform: translate()
.outter{
    height: 500px;
    position: relative;
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. position + 负margin, inner宽高已知
.outer{
    position: relative;
}
.inner{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
  1. 子元素绝对定位, 上下左右都设置为0, + margin: auto inner宽高已知
.outter{
  height: 500px;
  position: relative;
}
.inner {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

三栏布局

  1. flex:
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

.container {
  width: 100%;
  height: 500px;
  display: flex;
}
.left {
  flex-basis: 200px;
  background: red;
}
.main {
  flex: 1;
  background: gray;
}
.right {
  flex-basis: 200px;
  background: green;
}
  1. position + margin
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

.container {
  width: 100%;
  position: relative;
}
.left, .right {
  position: absolute;
  top: 0;
  background: red;
  width: 200px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.main {
  background: gray;
  margin: 0 200px;
}
  1. float + margin (这种是需要改变dom的排列顺序的)
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
.container {
  width: 100%;
}
.left, .right {
  background: red;
  width: 200px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.main {
  background: gray;
  margin: 0 200px;
}

选择器权重计算方式

CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。 正常情况下，一般都能答出**!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承来的样式。**

如果层级相同，继续往后比较，如果层级不同，层级高的权重大，不论低层级有多少个选择器。

flex

  • 不能使用float与clear规则
  • 弹性元素均为块元素
  • 绝对定位的弹性元素不参与弹性布局

Flex 布局教程

你能说出下面每个属性的含义吗

父容器(容器):
(主轴方向)flex-direction: row | row-reverse | column | column-reverse
(换行方式)flex-wrap: nowrap | wrap | wrap-reverse
flex-flow属性是flex-direction属性和flex-wrap属性的简写
(主轴对齐方式)justify-content: flex-start | flex-end | center | space-between | space-around
(交叉轴的对齐方式)align-items: flex-start | flex-end | center | baseline | stretch
(多条轴线对齐方式)align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素(又叫项目的属性)
(在主轴上排列顺序前后)order: int (默认值为0)
(放大比例) flex-grow: (默认值为0)
(缩小比例) flex-shrink (默认值为1) 
基础尺寸 flex-basis 默认值为auto(auto指项目的本来大小)  可以指定大小列入 200px
(自己的对齐方式) align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex: 是 flex-grow, flex-shrink, flex-basis 默认值为: 0 1 auto
flex: auto === flex: 1 1 auto  
flex: none === flex: 0 0 auto

什么是BFC、可以解决哪些问题

BFC解释 : BFC

BFC的功能: 1. 使 BFC 内部浮动元素不会到处乱跑； 2. 和浮动元素产生边界。

BFC能解决的问题：

  1. 父元素塌陷
  2. 外边距重叠
  3. 清除浮动

清除浮动的方法

  1. 浮动元素的后面添加一个div,设置clear: both
<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}
  1. 给父元素添加overflow:hidden 触发父元素的BFC属性
<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
  1. 使用伪类clearfix
<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

position属性

  • absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。
  • relative 相对定位，相对于其自身正常位置进行定位。
  • fixed 固定定位，相对于浏览器窗口进行定位。
  • static 默认值。没有定位，元素出现在正常的流中。
  • sticky 这种是可以自动吸顶的
  • inherit 规定应该从父元素继承 position 属性的值。

如何实现一个自适应的正方形

  1. 利用CSS3的vw单位
.square {
    width: 10vw;
    height: 10vw;
    background: red;
}
  1. 利用padding的百分比计算(原理: 参照父元素的width)
.square {
    width: 10%;
    padding-bottom: 10%; (相对父元素宽度的百分比)
    height: 0; // 防止内容撑开多余的高度
    background: red;
}

手写一个jsonp

(function (window, document) {
    var jsonp = function (url, data, callback) {
      // 1.{id:1,name:'zhangsan'} => id=1&name=zhangsan
      var dataString = url.indexOf('?') === -1 ? '?' : '&'  
      for(var key in data) {
        dataString += `${key}=${data[key]}&`
      }
      var cbFunName = 'my_json_cb' + Math.random().toString().replace(',','')

      var scriptEle = document.createElement('script')
      scriptEle.src=`${url+dataString}callback=${cbFunName}`
      // 挂载回调函数
      window[cbFunName] = function (data) {
        callback(data)
        // 当拿到数据后就可以删除掉发送jsonp的script标签
        document.body.removeChild(scriptEle)
      }

      document.body.appendChild(scriptEle)
    }
    window.$jsonp = jsonp
  })(window, document)

节流防抖

节流throttle

防抖dobounce

git rebase 和 git merge 有啥区别？

rebase会把你当前分支的 commit放到公共分支的最后面,所以叫变基。就好像你从公共分支又重新拉出来这个分支一样

举例:如果你从 master 拉了个feature分支出来,然后你提交了几个 commit,这个时候刚好有人把他开发的东西合并到 master 了,这个时候 master 就比你拉分支的时候多了几个 commit,如果这个时候你 rebase master 的话，就会把你当前的几个 commit，放到那个人 commit 的后面。

merge 会把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

注意: 不要在公共分支使用rebase

参考链接: www.jianshu.com/p/4079284dd…

多进程, 前几年的Apache服务

多线程, -java 异步IO -js 协程

2xx 请求成功 200成功 201创建 202接受 203代理 206部分处理

3XX 重定向 302找到，重定向 304未修改

4xx 客户端错误 400请求内容错误 401无权限 403禁止访问 404你懂的

5xx 服务器错误 500服务器炸了 502网关炸了 503炸几分钟 504超时

npm run start 可以简写成 npm start

npm run test 可以简写成 npm test

注意别的需要加上run

vscode 快速生成vue模板 vbase+ tab键

avatar
文章
阅读
粉丝