01、CSS 简介

CSS 指层叠样式表 (Cascading Style Sheets)，对HTML网页内容进行统一外观样式设计和管理，给网页进行各种装饰，让她变得美观，是HTML的化妆师。（Cascading ：/kæsˈkeɪdɪŋ/（水）倾泻；连续传递；串联。cascade 的现在分词）

主要优点：

  • 美化页面：提供丰富的外观设计能力，大量的样式属性。
  • 可复用：可以统一管理HTML页面的样式，可复用。
  • CSS3可以实现网页样式、内容分离，并对网页元素实现像素级的样式管理。

1.1、知识框架

详见前端技术路线图

1.2、CSS 是怎么工作的？

下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

当浏览器遇到无法解析的 CSS 代码会发生什么？——什么也不会干，继续解析下一个CSS样式。

02、CSS基础知识

2.1、基础语法

CSS样式由 选择器名 花括号 {n个申明(属性:值);} 组成。

  • 选择器就是用来选择要改变样式的HTML元素。
  • 属性与值用半角冒号:分开，半角分号;结尾，分割多组键值。一般建议一行一个键值对。
  • 如果属性值有多个词组，需加上引号保护起来。
  • 不合法、错误的申明会被忽略（跳过），CSS总是怎么宽容！

代码风格：

  • 小写：一般都采用小写，字母开头，字母、数字、下划线组成。
  • 短线分割：当选择器里是类名时，且类名由多个单词组成，则各个单词之间下划线_、或中划线-分割。多用中短线：background-image
  • 当使用并集选择器时，各个元素竖着写。

注释：/*注释，可换行*/

注意空格：一定注意关键字（and、or）、符号（括号()，加+、减-）之间的空格，不然有些时候会有些莫名其妙的问题。其中加+、减-会首先当做正负数符号

2.2、CSS 的简写属性

简写属性就是将同一主题的属性的定义集中在一起，空格分割，如background、font、border、margin、padding。

margin-top: 1px;

margin-left: 2px;

margin-bottom: 3px;

margin-left: 4px;

/* 上面四个属性的简写形式，同时也覆盖他们样式*/

margin: 1px 2px 3px 4px;

border-top-color: blue;

border-color: red;  /* 四个边颜色简写，覆盖上面的样式 */

border-width: 2px;

border-style: dotted;

border: green solid 5px; /* 综合边框样式的简写，上面所有边框的样式 */
  • 覆盖：没有指定的值会被设置为它的初始值。这就意味着，️它将会覆盖之前设置的值。
  • 顺序：简写属性的值本身没有顺序要求，但值类型一样时，就需要注意对应简写属性的规则了。

2.3、CSS的使用

描述 示例
行内样式 在元素的style属性上写css样式。
️缺点：代码耦合度高，样式不复用，不利于维护，尽量不用。		 <p style="color: blue;">p文字</p>
内部（内嵌）样式 在样式<style>标签中定义css样式，只在当前页面内有效。
️缺点：多个页面之间无法复用。		 <style> p{color: blue;} </style>
外部样式（推荐） 单独css文件定义样式，html的head中<link>引入，所有引入了
该css文件的页面都会生效，便于复用和统一管理。		 <link rel="stylesheet" href="css文件路径" /> 
<html>

    <head>

        <meta charset="utf-8"/>

        <title>css练习HTML预览</title>

        <!-- 引入外部css样式文件，type：css类型；ref：当前文件与引入的文件的关系；href：文件路径 -->

        <link type ="text/css" rel="stylesheet" href="css1.css" />

        <!-- 内部样式style标签定义css样式 -->

        <style type="text/css">

            pre{

                color:red;

            }

        </style>

        <style type="text/css">

            @import "mystyle.css" supports(display: flex);

        </style>

    </head>

    <body>

        <div>

            <!-- 行内样式style属性设置css样式 -->

            <p style="color: blue;">一段p标签文字，使用行内样式style</p>

            <pre>pre标签文本，使用内部样式</pre>

            <font>font标签内容</font>

        </div>

    </body>

</html>

<link>和@import的区别？都可以用来加载外部css资源文件，不同点：


 @import()
