一百个Chocolate

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？

写作背景

女朋友要我教她CSS，于是我就折腾了一周，终于完成了这篇长文…

然后，然后？然后当我发布这篇文章的时候，她会感动到哭吗？

熟悉HTML知识

HTML常见元素

`head` 部分

`body`部分

doctype的意义是什么

让浏览器以标准模式渲染
让浏览器知道元素的合法性

HTML、XHTML、HTML5的关系

HTML属于SGML（标记语言）
XHTML属于XML，是HTML进行XML严格化的结果
HTML5不属于SGML或XML，比XHTML宽松

HTML5有什么变化

新的语义化元素
表单增强
新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
分类和嵌套变更

em和 i 有什么区别

em是语义化的标签，表强调
i 是纯样式的标签，表斜体
HTML5中 i 不推荐使用，一般用作图标

语义化的意义

开发者容易理解
机器容易理解（搜索、读屏、软件）
有利用SEO
semantic microdata（语义微数据）例电影有评分

哪些元素可以自闭合

表单元素 input
图片 img
br hr
meta link

HTML和DOM关系

HTML是“死”的（字符串）
DOM是由HTML解析而来的，是活的
JS可以维护DOM

property 和 attritube 区别

attritube 是“死”的
property 是活的
相互之间不会影响

form的好处

直接提交表单
使用 submit / reset 按钮
便于浏览器保存表单
第三方库可以整体取值
第三方库可以进行表单验证

CSS精华（Cascading Style Sheet）层叠样式表

选择器

用于适配HTML元素
分类和权重
解析方式和性能
值得关注的选择器

选择器分类

元素选择器 a{}
伪元素选择器 ::before{}
类元素选择器 .link{}
属性选择器 [type=radio]{}
伪类选择器 :hover{}
ID选择器 #id{}
组合选择器 [type=checkbox] + label{}
否定选择器 :not(.link){}
通用选择器 *{}

选择器权重（1）

ID选择器 #id{}+100
类属性伪类 +10
元素伪元素 +1
其它选择器 +0

例子：计算一个不进位的数字

#id.link a[href]
————————————————
计算过程：
#id +100
.link +10
a +1
[href] +0
结果:111

#id .link.active
————————————————
计算过程：
#id +100
.link +10
.active +10
结果:120

那么，我们怎么理解 不进位的数字 这关键字眼呢？用一个简单例子吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">蓝色</div>
    <div class="test2">蓝色</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">红色</div>
</body>
</html>

结果如下图所示：

不妨发现，最后一个 div，尽管我们类选择器有11个，加起来有110，但是依旧没有 id 选择器优先级高，正是因为这个不进位的数字，简单说：你大爷还是你大爷！

选择器权重（2）

!important 优先级最高
元素属性优先级高
相同权重后写的生效

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        .test1{
            color: red;
        }
        .test1{
            color: blue;
        }
        .test2{
            color: red!important;
        }
        .test2{
            color: blue;
        }
        #test3{
            color: red;
        }
    </style>
</head>
<body class="body" id="body">
    <div class="test1">蓝色</div>
    <div class="test2">红色</div>
    <div id="test3" style="color: blue;">蓝色</div>
</body>
</html>

运行结果如下图所示：

非布局样式

字体

字体族例如: serif、monospace（不能添加引号）衬线字体
多字体fallback 例如： “monaco”、“Microsoft Yahei”、“PingFang SC”
网络字体、自定义字体
iconfont

行高（经典问题）

行高的构成（由line-box组成，line-box由inline-box组成）
行高相关的现象和方案（可以通过设置 line-height来实现垂直居中效果）
行高的调整

经典问题：图片下面有空隙，原理是什么？怎样去除？

原理是因为图片按照 inline 进行排版，排版的时候会涉及到字体对齐，默认按照 baseline 对齐，baseline和底线之间是有偏差的，偏差大小是根据字体大小而定，如果是12px字体大小，则图片空隙就是3px左右。这就是经典图片3px空隙问题。

解决方式：

由于默认按照baseline对齐，不妨将 vertical-align 设为 bottom，按照底线对齐。
设置 display:block 可以解决该问题，但是会独占一行，如下图所示：

背景

背景颜色
渐变色背景
多背景叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变色背景（线性梯度）</title>
    <style>
        .div1{
            height: 90px;
        }
        .div2{
            height: 90px;
            /*background: linear-gradient(to right,red,green);*/
            /*background: linear-gradient(180deg,red,green);*/
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%);*/
            
            /*网格线*/
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

最后一个例子展示效果：

背景图片和属性（雪碧图）

background-repeat: no-repeat;
background-size: 30px 30px; //相对于容器偏移
background-position: 30px 30px;

雪碧图 就是将很多个图片进行拼接成一个图片，然后通过 background-position等属性进行偏移，在网页中得到对应图片，来达到减少http请求。

base64和性能优化

将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 1/3 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标icon，例如loading文件等。最后，在开发环境一般不采用直接将图片进行 base64 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。

一般情况下，是在生产环境下，通过打包的方式，将小图片进行 base64编码。
多分辨率适配

边框（经典问题）

边框的属性：线型大小颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            /*border: 5px solid red;*/
            /*border: 5px dotted red;*/
            /*border: 5px dashed red;*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

边框背景图

经典问题：九宫格问题，例如下面图片，我们如果想要实现9个不同形式，然后中间放内容，如果用原本9个div方法，那么会非常麻烦，而css3提供了 border方式可以解决上述问题。

在没有在 border-image处设置 round之前，是如上效果，后面 30 是用来切出四个角。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

在 border-image处设置 round之后，是如下效果，基本达到我们想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c2{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round将图片进行整数个拼接*/
        }
    </style>
</head>
<body>
    <div class="c2"></div>
</body>
</html>

