网页游戏中学到的知识

伪类选择器跟元素

: root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 HTML元素，除了更高之外，与 html 选择器相同。

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

背景渐变

设置背景颜色渐变

to right 设置颜色的方向，从左到右
其他的参数则是颜色的排布

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

flex弹性布局

在这里插入图片描述

display:flex布局

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex的常用属性：

flex-direction 容器内元素的排列方向(默认横向排列) row,column,row-reverse
flex-wrap 容器内元素的换行(默认不换行) nowrap(默认不换行)，wrap元素换行
justify-content 元素在主轴（页面）上的排列 center(主轴上居中)，flex-start(主轴上由左或者上开始排列)
align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

常见属性：
1. justify-content: center; 居中排列
2. justify-content: flex-start; 从行首起始位置开始排列
3. justify-content: flex-end; 从行尾位置开始排列
4. align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

display: flex;
justify-content: center;

overflow: hidden

当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。

#div1{
width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
}
#div2{
width: 100px;
height: 100px;
background: green;
float: left;
}

#div1{
    width: 200px;
    /*height: 50px;*/
    padding: 10px 20px 20px 10px;
    background: red;
    margin: 0 auto;
    <strong>overflow: hidden;</strong>
}

#div1{
    width: 200px;
    height: 50px;
    padding: 10px 20px 20px 10px;
    background: red;
    margin: 0 auto;
    overflow: hidden;
}

white-space

white-space: nowrap

<style type="text/css">
p
{
white-space: nowrap
}
</style>
</head>
<body>

<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>

</body>

text-overflow

当文本超过一定长度时,用特点的方式显示文本

text-overflow: clip|ellipsis|string

clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

.click()与on(‘click’,function())

$(选择器).click(fn)：

当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的。所以.click()无效

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件

**. $(document).on('click','要选择的元素',function(){})：** on方法包含很多事件，点击，双击等等事件。和$ ().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件

https://blog.csdn.net/zhouzy539/article/details/83117489

closet()方法

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('ul').css('background-color', 'red');
</script>
</body>
</html>

stop()方法

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>

<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>