资源类型 link支持更多外部资源加载，包括css、图标 @import是CSS语法，只支持导入css
哪里使用？ HTML页面中 css文件、<style>标签里，必须是第一句
加载优先级 与HTML页面一同加载 要等网页加载完成后才进行加载
兼容性问题 良好 @import是CSS2.1版本的，不兼容 ie5 以下
扩展性 <link>支持javascript去控制其属性 @import不支持JS操作，支持媒体查询

2.4、层叠、优先级和继承

层叠：

一个元素可应用多个样式选择器，当多条样式规则应用到同一个元素时，存在样式冲突，就出现了层叠，那到底该用谁的呢？

  • 同级别（同选择器）的样式规则：后面的样式规则会覆盖前面的，或者也可以理解谁离元素最近就用谁，和选择器顺序无关，如<p class="d1 d2">中d1、d2的顺序无关。
  • 谁大就用谁：其他情况就是用优先级权重来计算，谁的优先级更高（值更大）就用谁！
.d1{

    color: red;

    color: green;  /* 层叠 */

}

.d2{

    color: blue;   /* 层叠，同级别，最后出场的胜出！ */

}

优先级：
选择器优先级：样式的目标越具体优先级越高：行内样式优先级（1000 ）> id（100）> class（10）>标签（1）>通用（0）。括号内是权重值，用来决策优先级。

!important：一个特殊的 CSS语法，恐怖如斯10000优先级， 可以用来覆盖所有上面所有优先级和层叠，使用小心（尽量不用）！

h1{

    color: green !important;  /* 只能用在属性上 */

    color: blue;

}

继承：

继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的。如一些布局类的（高宽、边距、边框）是默认不继承的，可以显示设置继承。一些文本类的（字体、文本样式、字体颜色）大多支持隐式继承（默认从父元素继承）。

CSS提供了五个特殊的通用属性值用来显示控制继承，每个 css 属性都可使用这些值。

属性 描述
inherit 继承父类属性（/ɪnˈherɪt/），就是 "开启继承"，使子元素属性和父元素相同
initial 恢复初始值（ /ɪˈnɪʃl/最初的），设置属性值和浏览器默认样式相同，如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset 自然值，将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样
revert 恢复，将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer 重置上一层，将应用于选定元素的属性值重置为在上一个层叠层中建立的值。 
<div>

    div

    <p>pppp</p>

</div>

<style>

    div {

        border: 2px solid red;

        color: #368cee;  /* 所有子元素都会默认继承color */

    }

    div p {

        border: inherit;  /* 子元素默认不会继承父元素的border，可以显示的强制继承 */

    }

    /* 在一些浏览器中，表单元素默认不会继承父级字体样式，因为他们有自己的浏览器内置样式，需要主动申明字体样式的继承。 */

    button, input, select, textarea {   font-family : inherit;   font-size : 100%; }

</style>

2.5、@规则

@符号开头的特殊语法规则。

@规则 描述 示例/备注
@charset 定义样式表的字符集，必须是样式表中的第一个元素 @charset "UTF-8";不支持HTML中使用
@import 引入一个外部样式表，必须先于所有其他类型的规则，@charset 除外。支持媒体查询。 @import url("fineprint.css")
@import url _list-of-media-queries_;
@namespace 用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则
@media 定义媒介查询规则，用于响应式样式设计 @media screen and (min-width: 900px){}
@page @page 规则用于在打印文档时修改某些 CSS 属性
@supports IE 特性查询，判断当前浏览器环境是否支持某些特性，js中可通过 CSSSupportsRule 来访问 @supports 支持not、and、or嵌套多个表达式
@font-face 定义下载的外部的网络字体 @font-face {font-family:"fname";src: url()}
@keyframes CSS 动画的关键帧 
@charset "UTF-8";

@supports (display: grid) {

    div {

        display: grid;

    }

}

@supports not (display: grid) {  /* 如果不支持grid布局，则使用float布局 */

    div {

        float: right;

    }

}

@supports (--foo: green) {  /* 测试是否支持自定义属性 */

    body {

        color: var(--foo);

    }

}

03、值与单位