边框衔接（三角形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .c3{
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>

实现三角形，效果如下：

滚动

产生滚动的原因：当内容比容器多的时候，即容器装不下内容的时候，就需要滚动。滚动主要包括如下几个方面：

滚动行为和滚动条

overflow 设置auto 和 scroll 区别，auto 是内容多于容器时显示滚动条，反正，不显示。而 scroll 是一直显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动</title>
    <style>
        .div1{
            background: red;
            height: 200px;
            overflow: scroll;  /*可选值: hidden visible auto scroll*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</body>
</html>

文字折行（经典问题）

overflow-wrap（word-wrap）通用换行控制（是否保留单词）
word-break 针对多字节文字（中文句字也是单词）
white-space 空白处是否断行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字折行</title>
    <style>
        .div1{
            border: 1px solid;
            width: 8em;
            overflow-wrap: normal;
            word-break: normal;
            white-space: normal;
        }
    </style>
</head>
<body>
    <div class="div1">
        学如逆水行舟，不进则退！Learning is like sailing against the current, retreating if not advancing
    </div>
</body>
</html>

展示效果:

经典问题：怎么让一个很长的文本不换行？

将上述属性设置为 nowrap即可

white-space: nowrap;

装饰性属性

字重（粗体）font-weight
斜体 font-style:itatic
下划线 text-decoration
指针 cursor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-weight</title>
    <style>
        .div1{
            font-weight: normal; /*400*/
            font-weight: bold;   /*700*/
            font-weight: bolder;
            font-weight: lighter;
            font-weight: 100;
        }
    </style>
</head>
<body>
    <div class="div1">学如逆水行舟，不进则退！</div>
</body>
</html>

CSS Hack（了解）

hack

用来处理浏览器兼容性做法，好处就是简单粗暴。

Hack即不合法但生效的写法
主要用于区分不同浏览器
缺点：难理解难维护难失效
替代方案：特性检测（检测浏览器是否有相关特性，没有的话就针对性处理）
替代方案：针对性加class（例如检测到 IE6，那么就加IE6的class）

CSS 面试真题

css样式（选择器）的优先级

计算权重确定
!important
内联样式
后写的优先级高

雪碧图的作用

雪碧图 就是将很多个图片进行拼接成一个图片，然后通过 background-position等属性进行偏移，在网页中得到对应图片，来达到减少http请求，提高页面加载性能。
有一些情况下可以减少图片大小（例如png格式图片，每张图片颜色基本上一样的，有可能总的图片大小是小于每个图片加起来的大小的）

自定义字体的使用场景

宣传 / 品牌 / banner 等固定文案
字体图标（将文字变为图标）

base64的作用

将图片进行base64编码后，就是一个字符文本，缺点之一就是图片的体积会增大 1/3 左右，并且放入css文件中，也会导致css文件变大。另外，虽然能减少http请求，但增大了解码的开销。适用于小图标icon，例如loading文件等。最后，在开发环境一般不采用直接将图片进行 base64 编码，因为对于协同开发来说，无法知晓图片原样，只有一个文本。

用于减少http请求
适用于小图片
base64的体积约为原图的 4/3

伪类和伪元素的区别？

伪类表状态（某元素是个链接 link状态）
伪元素是真的有元素（::before{}，在页面中会显示内容）
前者使用单冒号，后者使用双冒号

如何美化checkbox

label [for] 和 id
隐藏原生 input（所有的样式由 label 来搞定）
:checked + label

CSS 布局

CSS体系知识的重中之重

早期以 table 为主（简单）
后来以技巧性布局为主（难）
现在有 flexbox / grid（偏简单）

常用布局方式

table表格布局
float 浮动+ margin
inline-block 布局
flexbox 布局

布局方式（表格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table布局</title>
    <style>
        .table{
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
        .left{
            background: red;
            vertical-align: middle;
        }
        .right{
            background: blue;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">left</div>
            <div class="right table-cell">right</div>
        </div>
    </div>
</body>
</html>

展示效果如下图所示：

display / position（经典问题）

display 常用属性值： block（块级） / inline（内联） / inline-block（对内表现为block，可以有宽高，对外表现为inline，可以与其它元素排在同一行）
position 常用属性值：static（静态） / relative（相对） / absolute（绝对） / fixed（固定）

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        .block{
            height: 200px;
            background: red;
        }
        .inline{
            display: inline;
            background: green;
        }
        .inline-block{
            display: inline-block;
            width: 200px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="block">
        block
    </div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
</body>
</html>

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <style>
        .p1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .p2{
            position: relative;
            width: 100px;
            height: 100px;
            left: 20px;
            top: -10px;
            background: blue;
        }
        .p3{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 80px;
            top: 30px;
            background: yellow;
        }
        .p4{
            position: fixed;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 10px;
            background: green;
        }
        .p5{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="p1">position:static</div>
    <div class="p2">position:relative</div>
    <div class="p3">position:absloute</div>
    <div class="p4">position:fixed</div>
    <div class="p5">no position</div>
</body>
</html>

展示效果如下：

由上图可知，当设置 position 为 relative 后，no position（粉色块）并没有在蓝色块下面，也就是说设置 position 为 relative 后，占据空间还是按照原来的方式计算的，不会因为偏移而改变布局的计算。

经典问题：

绝对定位 absolute，会优先查找父级定位为 absolute 或 relative的进行定位，如果父级没有，找上级，那么最终就会根据 body进行定位，它和 fixed一样，也是脱离了文档流。
fixed相对于屏幕进行定位

层叠问题 ，因为默认会根据先后顺序显示，因此会有覆盖情况，此时，可以通过设计 z-index 解决，权重越大，优先显示。

flexbox（圣杯布局）

弹性盒子
盒子本来就是并列的
指定宽度即可
移动端常用

（目前用的不是很热的原因是虽然简单方便，但是兼容性有点问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            display: flex;
            border: 1px solid black;
        }
        .flex{
            background: blue;
            flex: 1;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
        <div class="flex">flex</div>
    </div>
</body>
</html>

展示效果如下：

由这个很方便的布局，我们可以写一个圣杯布局的例子（即左右固定，中间自适应）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局-flexbox</title>
    <style>
        *{
            margin: 0;
        }
        .container{
            min-height: 200px;
            display: flex;
        }
        .left{
            width: 200px;
            display: flex;
            background: red;
        }
        .center{
            background: yellow;
            flex: 1;
        }
        .right{
            width: 200px;
            display: flex;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

float

元素"浮动"
脱离文档流（不会对其它元素的布局造成影响）
但不脱离文本流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float布局</title>
    <style>
        .container{
            width: 400px;
            background: red;
        }
        .p1{
            width: 200px;
            height: 80px;
            float: left;
            background: pink;
        }

    </style>
</head>
<body>
    <div class="container">
        <span class="p1">float元素</span>
        <div class="p2">很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字</div>
    </div>
</body>
</html>

展示效果如下：

float 特性的影响（经典问题）

float 特性对自己的影响：

形成块（BFC，可以使得inline元素能够设置宽高，例如上文代码，原本span元素不能设置宽高的，但通过设置float布局，使得可以设置宽高）
位置尽量靠上
位置尽量靠左（右）（对于上述解释，是如果 container宽度够的话，就尽量靠上和靠左，如果不行的话，就往下排了）

简单例子：

float 特性对兄弟的影响：

上面贴非 float 元素
旁边贴 float 元素
不影响其它块级元素位置（不脱离文档流）
影响其它块级元素内部文本（脱离了文本流）

float 特性对父级的影响：

从布局上 “消失”（父级不会管它的宽高）
经典问题：高度塌陷（假设float元素，原本是 100px 高度，这个时候很期望父级能撑开100个像素，但因为设置了 float，等于消失了，并不会在意这 100个像素，因此，如果没有其它元素支撑高度的话，父级的高度就会设置为0，这就是高度塌陷）

清楚浮动的方式

经典问题：

清除浮动的方式

① 当我们设置为 float 后，会将元素设为 BFC，接管自己的宽高，因此我们也可以让父级元素设置为 BFC，来接管自己的宽高。

初始状态：

在父级元素设置 overflow: auto/hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮动</title>
    <style>
        .container{
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>

最终状态效果图如下：

② 由于 float 不脱离文档流（不会影响其它元素布局），那么就可以使得元素刚好到达下面位置。就可以通过其它元素将父级撑起来，当父级刚好撑到下方位置时，就可以将浮动清除掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮动</title>
    <style>
        .container{
            background: red;
            width: 400px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
        .removeFloat::after{
            content: 'aaa';
            clear: both; /*保证当前元素左右没有浮动元素*/
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container removeFloat">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>

经典清除浮动方式，效果图如下：

float（圣杯布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局-float</title>
    <style>
        .container{
            min-height: 200px;
        }
        .left{
            float: left;
            background: red;
            width: 200px;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background: yellow;
        }
        .right{
            float: right;
            background: blue;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
        
    </div>
</body>
</html>

展示效果如下：

inline-block 布局

像文本一样排block元素
没有清楚浮动等问题
需要处理间隙

例如下图，红蓝之间有一个间隙，是因为 inline-block就像文本一样，我们没办法让两个字紧紧地挨着，于是我们就有了下文所述解决方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline-block布局</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            font-size: 0;
        }
        .left{
            font-size: 15px;
            background: red;
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .right{
            font-size: 15px;
            background: blue;
            display: inline-block;
            width: 500px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

展示效果如下：

查看上述代码，将父级元素字体大小设置为0即可解决间隙问题，但子元素需要设置自己的字体大小，不然就不会显示。

因此，做自适应方面会有点麻烦，不像上文 float+margin 那样简单

响应式设计和布局

在不同的设备上正常使用
一般处理屏幕大小问题
主要方法：隐藏 + 折行 + 自适应空间（rem：通过html的字体大小（即 font-size）来确定元素大小，但不太精确 / viewport：通过 js或手工确定整个界面放到多大 / media query：媒体查询，根据不同的设备来匹配不同的样式）

下图含义就是只有在宽度小于 640px 时才会生效，即让移动端进行适配。

CSS 面试真题

实现两栏（三栏）布局的方法

表格布局
float + margin 布局（兼容性好）
inline-block 布局（需要处理间隙问题）
flexbox布局（简单，但兼容性不是很好）

position:absolute / fixed 有什么区别？

经典问题：

绝对定位 absolute，会优先查找父级定位为 absolute 或 relative的进行定位，如果父级没有，找上级，那么最终就会根据 body进行定位，它和 fixed一样，也是脱离了文档流。
fixed相对于屏幕（viewport）进行定位

层叠问题 ，因为默认会根据先后顺序显示，因此会有覆盖情况，此时，可以通过设计 z-index 解决，权重越大，优先显示。

display:inline-block 的间隙

原因：字符间距
解决：消灭字符（把标签写在一起或者添加注释）或者消灭间距（将font-size设为0）

如何清除浮动？为什么要清除浮动？

原因：浮动的元素不会占据父元素的布局空间，也就是父级元素不会管浮动元素，有可能浮动元素会超出父元素，从而对其它元素产生影响。

经典问题：

清除浮动的方式

① 当我们设置为 float 后，会将元素设为 BFC，接管自己的宽高，因此我们也可以让父级元素设置为 BFC，来接管自己的宽高。

初始状态：

在父级元素设置 overflow: auto/hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮动</title>
    <style>
        .container{
            background: red;
            width: 400px;
            overflow: auto;
            margin: 10px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>

最终状态效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清楚浮动</title>
    <style>
        .container{
            background: red;
            width: 400px;
        }
        .p1{
            background: pink;
            float: left;
            width: 200px;
            height: 50px;
        }
        .removeFloat::after{
            content: 'aaa';
            clear: both; /*保证当前元素左右没有浮动元素*/
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="container removeFloat">
        <span>xxxxxx</span>
        <span class="p1">float</span>
        <span class="p1">float</span>
    </div>
    <div class="container" style="height: 200px; background: blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>

经典清除浮动方式，效果图如下：

如何适配移动端页面？

主要方法：隐藏 + 折行 + 自适应空间（rem：通过html的字体大小（即 font-size）来确定元素大小，但不太精确 / viewport：通过 js或手工确定整个界面放到多大 / media query：媒体查询，根据不同的设备来匹配不同的样式）

效果属性（CSS最出彩的一部分）

box-shadow

属性值介绍：前两个是偏移量，第三个是模糊区域度，第四个是拓展区域度，第五个是颜色（最后一个是透明度）

box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);

text-shadow

立体感
印刷品质感

border-radius

圆角矩形
圆形
半圆 / 扇形
一些奇怪的角角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-radius</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

展示效果如下：

background

纹理、图案
渐变
雪碧图动画
背景图尺寸适应

clip-path

对容器进行裁剪
常见几何图形
自定义路径

3D-transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D-transform</title>
    <style>
        .container{
            margin: 50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px;
        }
        #cube{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition: transform 1s;
        }
        #cube:hover{
            transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
        }
        #cube div{
            width: 200px;
            height: 200px;
            position: absolute;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
        }
        .front{
            background: rgba(255, 0, 0, .3);
            transform: translateZ(100px);
        }
        .back{
            background: rgba(0, 255, 0, .3);
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background: rgba(0, 0, 255, .3);
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background: rgba(255, 255, 0, .3);
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background: rgba(255, 0, 255, .3);
            transform: translateY(-100px) rotateX(-90deg);
        }
        .bottom{
            background: rgba(0, 255, 255, .3);
            transform: translateY(100px) rotateX(90deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>
</html>

展示效果图如下：

CSS 面试真题

如何用div画一个 xxx

box-shadow 无限投影
::before
::after

如何产生不占空间的边框

box-shadow
outline

如何实现圆形元素（头像）

border-radius:50%

如何实现iOS图标的圆角

clip-path：(svg)

如何实现半圆、扇形等图形

border-radius 组合：有无边框、边框粗细、圆角半径

如何实现背景图居中显示 / 不重复 / 改变大小

background-position
background-repeat
background-size（cover / contain）

如何平移 / 放大一个元素

transform:translateX(100px)
transform:scale(2)
transform本身与动画没有关系

如何实现3D效果

perspective:500px（指定透视角度）
transform-style:preserve-3d;（3d效果）
transform:translate rotate …

CSS 动画

动画的原理

视觉暂留作用：就是说看到的画面，会在脑海中保留一段片段
画面逐渐变化

动画的作用

愉悦感
引起注意
反馈（输入密码错误时，登录框晃动）
掩饰

CSS中动画的类型

transition 补间动画（从一个状态到另一个状态，状态切换之间是有动画的）
keyframe 关键帧动画（指定的每一个状态就是一个关键帧）
逐帧动画（跳动）

transition 补间动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition补间动画</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            transition: width 1s, background 2s;
        }
        .container:hover{
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

展示效果如下：

动画进度与时间的关系

例子：

推荐：动画进度与时间关系模拟网站

关键帧动画

相当于多个补间动画
与元素状态的变化无关
定义更加灵活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframe关键帧动画</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s;
            animation-direction: reverse;
            animation-iteration-count: infinite;
            /*animation-fill-mode: forwards;*/
            /*animation-play-state: paused;*/
        }
        @keyframes run {
            0%{
                width: 100px;
            }
            100%{
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

展示效果：

逐帧动画

属于关键帧动画特殊的一种
适用于无法补间计算的动画
资源较大
使用 steps() （设置关键帧之间有几个画面，一般设置为1,也可以说是将关键帧去掉补间）

例如：一个动物跑动的过程，通过将每个动作的图片逐帧显示，形成动画的感觉。

CSS 面试真题

CSS 动画的实现方式有几种

transition
keyframes（animation）

过渡动画和关键帧动画的区别

过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细

如何实现逐帧动画

使用关键帧动画
去掉补间（steps）

CSS动画的性能

性能不坏
部分情况下优于JS
但JS可以做的更好
部分高危属性（例如 box-shadow等）

CSS 预处理器

基于CSS的另一种语言
通过工具编译为CSS
添加了很多CSS不具备的特性
能提升CSS文件的组织

常见的有 less（基于node写的，编译比较快，入门简单）和 sass（基于Ruby写的）

嵌套反映层级和约束
变量和计算减少重重复代码
Extend 和 Mxxin 代码片段
循环适用于复杂有规律的样式
import CSS 文件模块化

less嵌套

全局安装 less

npm install less -g

创建一个 test.less 文件

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background: red;
        }
    }
}

在该文件处调用终端，执行以下命令：

lessc test.less

输出结果：

执行如下命令，输出到 test.css 文件中

lessc test.less > test.css

查看 test.css 文件，得到如下结果：

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass嵌套

全局安装 sass

cnpm install node-sass -g

创建一个 test.scss 文件

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background: red;
        }
    }
}

执行如下命令，查看输出结果：

node-sass test.scss

执行如下命令，输出到 test-scss.css 文件中

node-sass test.scss > test-scss.css

查看 test-scss.css 文件，得到如下结果：

body {
  padding: 0;
  margin: 0; }

.wrapper {
  background: white; }
  .wrapper .nav {
    font-size: 12px; }
  .wrapper .content {
    font-size: 14px; }
    .wrapper .content:hover {
      background: red; }

从以上代码来看，sass嵌套会保留原来嵌套样式，对于css观赏性来说，并不是我们特别想要的，于是我们可以执行如下命令，更改输出样式：

node-sass --output-style expanded test.scss > test-scss.css

输出结果就和less嵌套一样了，读者可以自己跑一遍！

less变量

创建 variable-less.less 文件

@fontSize: 12px;
@bgColor: red;

body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize+2px;
        &:hover{
            background: @bgColor;
        }
    }
}

创建 variable-less.css 文件，执行如下命令：

lessc variable-less.less > variable-less.css

可以得到如下代码：

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass变量

类似less变量，只需要将 @ 改为 $ 即可，因为 less 变量命名这样做，是更贴近CSS。而 sass是为了区别CSS。

less mixin

创建 mixin.less 文件，复制如下代码：

@fontSize: 12px;
@bgColor: red;

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        .block(@fontSize);
    }
    .content{
        .block(@fontSize+2px);
        &:hover{
            background: @bgColor;
        }
    }
}

创建 mixin-less.css 文件，执行如下代码：

lessc mixin.less > mixin-less.css

查看mixin-less.css 文件，发现 .block 没有了，在CSS内部就完成了样式复用。

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}

sass mixin

创建 mixin.scss 文件，复制如下代码：

$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize){
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten($bgColor,40%);
    .nav{
        @include block($fontSize);
    }
    .content{
        @include block($fontSize+2px);
        &:hover{
            background: $bgColor;
        }
    }
}

