CSS布局：CSS三大特性、盒子模型
CSS布局
Date: September 3, 2022
Summary: CSS三大特性、盒子模型
CSS三大特性
◆ 能够认识不同选择器的 优先级 公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题
学习路径：
- 继承性
- 层叠性
- 优先级
优先级的介绍
特性：
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
Code：
<style>#box {color: orange;}.box {color: blue;}div {color: green !important;}body {color: red;}/* !important不要给继承的添加, 自己有样式无法继承父级样式 */</style><div class="box" id="box" style="color: pink;">测试优先级</div>一般来说，谁选中的范围广，谁的优先级低
比如通配符（*）的范围很广，但是它的优先级较低
CSS 中的 !important 规则用于增加样式的权重。
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
小结：
优先级比较公式是怎样的？
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
!important能提升继承的优先级吗？
不能
权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
注意点：!important如果不是继承，则权重最高，天下第一！
Code:
/* (行内, id, 类, 标签) *//* (0, 1, 0, 1) */div #one {color: orange;
}/* (0, 0, 2, 0) */
.father .son {color: skyblue;
}/* 0, 0, 1, 1 */
.father p {color: purple;
}/* 0, 0, 0, 2 */
div p {color: pink;
}
（拓展）权重叠加计算案例
权重计算题解题步骤：
- 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
- 通过权重计算公式，判断谁权重最高
注意点：
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
补充：
这里我们需要重点考虑这个知识点，
对于复合选择器，我们可以通过权重来判断，也可以通过继承的优先级来判断
对于继承：
都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效
比如如下，优先继承
, 再继承 father ， 故显示红色
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */ /* 继承 */div p {color:red;} /* 继承 */.father {color:blue;} </style>
<body><div class="father"><p class="son"> <span>文字</span></p></div>
</body>
PxCook的基本使用
学习路径：
- 打开设计图
- 常用快捷键
- 从psd文件中直接获取数据
PxCook的基本使用
- 通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目 - 常用快捷键
- 放大设计图：ctrl + +
- 缩小设计图：ctrl + -
- 移动设计图：空格按住不放，鼠标拖动
- 常用工具
- 量尺寸
- 吸颜色
- 从psd文件中直接获取数据
- 切换到开发界面，直接点击获取数据
盒子模型
学习路径：
- 盒子模型的介绍
- 内容区域的宽度和高度
- 边框（ border ）
- 内边距（ padding ）
- 外边距（margin）
盒子模型的介绍
盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
盒子模型
CSS 中规定每个盒子分别由：
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
记忆：可以联想现实中的包装盒
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 纸箱子, 填充泡沫 */div {width: 300px;height: 300px;background-color: pink;/* 边框线 == 纸箱子 */border: 1px solid #000;/* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */padding: 20px;/* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/margin: 50px;}</style>
</head>
<body><div>内容电脑</div><div>内容电脑</div>
</body>
</html>
效果：
小结：
盒子模型一共有几个部分组成？分别是什么？
- 内容区域：content
- 边框区域：border
- 内边距区域：padding
- 外边距区域：margin
内容区域的宽度和高度
2.1 内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
常见取值：数字+px
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div>文字</div>
</body>
</html>
效果：
设置盒子模型内容区域大小可以通过什么属性设置？
- 宽度：width
- 高度：height
边框（ border ）
边框（border）- 单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
边框（border）- 连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
快捷键：bd + tab
边框（border）- 单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取值
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* border: 粗细 线条样式 颜色 -- 不分先后顺序 *//* solid : 实线 *//* border: 1px solid #000; *//* dashed: 虚线 *//* border: 5px dashed #000; *//* dotted : 点线 *//* border: 5px dotted #000; */border-left: 5px dotted #000;border-right: 5px dotted #000;border-top: 1px solid red;border-bottom: 1px solid red;}</style>
</head>
<body><div>内容</div>
</body>
</html>
效果：
小结：
➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？
• border：20px solid blue；
➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？
• border-top：10px dashed yellow；
盒子实际大小初级计算公式
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
盒子实际大小初级计算公式：
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
解决：当盒子被border撑大后，如何满足需求？
解决：计算多余大小，手动在内容中减去（手动内减）
（案例）盒子边框的小案例
需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
Code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 280px;height: 280px;background-color: #ffc0cb;border: 10px solid #00f;}</style>
</head>
<body><div></div>
</body>
</html>
（案例）新浪导航案例
需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
布局顺序：
- 从外往内，从上往下
每一个盒子的样式：
- 宽高
- 辅助的背景颜色
- 盒子模型的部分：border、padding、margin
- 其他样式：color、font-、text-、……
Code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}/* 后代: box里面的a */.box a {width: 80px;height: 40px;/* 推荐先加上: 清楚的看到文字在什么位置 *//* background-color: #edeef0; */display: inline-block;text-align: center;line-height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.box a:hover {background-color: #edeef0;color: #ff8400;}</style><!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body><div class="box"><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div><p><a href="#"></a></p>
</body>
</html>
内边距（ padding ）
内边距（padding）- 取值
作用：设置 边框 与 内容区域 之间的距离
属性名：padding
常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding:10px | 上右下左都设置为10px |
| 两个值 | padding:10px 20px | 上下设置为10px、左右设置为20px |
| 三个值 | padding:10px 20px 30px | 上设置为10px、左右设置为20px、下设置为30px |
| 四个值 | padding:10px 20px 30px 40px | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
内边距（padding）- 单方向设置
场景：只给盒子的某个方向单独设置内边距
属性名：padding - 方位名词
属性值：数字 + px
小结
给盒子设置四周 20px 的内边距可以通过什么属性设置？
padding : 20px ;
给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？
padding : 20px 30px ;
给盒子设置左侧50px的内边距可以通过什么属性设置？
padding-left : 50px ;
4.3 盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
注意点：
① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
盒子实际大小终极计算公式：
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
解决：当盒子被border和padding撑大后，如何满足需求？
自己计算多余大小，手动在内容中减去（手动内减）
拓展理解：
根据以上，我可以知道：
盒子实际大小：
width : 300+50+1
height : 300+50+1
新浪导航的优化
需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
解决方案：
采用 padding: 0 16px 来让文字标签左右间距相等 ，而不是设定文字标签为固定值
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}/* 后代: box里面的a */.box a {/* 优化：这里把宽度去除，用内边距来代替，从而实现左右等距 */padding: 0 16px;/* width: 80px; */height: 40px;/* 推荐先加上: 清楚的看到文字在什么位置 *//* background-color: #edeef0; */display: inline-block;text-align: center;line-height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.box a:hover {background-color: #edeef0;color: #ff8400;}</style><!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body><div class="box"><a href="#">新浪</a><a href="#">新浪导航新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div><p><a href="#"></a></p>
</body>
</html>
（拓展）不会撑大盒子的特殊情况
➢ 不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
CSS3盒模型（自动内减）
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
解决方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;border: 10px solid #000;padding: 20px;/* 內减模式 *//* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */box-sizing: border-box;}</style>
</head>
<body><div>文字</div>
</body>
</html>
效果：
外边距（margin）
5.1外边距（margin）- 取值
margin: 50px;
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin:10px | 上右下左都设置为10px |
| 两个值 | margin:10px 20px | 上下设置为10px，左右设置为20px |
| 三个值 | margin:10px 20px 30px | 上设置为10px，左右设置为20px，下设置为30px |
| 四个值 | margin:10px 20px 30px 40px | 上设置为10px，右设置为20px，下设置为30px，左设置为40px |
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
5.2外边距（margin） - 单方向设置
margin-left: 100px;
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
小结：
➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置？
• margin : 20px ;
➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？
• margin : 20px 30px ;
➢ 给盒子设置左侧50px的外边距可以通过什么属性设置？
• margin-left : 50px ;
5.3 margin单方向设置的应用
➢ 应用：
| 方向 | 属性 | 效果 |
|---|---|---|
| 水平方向 | margin-left | 让当前盒子距离左边界一段距离 |
| 水平方向 | margin-right | 让当前盒子距离右边界一段距离 |
| 垂直方向 | margin-top | 向当前盒子下面移动 |
| 垂直方向 | margin-bottom | 让下面的盒子往下移动 |
理解参考：
https://www.php.cn/website-design-ask-492044.html
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;margin: 50px;margin-left: 100px;}</style>
</head>
<body><div>div</div>
</body>
</html>
5.4 清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些
标签默认的margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：
右边是通配符
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><p>pppp</p><p>pppp</p><h1>h1</h1><ul><li>lili</li></ul>
</body>
</html>
效果：
版心居中：
Code：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 1000px;height: 300px;background-color: pink;margin: 0 auto;} </style>
</head>
<body><!-- 版心: 网页的有效内容 --><!-- 版心居中 --><div>版心</div>
</body>
</html>
效果：
注意：
这里 margin 指上下距离为0，左右为自动适配，从而就可以让版面居中
左右自动适配：
网页版面宽度为1000，电脑的页面宽度为1536，通过1536-1000=536，从而计算得出左右margin为268
（案例）网页新闻列表案例
需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
布局顺序：
- 从外往内，从上往下
每一个盒子的样式：
- 宽高
- 辅助的背景颜色
- 盒子模型的部分：border、padding、margin
- 其他样式：color、font-、text-、……
Code:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{/* 将以后要使用的元素的内外边距都清为0 */margin: 0;padding: 0;/* 所有的标签都可能添加内边距或border *//* 故这里采用 内减 的方式 */box-sizing: border-box;}.news {width: 500px;height: 400px;border: 1px solid #ccc;margin: 50px auto;padding: 42px 30px 0;}.news h2{border-bottom: 1px solid #ccc;font-size: 30px;/* 行高是一倍，即字号大小 */line-height: 1;padding-bottom: 9px;}/* 去掉列表的符号 */ul{list-style: none;}.new li{height: 50px;border-bottom: 1px solid #ccc;padding-left: 28px;/* 让字体上下居中 */line-height: 50px;}.news a{text-decoration: none;color: #666;font-size: 18px;}</style> </head><body><div class="news"><ul><!-- 快捷键： ul>li>a --><li><a href="a"></a></li><li><a href="b"></a></li><li><a href="c"></a></li><li><a href="d"></a></li></ul></div> </body> </html>
外边距正常情况
场景：水平布局 的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和
外边距折叠现象 – ① 合并现象
场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden （这是最完美的方案）
- 转换成行内块元素
- 设置浮动
Code：
.father {width: 300px;height: 300px;background-color: pink;/* padding-top: 50px; *//* 如果设计稿没有border, 不能使用这个解决办法 *//* border: 1px solid #000; *//* overflow: hidden; */}.son {width: 100px;height: 100px;background-color: skyblue;margin-top: 50px;display: inline-block;}
行内元素的margin和padding无效情况
场景：给行内元素设置margin和padding时
结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
总结：
◆ 能够认识不同选择器的 优先级 公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题
谷歌调试工具：
CSS代码中，如果上一行出错，会导致下一行失效
CSS布局：CSS三大特性、盒子模型相关推荐
- 前端与移动开发-----CSS（三大特性+盒子模型原理）
CSS 三大特性(层叠性.继承性.优先级 ) CSS 三大特性之层叠性 在开发中出现样式层叠时候:对一个元素多次设置同一个样式,会使用最后一次设置的属性值 . 样式层叠的原则:样式冲突,就近原则,后定 ...
- CSS / 三大特性+盒子模型+PS基础
目录 CSS的三大特性 层叠性 继承性 优先级 盒子模型 边框 border 内边距 padding 外边距 margin PS测量 CSS的三大特性 层叠性 后来居上,相同选择器设置相同样式时,一个 ...
- CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性 常用布局样式属性 常用文本样式属性 元素溢出 显示特性 盒子模型 常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
- 阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
走的越远你就越会发现 真正能在危难之时拉你一把的人 只有你自己 前段时间跟家里打视频电话 每每看到家人关怀的目光以及她们逐渐苍老的面庞 就不忍心再对他们言哭言累 有时午夜辗转反侧脑海里一想到他们 就会 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS初识- 选择器 背景 浮动 盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
- CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
文章目录 1.CSS的元素显示模式 1.1 什么是元素显示模式 1.2 块元素 1.3 行内元素 1.4 行内块元素 1.5 元素显示模式总结 1.6 元素显示模式转换 2.盒子模型:网页布局的基础 ...
- 黑马CSS笔记（二）盒子模型
盒子模型 01 盒子模型 02 PS基本操作 03 综合案例 产品模块案例 <style>* {padding: 0;margin: 0;}body {background-color: ...
- 【CSS学习（三）盒子模型、边距重叠 浮动、清除浮动】
盒子模型 盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
- web前端入门学习 css（4）（盒子模型）
文章目录 盒子模型(box model) 盒子模型的组成 边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
最新文章
- 消灭 Java 代码的“坏味道”
- 不是每个打工人都能享受 996 的福报
- html5绘制随机五角星_html5 canvas画五角星（随机生成）
- Integer及String的equals及==注意示例，涉及自动拆箱、自动装箱以及equals源码分析
- 【原创】MySQL5.7 虚拟列实现表达式索引
- 软件开发生命周期中的设计阶段_测试基础——软件开发生命周期
- 如何控制油门更准确？
- 第 20 章 观察者模式
- 【Hive】日期函数
- xdebug+webgrind
- 实现两线程的同步一（wait/notify）
- PDFLib去水印办法
- D3js-中国各主要大城市经纬度数据
- ArcGIS中输出指定比例尺图片
- Flink On K8S终极实现方案
- buu-[Zer0pts2020]Can you guess it?
- 测试单核cpu和多核cpu执行java多线程任务的效率
- C# WinForm GUI之WinForm基础
- Unity一个默认占用C盘空间的小坑
- 数据挖掘算法揭秘篇——分类方法（一）