3.1、尺寸单位（长度/大小）

绝对长度：

  • cm：厘米
  • px：像素

相对长度：

  • em，相对于父元素字体或自身字体的大小（倍数）。
  • rem，相对于根元素<html>字体大小（倍数）。如果用em、rem作为单位，建议根元素设置10px，便于计算。
  • vh/vw：视窗（浏览器可视窗口）高度、宽度的1%，可以把一些东西做得随浏览器的视口改变大小。
width: 20em; /* 20个字符宽度 */

font-size: 2em; /* 2倍大小 */

font-size: 200%; /* 2倍大小，同2em */

height: 5vh; /* 浏览器页面窗口高度的5% */

百分比：相对于其他值（大多是父元素）的比例。

  • 字体大小设置百分比，就是相当于父元素字体大小的比例。
  • 宽度百分比，父元素宽度比例。

3.2、min/max-width尺寸边界

设置元素高宽的边界。

属性 描述
min-height 设置元素的最小高度，默认auto，当大于height会覆盖height的值
max-height 设置元素的最大高度，当小于height会覆盖height的值
min-width 设置最小宽度，默认auto，如果大于width会覆盖width的值
max-width 设置最大宽度值，如果小于width会覆盖width的值

对于替换元素（图像和视频），他们有自己的大小，这会影响布局，可以通过设置max-width:100%来控制其大小范围。虽然设置width: 100%;也可以控制大小，但会拉伸图片。

3.3、color颜色值

RGB颜色是基于R（red）、G（green）、B（blue）三个颜色通道组合而成，每个颜色通道值0到255，16进制就是00到FF。

颜色值 描述
颜色关键词：red 预定义的颜色值，如red、green、blue、transparent （透明色），完整列表
16进制值RGB：#FF12AA #开头，6位16进制数值
16进制RGBA：#FF12AAFF #开头，8位16进制数值，多了透明度A（alpha 通道）
RGB函数：rgb(2, 121, 139) rgb三个值作为参数（10进制，0-255）
函数RGBA：rgba(2,121,139,0.3) rgba4个值作为参数，最后一个参数透明度值是0到1的小数。
透明度属性：opacity 0到1的小数，在元素上设置对整个盒子生效
currentColor css3关键字，当前元素的（或其最近父元素）继承的color值 
p {

    color: blue;

    color: #FF0000;

    color: #FF00006F;

    color: rgb(255, 1, 1);

    color: rgb(255, 1, 1,0.4);

    opacity: 1;

    border: currentColor 1px dashed;

}

3.4、渐变色gradient

渐变色gradient（/ˈɡreɪdiənt/ ）是一种特别的image数据类型，用于background-image、border-image的值，实现多种渐变颜色。可以设置多组值，逗号隔开，层叠渲染都会生效。

线性渐变linear-gradient()

沿线性方向的颜色渐变：

linear-gradient (方向/角度 , 颜色 位置% , 颜色 位置% , ...)

  • 方向/角度（angle），目的是确定线性渐变的方向，有两种设置方式：

    • 角度（angle，顺时针），沿指针方向渐变，单位deg（degree）。
    • 方向，关键字to+ 一个或多个位置（top、bottom、right、left），to right /*从左到右*/
  • 颜色值：颜色值color。
  • 插值位置：可以是%比例，和长度（px），基于方向的渐变插值位置。
<div class="lg">

    <p>b1</p> <p>p2</p> <p>p3</p>

</div>

<style>

    .lg p{

        width: 100px; height: 80px; text-align: center;

        font-size: 20px; line-height: 80px; margin: 10px;

        display: inline-block;

    }

    .lg p:nth-child(1) {

        background-image: linear-gradient(red, blue 20%,green 60px);

    }

    .lg p:nth-child(2) {

        background-image: linear-gradient(45deg, red, blue);

    }

    .lg p:nth-child(3) {

        background-image: linear-gradient(to right, red 20px, blue 90%);

    }

</style>

径向渐变radial-gradient()

从中心往四周辐射扩散的颜色渐变，（radial /ˈreɪdiəl/辐射、径向）。