创建 mixin-sass.css 文件，执行如下代码：

node-sass --output-style expanded mixin.scss > mixin-sass.css

查看mixin-sass.css 文件，发现 .block 没有了，在CSS内部就完成了样式复用。

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  background: #ffcccc;
}

.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.wrapper .content:hover {
  background: red;
}

总结：从上文对比来看，sass mixin 除了调用变量符号要换为 $ 外，抽离公共样式需要使用 @mixin ，此外，调用时还需要使用 @include 。

那么，mixin还能做什么呢？

例如，对于布局方面，我们在上文提到了清楚浮动的方式，那么，我们就可以将这段样式进行复用，只需要在需要的元素处引用即可。

less extend

上文提到过的，使用过 less mixin 抽离之后，我们可以得到如下代码，但是呢，又会有一个小问题，就是我们会有重复样式代码。在生产环境下，就会有大量这样的形式出现，这就会影响到我们的CSS体积了。

一种比较好的方式，如下，我们再讲公共样式代码进行抽离，这显然会降低我们的CSS体积。

因此，extend就发挥了它的作用

创建 extend-less.less 文件，复制如下代码：

@fontSize: 12px;
@bgColor: red;

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten(@bgColor,40%);
    .nav{
        &:extend(.block);
    }
    .content:extend(.block){
        &:hover{
            background: @bgColor;
        }
    }
}

