css

2019-11-23

css：层叠样式表

定义如何显示HTML元素；

样式优先级

(!important覆盖任何声明)
内联样式1000
id选择器100
伪类选择器
属性选择器
class类选择器10
元素选择器1
通用选择器*

链接样式

a.link-未访问过正常链接；
a.visited-访问过后的链接；
a.hover-鼠标悬浮；
a.active-鼠标点击；
注意：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

盒子模型

用于封装html元素，由内到外分为content、padding、border、margin四部分；
标准盒子模型： width仅为content宽度大小；
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
IE盒子模型： width为内容、内边距和边框的宽度的总和；

overflow属性

visible、hidden、scroll、auto、inherit；

组合选择器

后代选择器：(div p)div的所有后代p元素；
子元素选择器：(div>p)div后的直接子元素p;
相邻兄弟选择器：(div+p)在div之后与div相邻的p兄弟元素；
后续兄弟选择器：(div~p)在div之后的所有p兄弟元素；

伪类

anchor: visited,link…;
first-child:
p>i:first-child p元素的直接后代i子元素，必须是第一个；
p:first-child i 作为第一个p元素的所有后代i元素；
lang伪类：
q:lang(no) {quotes: “~~“ “~~“;} 为lang属性名为“no”的q元素定义引号类型；

伪元素

first-letter
first-line
before
after

导航栏

竖直导航栏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

水平导航栏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
	top:0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