radial-gradient (形状 | size at 圆心位置 , 颜色 位置% , 颜色 位置% , ... )

  • shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
  • at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
    • 坐标定位（像素、百分比）：at 0 50%，at 10px 30px
    • 方位定位（top、bottom、right、left、center）：at left top
  • size：渐变结束形状的大小，枚举值：closest-side、closest-corner、farthest-side、farthest-corner
<div class="rg">

    <p>b1</p> <p>p2</p> <p>p3</p> <p>p4</p>

</div>

<style>

    .rg p { width: 100px; height: 80px; text-align: center; font-size: 20px;

           line-height: 80px; margin: 10px; display: inline-block;

          }

    .rg p:nth-child(1) {

        background-image: radial-gradient(black 6px,black 10px,red,white)

    }

    .rg p:nth-child(2) {

        background-image: radial-gradient(circle at center,black 6px,black 10px,red,white);

    }

    .rg p:nth-child(3) {

        background-image: radial-gradient(at 0 80px, black 6px,black 10px,red,white);

    }

    .rg p:nth-child(4) {

        background-image: radial-gradient(farthest-side at 0 80px, black 6px,black 10px,red,white);

    }

</style>

圆锥渐变conic-gradient()

沿着圆的时钟方向进行旋转渐变（conic /ˈkɒnɪk/锥形）

conic-gradient (开始角度/圆心位置 , 颜色 位置%|角度deg , 颜色 位置%|角度deg , ... )

  • from angele：锥形渐变的开始角度，from 0deg
  • at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
    • 坐标定位（像素、百分比）：at 0 50%，at 10px 30px
    • 方位定位（top、bottom、right、left、center）：at left top
<div class="cg">

    <p>b1</p> <p>p2</p> <p>扇形</p>

</div>

<style>

    .cg p { width: 100px; height: 100px; text-align: center; font-size: 20px;

           line-height: 100px; margin: 10px; display: inline-block;

          }

    .cg p:nth-child(1) {

        background-image: conic-gradient(from 0deg,black 10%,green 90deg,red)

    }

    .cg p:nth-child(2) {

        background-image: conic-gradient(from 0deg at center 20px,black 10%,green 90deg,red)

    }

    .cg p:nth-child(3) {

        border-radius: 50%;

        background-image: conic-gradient(from 90deg,blue 60deg,green 60deg,green 120deg,red 120deg)

    }

</style>

» 锥形渐变实现的进度图效果：