创建 extend-less.css 文件，执行如下代码：

lessc extend-less.less > extend-less.css

查看 extend-less.css 文件，发现代码体积相对减少了。

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .content:hover {
  background: red;
}

总结：mixin 和 extend 区别， mixin 能处理一些复杂逻辑，比如添加变量，但会导致体积增大问题。而 extend的话，是将选择器提取出来，更加简单，不适合处理复杂逻辑，能将体积进行一定减少。

sass extend

创建 extend-sass.scss 文件，复制如下代码：

$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
body{
    padding: 0;
    margin: 0;
}
.wrapper{
    background: lighten($bgColor,40%);
    .nav{
        @extend .block;
    }
    .content{
        @extend .block;
        &:hover{
            background: $bgColor;
        }
    }
}

创建 extend-sass.css 文件，执行如下代码：

node-sass --output-style expanded extend-sass.scss > extend-sass.css

查看 extend-sass.css 文件，发现代码体积相对减少了。

.block, .wrapper .nav, .wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  background: #ffcccc;
}

.wrapper .content:hover {
  background: red;
}

less loop

创建 loop-less.less 文件，复制如下代码

.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);

创建 loop-less.css 文件，执行如下代码：

lessc loop-less.less > loop-less.css

查看 loop-less.css 文件，发现有12个样式