下拉菜单：

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
  ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#333;
  }
  
  li{
    float:left;
  }
  
  li a, .dropbtn
  {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
  }
  
  li a:hover, .dropdown:hover, .dropbtn
  {
    background-color:#111;
  }
  
  .dropdown
  {
    display:inline-block;
  }
  
  .dropdown-content
  {
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a
  {
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content
  {
    display:block;
  }
  
  </style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

悬浮提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
    /* 居中上/下方
    left:50%;
    margin-left:-60px;
    bottom:100%;
    // top:100%;
    */
    /*居中左右方
    left:105%;
    //right:105%;
    top:-5px;//padding值
    */
    /*初始位置
    top:50%:
    left:50%;
    */
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

图片廊

div.img类设置width，并且向左浮动(div盒子的宽度设置);
img标签中引入图片大小设置(在下一步存在的情况下没啥用);

div.img img设置标签内宽度width=100%，height=auto，表示图片适应div大小显示；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
      <img src="//static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg">
      <img src="//static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

</body>
</html>

图像拼合导航列表

设置背景位置，使用同一张图片的不同部分；
img标签src引入透明图片，在img类中定义background，引入图片url，定义初始位置；

导航：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('/images/img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('/images/img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('/images/img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/css/"></a></li>
  <li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>

属性选择器

选取具有特定属性名的HTML元素
[title=abc] title与abc相等；
[title~=abc] title中包含abc单词；
[title|=abc] title以abc开头，或有“-”连接，必须唯一；
[title*=abc] title中可拆分出abc单词；
[title$=abc] title以abc为结尾；

表单渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; 
  //确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

一般background-color都只包括padding以内的部分，而body为最外层框架，包括了margin，设置margin的时候是内部的margin？

计数器

body{ // 父级
  counter-reset:section;
}
h2:before { //在标题前插入计数
  counter-increment:section; //命名成组
  content: "Section " counter(section) ": "; // 计数内容
}

CSS3

border

border-radius 圆角半径:
4个值：从左上角开始顺时针；
3个值：左上角右上角和左下角右下角；
2个值：左上和右下右上和左下；
椭圆角：长半径/短半径；
box-shadow 边框阴影:
(阴影框距离原div的左相对距离上相对距离透明度颜色)
border-image 边框背景:
url() 缩放程度(数值越小图案越大) round/stretch

background

background-image 背景图片：
url(),url();
background-size 背景大小：
100% 100%; 全覆盖
background-origin 背景定位覆盖区域：
content-box;padding-box;border-box;
background-position 背景图片位置：
left bottom;
background-clip 背景裁剪属性：
content-box;padding-box;border-box;

渐变

background-image:
linear-gradient 线性渐变
linear-gradient(to derection,color1,color2); // 角度
linear-gradient(0-360deg,color1,color2); // 方向
linear-gradient(to derection,rgba(255,0,0,0),rgba(255,0,0,1)) // 0-1 完全透明-不透明
radial-gradient 径向渐变
radial-gradient (circle/ellipse, color1, color2, color3);

文本

text-shadow:水平阴影垂直阴影模糊距离阴影颜色；
box-shadow 可叠加；
text-overflow:clip/ellipsis; 文本溢出表现形式…/直接裁剪;
word-wrap:break-word; 强制文本换行;
word-break:keep-all/break-all; 单词拆分；

字体

@font-face
{
font-family:font-name;
src:url();
font-weight:bold;
…
}

2D

transform:
rotate(angle) : 绕中心点旋转angle角度；
translate(x,y) : 沿着x和y轴移动元素；
scale(x,y) : 宽度高度缩放x,y倍；
skew(x-angle,y-angle) : 绕x轴，y轴倾斜角度；
matrix() 旋转，缩放，移动（平移）和倾斜

3D

transform:
rotateX(angle) : 绕x轴朝页面内旋转度数；
rotateY(angle) : 绕y轴朝页面内旋转度数；
…

过渡动画

transition:变化属性1 时间1，变化属性2 时间2；
div 与 div:hover 需定义变化属性1 变化属性2

动画

@keyframes animation-name{
from {} //0%
to {} //100%
}
在元素上定义animation属性：animation-name 时间；

多列属性

将div内的内容分为多列；
column-count:列数；
column-gap：列间隙；
column-rule-*：width style color 两列间边框样式；
column-span：指定样式跨多少行(1|all)；
cloumn-width：指定列宽；

用户界面

resize:both;
overflow:auto; // 用户可自定义元素大小
box-sizing:border-box;
outline:2px solid red;
outline-offset:15px; // 外形修饰

图片

对img标签进行css设置：
缩略图：
border: 1px solid #ddd; // 加边框
border-radius: 4px; // 边框圆角
padding: 5px;
圆角图片：
border-radius: 5%; // 图片圆角
响应式图片：
img {
max-width: 100%;
height: auto;
}

按钮动画

波纹：

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s // 设置buttom:after的动画时限是0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s // 将buttom:active:after的动画时限设为0，即直接变换到当前状态；
                   // 当active消失，再以0.8的时限返回原始状态；
}

弹性盒子

以下记录在CSS中老混淆的属性；

position属性

position主要有4个值：static,fixed,relative,absolute;

<!DOCTYPE html>
<html>
<head>
<style> 
...
</style>
</head>
<body>

<div class="wrap">
<div class="content">
Hello World
</div>
<div>ok<div>
</div>

</body>
</html>

static

默认属性，表示没有定位，出现在正常流中，忽略top,bottom,left,right的影响;

.wrap
{
height: 200px;width: 200px;background-color: #ddd;
}
.content
{
height: 80px;width: 80px;background-color:yellow;left:20px;position:static;
}

static

fixed

以浏览器窗口为父参考元素，脱离文档流，不会随着浏览器窗口的滚动而滚动，不占据空间，会覆盖其他元素；

.wrap
{
height: 200px;width: 200px;background-color: #ddd;
}
.content
{
height: 80px;width: 80px;background-color:yellow;top:20px;left:20px;position:fixed;
}

fixed

relative

以自身在static情况下的标准位置为参考，top,bottom,left,right为-值则往相应方向移动，例如top为-向上，bottom为-向下，没有脱离文档流,仍占据原来的空间，会覆盖其他元素；

.wrap
{
height: 200px;width: 200px;background-color: #ddd;
}
.content
{
height: 80px;width: 80px;background-color:yellow;left:-20px;top:20px;position:relative;
}

relative

absolute

以最近的父结点为父参考元素（最外层参考html），相对定位，脱离文档流,会覆盖其他元素；

.wrap
{
height: 200px;width: 200px;background-color: #ddd;left:20px;top:20px;position:absolute
}
.content
{
height: 80px;width: 80px;background-color:yellow;left:10px;top:10px;position:absolute;
}

absolute

总结

fixed,absolute脱离文档流;除默认static外都会覆盖其他元素；

display

flex

弹性布局，用盒状模型提供最大的灵活性；Webkit内核浏览器为-webkit-flex;
有main axis主轴与cross axis交叉轴；
flex的6个属性：
flex-direction:主轴方向，即排列方向；
flex-wrap:如果一条轴线排列不下，如何换行；
flex-flow:(flex-direction)||(flex-wrap)
justify-content:项目在主轴上的对齐方式；
align-items:项目在交叉轴上的对其方式；
align-content:多根轴线的对齐方式；
项目的6个属性：
order：排列顺序;
flex-grow：相对于其他灵活的项目的放大比例,0;
flex-shrink:相对于其他的灵活项目的缩小比例,1；
flex-basis:项目的长度，在分配多余空间占据的主轴空间，auto；
flex:auto,none;
flex 属性是 flex-grow、flex-shrink 和 flex-basis;
align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性;
inline
block
none

清除浮动

float：left|right|none
浮动溢出：元素设置float属性则脱离了文档流，父级元素不能随float元素扩展，导致元素溢出到容器外；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.news {
  background-color: yellow;
  border: solid 1px black;
  }

.left {
  float: left;
  }

.right{
  float: right;
  }
</style>
</head>

<body>
<div class="news">
<span class="left">left text</span>
<span class="right">right text</span>
</div>
</body>
</html>

float

加一个空白的clear元素

// style加入
.clear{
    clear:both;
}
// div class=“news”中加入子元素
<div class="clear"></div>

优点：简单，兼容性好；缺点：无用元素；

父级元素自身设置float

可消除内部浮动，但是会破坏整体布局，不推荐；

父级元素设置属性overflow:hidden

将父级元素设置为BFC 会将内部float的盒子高度计算进去

.news {
  background-color: yellow;
  border: solid 1px black;
  overflow:hidden;
  }

使用邻接元素处理

在邻接元素的样式加入clear:both；

<div class="news">
<span class="left">left text</span>
<span class="right">right text</span>
<div class="content"></div>
</div>

加入伪类:after

在父元素末尾加入一个看不见的块元素;

// style加入
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
  
<div class="news clearfix">

实现元素的垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
			background-color:yellow;
			padding:0;
			margin:0;
        }
        .content {
            width: 300px;
            height: 300px;
			border:2px solid black;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="content">
	</div>
</body>
</html>

cross-center

父元素display设置为flex布局

align-items:center表示交叉轴上的项目居中显示；

html, body {
            width: 100%;
            height: 100%;
            background-color:yellow;
            padding:0;
            margin:0;
            display:flex;
            align-items:center;
        }

将该元素绝对定位

margin-top设置的值

.content {
            width: 300px;
            height: 300px;
            border:2px solid black;
            background-color: orange;
            margin:0 auto;
            position:relative;
            top:50%;
            margin-top:-150px;
        }

使用transform: translateY(-50%)

与上面方法类似，仅仅将margin-top方法改成translateY，意思是上移自身高度的一半；

html，body设置height为100%，margin:0,padding:0

css元素width若未设置，自动分配浏览器最大宽度，而height是由内容元素撑起的，此时父元素的高度依赖于子元素的高度；而当高度设置为百分比，则依赖于父元素，向上查找定高，如中途有一个高度未设置，或者为auto，则该元素的height百分比无效；设置最高层html，body的height为100%，即获取浏览器定高，后面的子元素也就有了依赖。

css外边距合并

外边距合并
垂直方向上，外部div未设置border或padding，使margin与内div的margin之间没有界限，因此合并选取较大的。

jQuery

是一个JavaScript库，可用以选取与操作HTML元素，css操作，DOM的遍历和修改；

选择器

元素，id，.class,属性….；
$(“p”),$(“#idname”),$(“.classname”),$(“[href]”)….

事件

鼠标：click,dbclick,mouseenter,mouseleave,hover;
键盘：keypress,keydown,keyup;
表单：submit,change,focus,blur;
文档/窗口事件：load,resize,scroll,upload;

效果

隐藏/显示：hide(),show(),toggle();
淡入/淡出：fadeIn(),fadeOut(),fadeToggle(),fadeTo();
滑动：slideDown(),slideUp(),slideToggle();
动画：animate({params},speed,callback);
停止动画：stop(stopAll,goToEnd)，默认(false,false)
stopAll=true表示清除动画队列，直接停止，再次点击开始则从当前位置开始；
为false则会完成队列中下一个动画；
goToEnd=true表示完成当前动画到结尾，
为false则停止不动；

与HTML相关

可获取和设置以下值：
text()文本内容；
html()元素HTML标记；
val()表单字段；
attr()属性值；
添加元素：
append()
prepend()所选元素内增加子元素；
after()
before()所选元素前后添加子元素；
删除元素：
remove()移除所选元素（包括该元素的子元素）；
empty()删除所选元素的所有子元素；
css操作：
addClass()
removeClass()
toggleClass()增加/删除某样式类；
css()设置或获取某样式属性值；

遍历

祖先：
parent()直接父元素；
parents()所有祖先元素；
parentUntil()介于某孩子到某祖先间的所有元素（不包括本身）；
后代：
children()直接子元素；
find()所有后代元素；
同胞：
siblings()所有同胞；
next()下一个同胞；
nextAll()接下来的所有同胞；
nextUntil()介于某个元素到另一个元素之间的所有同胞元素；

git-note

2019-10-17

分布式版本控制系统：不必联网，强大的分支管理；
通过跟踪版本库中所有文件（文本文件的改动情况）；

git add file 修改内容放到暂存区（stage）
git commit -m “des” 暂存区内容提交到当前分支
git status
git diff file / git diff HEAD – file 工作区与版本库里最新版本的区别

时光机穿梭

git log 显示从近到远的提交日志 / git reflog 记录每一次命令日志
版本回退：git reset –hard HEAD^|[commit_id]，HEAD为指向当前版本的指针，完全回到上一个版本

–hard 撤销commit add 并且删除工作区代码
–mixed 撤销commit add 工作区代码不变
–soft 撤销commit 不撤销add 工作区代码不变

git reset HEAD file 把暂存区修改撤销掉(unstage，add撤销)
git checkout – file 撤销工作区修改,一键还原

回退场景

git rm file 删除版本库中文件

远程仓库

使用ssh与github远程仓库关联
ssh安全机制，基于密钥的安全验证：
创建一对密钥，公钥放在服务器

客户端发送链接请求，将公钥传送给服务器
服务器收到密钥，与自身公钥进行比较
一致则使用公钥加密“质询”发送给客户端
客户端私钥解密，发送给服务器
完成登录

git remote add origin git@github.com:username/repo-name.git 本地库与远程仓库做关联
git push -u origin master 将本地库所有内容推送到远程库中(-u 关联分支)
git clone url 准备好远程库，克隆到本地库

分支管理

HEAD指针指向当前分支；

git checkout -b dev 创建分支(-b 并切换)：增加一个dev指针，HEAD指向dev;
git add . / git commit -m “des”
git checkout master 切换到master分支;
git merge dev 将dev分支合并到master上：将master指针改为dev;
git merge –no-ff dev 合并，不使用fast forward模式，master为新的指针

分支策略

git stash 将工作现场存储起来
git stash list 查看暂存列表
git stash pop 恢复
git stash apply stash@{0} 应用
git cherry-pick 把bug提交的修改“复制”到当前分支，避免重复劳动

多人协同开发：

git checkout -b dev origin/dev 创建远程origin的dev分支到本地
git branch –set-upstream-to=origin/ dev 本地与远程origin/的链接

多人协作

LeetCode

2019-10-13

leetcode刷题笔记

2019-10-09

STL set用法

特点：集合，元素唯一，对元素自动进行升序排序;
set s;

s.begin();
s.end();
s.insert(x); //插入x元素
s.erase(x);  s.erase(it) //删除x元素 ,it迭代器指向元素
s.find(x); //查找x元素,不存在则返回s.end()
s.lower_bound(x); //大于或等于x，得到定位器

22. 括号生成

暴力递归解法:得到n对”()”的全排列情况，验证平衡；
时间复杂度O(2^2n);

class Solution {
public:
    vector<string> result;
    
    // '('==1  ; ')'==-1
    bool vaild(int array[],int len){
        int res=0;
        for(int i=0;i<len;i++){
            res+=array[i];
            if(res<0)return false;
        }
        return (res==0);
    }
    
    void generate(int arr[],int pos,int len){
        if(pos == len){
            //判断是否有效
            if(vaild(arr,len)){
                //将数组转换为string
                string temp="";
                for(int i=0;i<len;i++){
                    if(arr[i]==1)temp+="(";
                    else temp+=")";
                }
                result.push_back(temp);
                // ncout<<result.size();
            }
        }
        else {
            arr[pos]=1;
            generate(arr,pos+1,len);
            arr[pos]=-1;
            generate(arr,pos+1,len);
        }
    }
    
    vector<string> generateParenthesis(int n) {
        int *arr=new int[2*n];
        generate(arr,0,2*n);
        return result;
    }
};

动态规划：初始状态为0的””,1的”()”，接下来的值根据前面得到的：(p组括号的所有可能情况)+q组括号的所有可能情况,其中p+q=n-1;

class Solution {
public:
    vector<string> generateParenthesis(int n) {
        vector<vector<string> >dp(n+1);
        dp[0]={""};
        dp[1]={"()"};
        if(n==1||n==0)return dp[n];
        for(int i=2;i<=n;i++){
            for(int j=0;j<i;j++){
                for(int x=0;x<dp[j].size();x++){
                    for(int y=0;y<dp[i-j-1].size();y++){
                        string res="("+dp[j][x]+")"+dp[i-j-1][y];
                        dp[i].push_back(res);
                    }
                }
            }
        }
        return dp[n];
    }
};

23.合并K个排序链表

最简单粗暴的链表操作：

原始k个链表已排好序；
在每个列表的表头筛选最小值，即结果链表的下一个值
更新获得最小值的当前链表的下一个值
重复第2步，循环直到所有k个链表到达结尾；

时间复杂度O(m*k),m为所有k个链表结点总数；额外的空间复杂度O(m);

/**
 * Definition for singly-linked list.
 * struct ListNode {
 *     int val;
 *     ListNode *next;
 *     ListNode(int x) : val(x), next(NULL) {}
 * };
 */
class Solution {
public:
    int findMin(vector<ListNode*>& lists){
        int len=lists.size();
        int min=99999999;
        int minindex=-1;
        for(int i=0;i<len;i++){
            if(lists[i]!=NULL && lists[i]->val<min){
                min=lists[i]->val;
                minindex=i;
            }
        }
        
        return minindex;//-1结束：所有链表都已遍历完成
    }
    
    ListNode* mergeKLists(vector<ListNode*>& lists) {
        ListNode *head=new ListNode(0);
        ListNode *pre=head;
        int pos=0;
        while((pos=findMin(lists))>=0){
            ListNode *newnode=new ListNode(lists[pos]->val);

            //找到最小下标，进行一定操作
            if(lists[pos]->next!=NULL)lists[pos]=lists[pos]->next;
            else lists[pos]=NULL;
        
            pre->next=newnode;
            pre=newnode;
        }
        return head->next;
    }
};

分治法:将链表两两合并（递归）;
时间复杂度:O(mlogk),空间复杂度O(1);

/**
 * Definition for singly-linked list.
 * struct ListNode {
 *     int val;
 *     ListNode *next;
 *     ListNode(int x) : val(x), next(NULL) {}
 * };
 */
class Solution {
public:
    ListNode* MergeTwoSortedList(ListNode* l1,ListNode* l2){
        if(l1==NULL){
            return l2;
        }
        if(l2==NULL){
            return l1;
        }
        if(l1->val <= l2->val){
            l1->next=MergeTwoSortedList(l1->next,l2);
            return l1;
        }
        l2->next=MergeTwoSortedList(l1,l2->next);
        return l2;
    }
    
    ListNode* mergeKLists(vector<ListNode*>& lists,int left,int right){
        //最小分治，左右边界相等
        if( left == right ){
            return lists[left];
        }
        int mid=(left+right)/2;
        ListNode* l1=mergeKLists(lists,left,mid);
        ListNode* l2=mergeKLists(lists,mid+1,right);
        return MergeTwoSortedList(l1,l2);
    }
    
    ListNode* mergeKLists(vector<ListNode*>& lists) {
        int len=lists.size();
        if(len==0)return NULL;
        ListNode* res=mergeKLists(lists,0,len-1);
        return  res;
    }
};

保研历程

2019-09-30

今天是9.30日，离填完系统已经过了2天，离浙大面试过了有5天了，还是觉得很难过，尤其在是社交网络上看到自己身边的人收获了一大堆的美好，就好像最后只有我，两手空空。不完满是人生的常态吧，这几个月以来的纠结和痛苦虽然没有一个很好的结果，但是并非没有意义，这个意义的量化就在于我在这次失败中吸取了怎样的教训，做出了多少的改变。

pat题型总结

2019-09-17

窗口排队模拟

eg1. 1017 Queueing at Bank (25 分)

题意：给出顾客数与窗口数，以及顾客的到达时间和处理时间；Bank的工作时间在8.-17.；在8.前到达需要等到8.后才开始办理，17.点及之后不办理，88了；计算平均等待时间；

软件工程复习

2019-09-14

软件危机

概念

在计算机软件开发、使用和维护过程中遇到的一系列严重问题和难题

产生的主要原因

软件规模越来越大，结构越来越复杂，开发管理困难，生产方式落后，开发工具落后

操作系统复习

2019-09-06

四大特性

并发：同一时间内多个程序执行,一个程序的执行尚未结束，另一个的程序执行已经开始；
并行(parallel)与并发(concurrentcy)的区别：
Read More...

PAT刷题笔记

2019-09-01

1001:Public Bike Management

题目大意：自行车数量管理，有一问题站点，解决问题求路径最短，并且让图中每一个站点的自行车数量都为c/2，outbikes最小，inbikes最小；

查找与排序

2019-08-31

查找算法

顺序查找

顺序查找又称线性查找。它的过程为：从查找表的最后一个元素开始逐个与给定关键字比较，若某个记录的关键字和给定值比较相等，则查找成功，否则，若直至第一个记录，其关键字和给定值比较都不等，则表明表中没有所查记录查找不成功，它的缺点是效率低下。

css：层叠样式表

样式优先级

链接样式

盒子模型

overflow属性

组合选择器

伪类

伪元素

导航栏

悬浮提示框

图片廊

图像拼合 导航列表

属性选择器

表单渲染

计数器

CSS3

border

background

渐变

文本

字体

2D

3D

过渡动画

动画

多列属性

用户界面

图片

按钮动画

弹性盒子

position属性

static

fixed

relative

absolute

总结

display

flex

inline

block

none

清除浮动

加一个空白的clear元素

父级元素自身设置float

父级元素设置属性overflow:hidden

使用邻接元素处理

加入伪类:after

实现元素的垂直居中

父元素display设置为flex布局

将该元素绝对定位

使用transform: translateY(-50%)

与上面方法类似，仅仅将margin-top方法改成translateY，意思是上移自身高度的一半；

html，body设置height为100%，margin:0,padding:0

css外边距合并

jQuery

选择器

事件

效果

与HTML相关

遍历

时光机穿梭

远程仓库

分支管理

STL set用法

窗口排队模拟

eg1. 1017 Queueing at Bank (25 分)

软件危机

概念

产生的主要原因

四大特性

1001:Public Bike Management

查找算法

顺序查找

图像拼合导航列表