<style>

    .pie{

        width: 200px;height: 200px;

        /* 锥形渐变实现进度环颜色 */

        background-image: conic-gradient(#7870e4 70%,#dce7f3 0) ;

        border-radius: 50%;

        padding: 20px;

        /* 内容居中 */

        display: flex;  align-items: center;

    }

    .pie p{

        height: 100%; width: 100%; font-size: 2em;

        /* 文字居中 */

        display: flex; justify-content: center; align-items: center;

        /* 白色圆环 */

        background-color: white;    border-radius: 50%;

    }

</style>

<div class="pie">

    <p>70%</p>

</div>

重复渐变repeating

重复渐变就是执行多次渐变，以铺满整个区域，上面三种渐变都支持重复渐变模式。

repeating-上面的三种渐变

<div class="reg">

    <p>b1</p> <p>b2</p> <p>b3</p>

</div>

<style>

    .reg p {

        width: 100px; height: 100px; text-align: center; font-size: 20px;

        line-height: 100px; margin: 10px; display: inline-block;

    }

    .reg p:nth-child(1) {

        background-image: repeating-linear-gradient(green 0px,green 5px,red 5px, red 10px)

    }

    .reg p:nth-child(2) {

        background-image: repeating-conic-gradient(from 0deg at center, black 30deg, green 60deg, red 90deg)

    }

    .reg p:nth-child(3) {

        border-radius: 50%;

        background-image: repeating-radial-gradient(green 0px,green 5px,red 5px, red 10px)

    }

</style>

3.5、计算函数calc()函数

calc （计算表达式） 可动态的计算出一个数值，IE9。

  • 可用于长度、角度、时间、百分比、数字的计算。
  • 支持+加法、-减法、*乘法、/除法。注意运算符前后须有空格，否则可能会无法识别为一个有效的表达式，因为+-可能会被认为是正负数。
width: calc(20% + 100px);

width: calc(100% / 6);

font-size: calc(1em + 1vw);

3.6、CSS变量var(--)

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性(IE)，通过 var()函数在作用域范围内复用的。

  • 变量的作用域：取决于其申明的选择器。
:root {  /* :root标识根元素html，相当于全局作用域 */

    --main-bg-color: pink; /*申明css全局属性（变量）*/

    --Hi: 'hello';

    --Name: var(--Hi)',world'; /*字符串变量可以拼接*/

}

body {

    background-color: var(--main-bg-color);

}

04、盒子模型

4.1、万物皆盒子

在CSS眼中，万物皆盒子，每一个元素都是一个盒子，盒子有边框border，有内边距padding，有外边距margin，以及盒子内的内容区域content。HTML中的元素就是各种层叠的盒子，CSS的布局也是基于这些盒子。

  • ∎content：盒子里的内容，这个区域也称为“content-box”。
  • ∎padding：盒子内边距，盒子内容到边框border的间距（上右下左，顺时针方向）。
  • ∎border：盒子边框，边框线包括多个样式属性：线粗细、线样式、颜色、圆角等。border包含的区域称为“border-box”。
  • ∎margin：盒子外边距，盒子和其他元素的间距（上右下左）。
属性 描述 值
∎border 边框样式（上右下左），可简写 border:5px solid red;
border-width 设置四个边框的宽度 border-width: 5px 10px 1px medium
border-style 设置 4 个边框线的样式 dotted点、 solid线、 double双线、 dashed虚线
border-color 设置四条边框的颜色 border-color:red green blue pink;
border-radius 设置四个 border-*-radius 圆角属性 border-radius:15px 0;
border-collapse 表格的边框的合并设置 collapse /kəˈlæps/
∎padding 设置所有（上右下左）内边距属性 数值/百分比%：padding:10px 5px;
∎margin 设置所有（上右下左）外边距属性，可负数 数值/百分比%：margin:10px 5px 15px 20px;

border、padding、margin都有四个边（上右下左，顺时针方向：top、right、bottom、left），可以一起设置，也可以分别设置。在浏览器的调试模式下可以看到任何元素的盒子模型结构：

️注意：margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框border为止 —— 不会延伸到 margin。

️外边距折叠 ：两个外边距上下相邻的元素，他们的外边距将合并为一个外边距（重叠在一起），即最大的那个外边距的大小，而不是二者的外边距之和。当然不是绝对的，参考外边距重叠。

用边框画三角形：四个边框可以分别设置样式，设置其他三个变为透明色，就可以画出一个三角形了。

/*用边框画三角形：全部用边框填充*/

<style>

.border {

    border: solid 50px #6af36a;

    border-top-color: #368cee;

    border-bottom-color: #368cee;

    width: max-content;

}

</style>

<div class="border"></div>

基于块级元素、内联元素的区别，盒子也分为两种：块级盒子 (block box) 和 内联盒子 (inline box)。

块级盒子 (block box)：应用完整的盒子模型

  • 自动换行，宽度默认和父容器一样宽
  • width、height有效，内边距、外边距、边框会将盒子周围的元素“推开”。

内联盒子 (inline box)：部分盒子模型有效

  • 盒子不换行，width、height无效，基于元素内容自动适应。
  • 垂直方向的内边距、外边距、边框有效，但不会把其他inline盒子推开。
  • 水平方向的内边距、外边距、边框有效，会把其他inline盒子推开。

4.2、box-sizing盒模型

盒子模型 box-sizing 有两种模式：标准盒模型、代替（IE）盒模型，通过属性box-sizing设置（IE8支持，之前IE都只有代替盒模型）。

box-sizing 描述 备注
content-box 标准盒子模型（默认值）：
元素width、height仅限Content内容，padding 和 border往外扩张。如果给元素设置 width 、height，实际设置的是 content box。
整个盒子的宽高需再加上padding 和 border，是不是很反人类？是就对了！
切换标准盒模型：box-sizing: content-box
border-box 替代（IE）盒模型
元素width、height包含Content、padding、border，padding 和 border都向内挤压。
切换代替盒模型：box-sizing: border-box
有时候为了更精确的控制布局，会强制使用IE盒模型并初始内外边距为0：
box-sizing: border-box; margin: 0px; padding: 0px;

4.3、min/max-content内容尺寸

下面的*-content（IE）“值”用来设置元素的宽度、高度，是基于盒子的内容来动态设置盒子尺寸。

尺寸值 描述
min-content 最小内容尺寸，基于盒子内容content最小的尺寸
max-content 最大内容尺寸，基于盒子内容content最大的尺寸
fit-content 适应内容尺寸（/fɪt/适应，合适），会根据视口的大小自适应min-content、max-content 
<style>

    #d1 p{

        background-color: antiquewhite; padding: 3px;margin: 5px 0px;

    }