.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}

sass loop

创建 loop-sass.scss 文件，复制如下代码：

@mixin gen-col($n){
    @if $n > 0 {
        @include gen-col($n - 1);
        .col-#{$n}{
            width: 1000px/12*$n;
        }
    }
}

@include gen-col(12);

创建 loop-sass.css，执行如下代码：

node-sass --output-style expanded loop-sass.scss > loop-sass.css

查看 loop-sass.css 文件，发现有12个样式

.col-1 {
  width: 83.33333px;
}

.col-2 {
  width: 166.66667px;
}

.col-3 {
  width: 250px;
}

.col-4 {
  width: 333.33333px;
}

.col-5 {
  width: 416.66667px;
}

.col-6 {
  width: 500px;
}

.col-7 {
  width: 583.33333px;
}

.col-8 {
  width: 666.66667px;
}

.col-9 {
  width: 750px;
}

.col-10 {
  width: 833.33333px;
}

.col-11 {
  width: 916.66667px;
}

.col-12 {
  width: 1000px;
}

上述版本代码或许是挺复杂的，好在 sass提供了for循环，见如下代码：

@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
}

less import

创建 import-less.less 文件，复制如下代码：

@import "./mixin";
@import "./variable-less";

创建 import-less.css 文件，执行如下代码：

lessc import-less.less > import-less.css

查看 import-less.less 文件

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass import

语法上没有什么变化，注意符号是 $

CSS预处理器框架

Less - Lesshat / EST（官网）
SASS - Compass （官网，将有兼容性问题的属性会进行封装成mixin，直接调用就好）
提供现成的 mixin
类似 JS 类库封装常用功能

CSS 面试真题

常见的CSS预处理器

Less（Node.js）
Sass（Ruby 有Node版本）

预处理器的作用

帮助更好地组织CSS代码
提高代码复用率
提升可维护性

预处理器的能力

嵌套反映层级和约束
变量和计算减少重重复代码
Extend 和 Mxxin 代码片段
循环适用于复杂有规律的样式（网格系统）
import CSS 文件模块化（按需拆解CSS文件）

预处理器的优缺点

优点：提高代码复用率和可维护性
缺点：需要引入编译过程有学习成本

Bootstrap

一个CSS框架
twitter 出品
提供通用基础样式

Bootstrap 4

兼容IE10+
使用flexbox布局
抛弃Nomalize.css
提供布局和 reboot版本
（官网，用sass写）
可用于后台管理系统

Bootstrap JS组件

用于组件交互

dropdown（下拉）
modal（弹窗）
…

基于jquery写的，同时，依赖第三方库 Popper.js和 bootstrap.js

如上图，第二个js文件包含了 Popper.js

使用方式：

基于 data-*属性
基于 JS API

Bootstrap 响应式布局

非常精华的部分

Bootstrap 定制方法

使用CSS同名类覆盖（操作简单但）
修改sass源码重新构建
引用scss源文件修改变量（推荐使用，干净）

CSS 面试真题

Bootstrap的优缺点

优点：CSS代码结构合理，现成的样式可以直接使用
缺点：定制较为繁琐体积大

Bootstrap如何实现响应式布局

原理：通过 media query 设置不同分辨率的class
使用：为不同分辨率选择不同的网格class

如何基于Bootstrap 定制自己的样式

使用CSS同名类覆盖（操作简单但）
修改sass源码重新构建（需要了解Bootstrap 结构）
引用scss源文件修改变量（按需使用，控制体积，推荐使用，干净，但需要了解结构）

CSS 工程化

关注几个事情：组织、优化、构建、维护

PostCSS

将 CSS 解析成 CSS，和预处理器没太多区别。
本身只有解析能力
各种神奇的特性全靠插件
目前至少有200多个插件

常见：

import 模块合并
autoprefixer 自动加前缀
cssnano 压缩代码
cssnext 使用CSS新特性
precss 变量、mixin、循环等

PostCSS插件的使用

全局安装 postcss-cli

npm install postcss-cli -g

在 postcss.config.js 文件进行配置

cssnext

precss

变量（使用和 sass 几乎一样）
条件（if）
循环
Mixin Extend
import
属性值引用

gulp-postcss

PostCSS 支持的构建工具

CLI命令行工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
…

webpack

JS是整个应用的核心入口
一切资源均由JS管理依赖
一切资源均由webpack打包

webpack 和 CSS

css-loader 将 CSS变为 JS
style-loader 将JS插入到head
ExtractTextPlugin 将 CSS 从 JS 中提取出来
CSS modules 解决 CSS命名冲突的问题
less-loader sass-loader 各类预处理器
postcss-loader PostCSS处理

CSS 面试真题

如何解决CSS模块化问题

less sass 等CSS预处理器
PostCSS插件（postcss-import / precss等）
webpackl处理CSS（css-loader + style-loader）

PostCSS可以做什么？

取决于插件做什么
autoprefixer cssnext precss等兼容性处理
import 模块合并
css语法检查兼容性检查
cssnano 压缩文件

CSS modules是做什么的，如何使用

解决类名冲突的问题
使用PostCSS或者webpack等构建工具进行编译
在HTML模板中使用编译过程产生的类名

为什么使用JS来引用、加载CSS

JS作为入口，管理资源有天然优势
将组件的结构、样式、行为封装到一起，增强内聚
可以做更多处理（webpack）

结尾

话说，我有女朋友吗？我有吗？原来我没有…

扯开女朋友话题，终于完成了这篇史诗级大作，时隔几天时间。更多笔记内容还请关注小狮子前端笔记仓库（不要白嫖，给个 star ✿✿ヽ(°▽°)ノ✿ 就是对我最大的支持啦~）

学如逆水行舟，不进则退

你可能感兴趣的:(女朋友不会系列)