</style>

<div id="d1">

    <p style="width:min-content;">标题H2 title：min-content</p>

    <p style="width:max-content;">标题H2 title：max-content</p>

    <p style="width:fit-content;">标题H2 title：fit-content</p>

    <p style="width:auto;">标题H2 title：auto</p>

</div>

️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

CSS基础知识筑基的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. Web学习篇之---css基础知识（一）

    css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

随机推荐

  1. mustache.js常见用法

    一.mustache基于JS模板引擎,能较为快捷和简单得实现数据得渲染 用法: 1.CDN引入mustache.js,以下是4.0.1版本,有需要可以去github上查询其他版本的代码. (funct ...

  2. silk-GUI图形界面开发一个词典

    了解使用的库 Silk内置了一些GUI类库供使用者开发MacOS上的图形界面程序,只需引用gui.si即可 准备 首先要知道app需要什么功能,这里我要的是查询单词,可以听语音,还可以存储生词! 那么 ...

  3. QQ国际版V8.0.11.4530

    简洁,快速,无广告,好用! 预览图 下载地址 QQ国际版.apk 其他简洁版本如下 在线观看 视频地址[灰常简洁占用超低!]

  4. CF-1562B- Scenes From a Memory

    Problem - 1562B - Codeforces 题意:给定一个字符串,每次操作可以选择这个字符串中的一种字符,将他们全部都减1,最多K次操作,问可以形成的字典大小最小的字符串. 题解:首先我 ...

  5. 不当使用 union all 导致的SQL解析时间过长的问题优化

    在帮助用户优化应用过程中,发现用户大量使用union all 导致SQL解析非常缓慢的问题.考虑到这个问题很有代表意义,我觉得很有必要对于问题进行总结. 一.用户例子 WITH company_use ...

  6. KingbaseES R6 集群“双主”故障解决案例

    实际工作中,可能会碰到集群脑裂的情况,在脑裂时,会出现双 primary情况.这时,需要用户介入,人工判断哪个节点的数据最新,减少数据丢失. 一.测试环境信息 操作系统: [kingbase@node ...

  7. KingbaseES启动数据库失败后如何分析

    关键字: KingbaseES.sys_ctl.启动日志 一.KingbaseES数据库服务启动 1.1 数据库启动机制 1) 数据库通过sys_ctl工具手工启动数据库服务kingbase. 2) ...

  8. File类、FileOutputStream

    day01 File类 File类的每一个实例可以表示硬盘(文件系统)中的一个文件或目录(实际上表示的是一个抽象路径) 使用File可以做到: 1:访问其表示的文件或目录的属性信息,例如:名字,大小, ...

  9. 开源即时通讯GGTalk 8.0发布，增加Linux客户端，支持在统信UOS、银河麒麟上运行！

    GGTalk在2021年推出7.0后,经过一年多时间的开发,终于推出8.0版本,实现了Linux客户端. 这几年,信创国产化的势头越来越猛,政府事企业单位都在逐步转向使用国产OS.国产CPU.国产数据 ...

  10. （一）JPA的快速入门

    JPA简介 JPA是什么 JPA 是Java Persistence API的缩写,是一套由Java官方制定的ORM标准.当制定这套标准以后,市场上就出现很多JPA框架.如:OpenJPA(apach ...