一百九十四章. 自相矛盾巨木擎天
唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
C语言如何定义宏函数？小九格物 c语言
在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
网易严选官方旗舰店，优质商品，卓越服务高省_飞智666600
网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
情殇——（5）压抑的小木匠放纵了自己。石疯聊情感故事
木讷的小木匠，其实只是不苟言笑。其实内心深处也是挣扎着，由于性格内敛，不喜形于色，给人的感觉非常的木讷。其实小木匠情商智商都不低。他为人扎实，非常的务实。他的爱是既深沉又宽容。可是是一个男人，都会对妻子出轨的事儿，不会忘怀！只是压抑在心底，为了某种考量或许是真爱。小木匠对于丽影和别人私奔又重回家庭，表面上并没有，天翻地覆，暴风骤雨，其内心深处也是经历了，痛苦的挣扎。。。再一次酒后，他和一个离家多年
勇士赢了，我把掌声给了骑士复角度的生活
今天，不参加高考，只看NBA总决赛第三场的较量。这么说有点得罪高考生了，不过我没有当他们面秀，也没有跑到考点外面得瑟，所以我内心毫无波澜。毫无疑问，考场里不乏骑士和勇士球迷，在紧张作答语文考卷同时还心系着球队，不过我希望今天的比赛不会让你们有所分心，毕竟高考不会像比赛录像那样可以再来。今天，好像起来赶考一样，我起得很早，然而事实是睡不着，挺郁闷的，又不是我高考，我紧张什么？九点我并没有准时打开浏览
2019-08-08 65454
东莞家庭聚会出行旅游去哪里玩住？想起来有很久没有和家里人聚会啦，这次组织家人来到威廉古堡别墅轰趴，一大家子27个人，在别墅订了一天办，玩的非常的开心，小孩子玩游戏机，也很放心不会丢，我们就在唱歌、打麻将、打桌球一系列的活动，还准备小次等小孩生日在别墅举办，还可以给孩子做一个生日的策划
MYSQL面试系列-04 king01299 面试 mysql 面试
MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
嘿，谢谢你小小玛拉沁
突然想对一个女孩子说，谢谢你！很久很久以前，总是觉得和你不会有太多交集，充其量也只是普通的舍友吧，毕竟有很多习惯，性格等方面相差甚远。其实特别感谢2017这一段经历和我遇见的人，只会慢吞吞的过自己生活的安小蜗是不会主动去结交朋友的，所以她来到了我的世界，让我在不知不觉中发现了自己太多太多的问题，而我正在逐渐去改变这些的习惯，成为更好的自己！我总是超级佩服她不管什么时候精力都超级旺盛，可以在上了一天
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
Redis系列：Geo 类型赋能亿级地图位置计算 Ly768768 redis bootstrap 数据库
1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
锁之缘尘缘诗词原创作品
是谁追寻梦的足迹，是谁在偷偷的哭泣，日月隔离在黑白天地情感在心中蔓延的痕迹天与地的距离有多远流失的星晨落入哪片空间不要让泪水模糊双眼心牢中一样充满温暖谁说爱情没有永远白娘子又为何爱许仙蝴蝶墓地展翅翩翩轻歌慢舞袖卷人间传奇千古留爱万年…………月落星飞徘徊是选择不去问自已为合舍不得寂寞本就是痛苦的不在追寻梦中的痕迹才不会失去真实的自已
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
Faiss：高效相似性搜索与聚类的利器网络·魚大数据 faiss
Faiss是一个针对大规模向量集合的相似性搜索库，由FacebookAIResearch开发。它提供了一系列高效的算法和数据结构，用于加速向量之间的相似性搜索，特别是在大规模数据集上。本文将介绍Faiss的原理、核心功能以及如何在实际项目中使用它。Faiss原理：近似最近邻搜索：Faiss的核心功能之一是近似最近邻搜索，它能够高效地在大规模数据集中找到与给定查询向量最相似的向量。这种搜索是近似的，
果然只有离职的时候，才有人敢说真话！ return2ok
今天公司出了神贴。今天中午吃饭，同事问我看了论坛上的神贴了吗？什么帖子？我问。同事显得很惊讶，你居然没看，现在那个帖子可能会成为年度最佳帖子。这么厉害？我等不及了，饭没吃完就快速的奔向办公室，打开公司论坛，我要一睹这个帖子的神奇。写这帖子的童鞋胆儿真肥。这哪里是一个帖子，这是很多个帖子，组成了一个系列。某人从公司文化、管理、人事、项目管理等多个方面分析了公司的概况，并抨击了公司的各种弊端，并提出了
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
EIO国际确定性的交易（3/10）资管，资金委托安全吗？古城鹏哥
大家可能都知道资金托管，账户是自己开，钱在自己的账户上，密码是由自己掌控，别人提不走你账户的资金，每天可以看下到自己的账户，也可以看到交易流水。现金只能提到自己的银行卡中。账户由技术人员或操作人员，或者是机构团队帮你操作账户，产生盈利和收入，以获得的利润来分配盈利，技术强硬和做的时间久了过硬技术团队，会保证你的资金本金，不会让你的本金亏损的按照一定比例分配收入。所以在这个过程当中一定要看清楚技术的
2019-01-19 王小康KK
姓名:王康公司:扬州市方圆建筑工程有限公司2018年3月16日～3月18日上海361期《六项精进》感谢二组学员【日精进打卡第307天】【知～学习】《六项精进》大纲3遍共862遍《大学》通篇3遍共860遍《六项精进》全书40页【经典名句】思想决定行为，行为决定习惯，习惯决定性格，性格决定命运。【行～实践】一、修身：（对自己个人）1、践行六项精进的理念。二、齐家：（对家庭和家人）1、和女朋友视频聊天。
第二期心理咨询师培训第1组分享第八天张云511
学会与问题共存—事情不会只有一个面读完本节，印象最深的点就是“扩大白色而非消灭黑色”。其实在班级管理中也是一样，我们暂时不要着急去消灭问题，而是注意学生哪些方面很不错，值得我们去扩大，我们要发现学生的资源与潜力，从正向的意义出发，发挥滴水穿石的力量，让一个个小改变汇集出巨大的改变！调整看事情的角度，不把生活问题扩大，是我们学习“与问题共存”的重要一步。换个角度看问题，会改变自己，也会感动别人！这样
每天都有“小感动” 河北张海霞
上次开学，在楼道值班儿的我，回到办公室后，发现我的办公桌上了一个小饭盒，打开一看，是自家腌的萝卜片，闻起来香香的，是哪位有心的孩子带来的？我猜测着……会不会是杨同学，记得开学第一天，她胃疼再加上低血糖，我曾陪她去医务室看病，并给她带回了早餐……还是李同学，那次她被别的同学欺侮，我为她主持公道。晚餐时间到了，我还带她去餐厅吃饭，引得同学们一阵羡慕……会不会是王同学，那次她眼睛不好，我陪她聊天，关心地
insert into select 主键自增_mybatis拦截器实现主键自动生成 weixin_39521651 insert into select 主键自增 mybatis delete返回值 mybatis insert返回主键 mybatis insert返回对象 mybatis plus insert返回主键 mybatis plus 插入生成id
前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat
女儿考研完报考雅思捡拾流年
是否我过于焦虑？会不会无形间让女儿觉得压力太大了啊。2022年对于我们家来说是不平常的一年。女儿今年大四，为了准备考研，暑假也没回家，年初去了学校到了年末才回家。女儿自己一个人面对考研，没有参加培训，大四学校作业论文等课业也多，她同时也是很努力复习考研的。在疫情开放很多羊的时期，女儿终于顺顺利利参加12月24、25号的考研，我们和家人都觉得女儿回家来要好好休息调养。可女儿回到家，我再查阅考研信息，
《太虚游》第六十二章。玄牝之威。古楼臭道士
“好好好，流云这孩子深得我心，想必长爻知道是你的话定然会惊喜不已的。”白玄牝听得风流云应了下来，脸色慈和，伸手在他头顶轻轻抚了抚，如同抚在怀中九尾小狐一样自然，极其温柔。身后的四位青丘长老同时一怔，嘴角微动，似要开口劝阻。风流云只感到一道霞光瑞气如有实质一般顺着头顶百会大穴直沉在下丹田内，随后这股气息又逐渐凝聚，似乎给自己吃了什么东西一般。啊喔不好，这祖奶奶该不会是看中我这肉身，像人魔一样，要给她
2021-02-13 琛周
今天ori居然在车站跟我说，自己要离婚还以为是开玩笑，md，这才大年初一呢虽然我也不把过年当回事这一年或者说，自2020年以来仿佛一切的事儿都变得顺了不少爆裂的事儿合肥的事儿等等上天发牌的事儿我觉得我脑子还是挺好使的我这些年的确没缺过钱可能做成一个事儿以后，往后也不会缺了头疼所谓当局者迷，就是我给自己安排工作的时候，懒得动给助理安排工作的时候，神神叨叨。淦
关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解秋刀prince mysql mysql 数据库
提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据
一颗小桃树李蓉乐平市湾头中小学
当“凹”同“洼”的时侯，才读(wa，平声)，他不叫贾平洼(贾，原名贾平娃)，非要写作贾平凹。为了表示对他的尊重，对文学的尊重，对文化人的尊重。如果不是帮闺蜜的儿子修改作文，我也不会发现贾平凹叫贾平娃。以下是摘选他的文章《一棵小桃树》：可我的小桃树儿，一颗“仙桃”的种子，却开得太白了，太淡了，那瓣片儿单薄得似纸做的，没有肉的感觉，没有粉的感觉，像患了重病的少女，苍白白的脸，又偏苦涩涩地笑着。雨还在下
2.2.6 通知类控件 Toast、Menu 常思行
本文例程下载：WillFlow_Toast、WillFlowMenu一、什么是Toast？Toast也被叫做吐司，是Android系统提供的一种非常好的提醒方式，在程序中可以使用它将一些短小的信息通知给用户，它有如下两个特点：Toast是没有焦点的Toast显示的时间有限过一定的时间就会自动消失所以一般来讲Toast的使用并不会影响我们的正常操作，并且它通常不会占用太大的屏幕空间，有着良好的用户体
178 坚守自律花儿迎风飞扬
如果错过了太阳时你流了泪，那么你也要错过群星了。如果你错过了早上而懊悔，那么你也要错过一整天了。白俊庭老师说，如果没有外部环境的咄咄逼人和自己逼自己，我们一般都不会自己走出舒适区，就像那只温水里的青蛙。百炼成钢，就是要锻造，就是锤打，给自己压力才有动力。咄咄逼人的外部环境是他律，是外力，走出舒适区是觉醒，是顿悟；而自己逼自己，是自律，是意志，是恒心，是内驱力。女儿的中学生活开始，开学整整一个月，也
红手套节马小媛为中国城市环卫者公益发声：今天我手红疏狂君
#红手套节#公益活动，线头公益以及同多方资源的共同努力我们邀请到了线头公益大使马小媛马小媛，1993年5月3日出生于江苏省南京市，中国内地新生代女演员。2015年马小媛参演网剧《余罪》，饰演警校校花安嘉璐的闺蜜。2016年马小媛主演系列电影《丽人保镖》中女一号林欢馨，正式出道。此后，马小媛陆续接演了电视剧《警花与警犬2》，在网剧《你美丽李美丽》中担任女主角李美丽。拂晓，当你还在睡梦中时，这座城跟你
JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm 字节码 Class文件 StackMapTable
在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
回调函数调用方法百合不是茶 java
最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记记录一下代码很简单: MainDemo :调用方法得到方法的返回结果
[时间机器]制造时间机器需要一些材料 comsci 制造
根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质和材料... 甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......
开口埋怨不如闭口做事邓集海邓集海做人做事工作
“开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。　　　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。　　　　
jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery 开发插件　函数
jQuery插件的开发包括两种：一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1 、类级别的插件开发类级别的插件开发最直接的理解就是给jQuer
Rome解析Rss 413277409 Rome解析Rss
import java.net.URL; import java.util.List; import org.junit.Test; import com.sun.syndication.feed.synd.SyndCategory; import com.sun.syndication.feed.synd.S
RSA加密解密无量加密解密 rsa
RSA加密解密代码代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
linux 软件安装遇到的问题 aichenglong linux 遇到的问题 ftp
1 ftp配置中遇到的问题 500 OOPS: cannot change directory 出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 2 source /etc
面试心得 alafqq 面试
最近面试了好几家公司。记录下；支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败；阿里金融，面试官人也挺和善，只不过我让他吐血了。。。由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
java的多态性探讨百合不是茶 java
java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
探索JUnit4扩展：深入Rule bijian1013 JUnit Rule 单元测试
本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
[CSS]CSS浮动十五条规则 bit1129 css
这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取 1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]，或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan java netty
先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下：实
AES加密解密 chicony 加密解密
AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
文件编码格式转换 ctrain 编码格式
package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
mysql 在linux客户端插入数据中文乱码 daizj mysql 中文乱码
1、查看系统客户端，数据库，连接层的编码查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql> show variables like 'character_set_%'; +--------------------------+------
好代码是廉价的代码 dcj3sjt126com 程序员读书
长久以来我一直主张：好代码是廉价的代码。当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。当他们走近看我的表情、知道我是认真的时，才收敛一点。当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
Android网络请求库——android-async-http dcj3sjt126com android
在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化 Oracle sql语句优化 SQL语句的优化
转载请出自出处：http://eksliang.iteye.com/blog/2097999 SQL语句的优化总结如下 sql语句的优化可以按照如下六个步骤进行：合理使用索引避免或者简化排序消除对大表的扫描避免复杂的通配符匹配调整子查询的性能 EXISTS和IN运算符下面我就按照上面这六个步骤分别进行总结：
浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android 移动开发滑动机制嵌套
谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？ 比如你使用了Toolbar，下面一个ScrollView，向上滚
使用hovertree菜单作为后台导航 hvt JavaScript jquery .net hovertree asp.net
hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
SVG 教程（二）矩形天梯梦 svg
SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作：矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
一个简单的队列 luyulong java 数据结构队列
public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
项目出现的一些问题和体会 Steven-Walker DAO Web servlet
第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 &
高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介：淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？

写作背景

熟悉HTML知识

HTML常见元素

head 部分

body部分

doctype的意义是什么

HTML、XHTML、HTML5的关系

HTML5有什么变化

em和 i 有什么区别

语义化的意义

哪些元素可以自闭合

HTML和DOM关系

property 和 attritube 区别

form的好处

CSS精华（Cascading Style Sheet）层叠样式表

选择器

选择器分类

选择器权重（1）

选择器权重（2）

非布局样式

字体

行高（经典问题）

背景

边框（经典问题）

滚动

文字折行（经典问题）

装饰性属性

CSS Hack（了解）

hack

CSS 面试真题

css样式（选择器）的优先级

雪碧图的作用

自定义字体的使用场景

base64的作用

伪类和伪元素的区别？

如何美化checkbox

CSS 布局

常用布局方式

布局方式（表格）

display / position（经典问题）

flexbox（圣杯布局）

float

float 特性的影响（经典问题）

清楚浮动的方式

float（圣杯布局）

inline-block 布局

响应式设计和布局

CSS 面试真题

实现两栏（三栏）布局的方法

position:absolute / fixed 有什么区别？

display:inline-block 的间隙

如何清除浮动？为什么要清除浮动？

如何适配移动端页面？

效果属性（CSS最出彩的一部分）

box-shadow

text-shadow

border-radius

background

clip-path

3D-transform

CSS 面试真题

如何用div画一个 xxx

如何产生不占空间的边框

如何实现圆形元素（头像）

如何实现iOS图标的圆角

如何实现半圆、扇形等图形

如何实现背景图居中显示 / 不重复 / 改变大小

如何平移 / 放大一个元素

如何实现3D效果

CSS 动画

动画的原理

动画的作用

CSS中动画的类型

transition 补间动画

动画进度与时间的关系

关键帧动画

逐帧动画

CSS 面试真题

CSS 动画的实现方式有几种

`head` 部分

`body`部分