- HTMLファイルの内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../StudyCSS/css/Demo03.css">
<title>Document</title>
</head>
<body>
<div class="class-box">
<div class="class01">1</div>
<div class="class01">2</div>
<div class="class01" id="id02">我的定位：relative，相对的位置是参考自身原来的位置</div>
<div class="class01">4</div>
<div class="class01">5</div>
<div class="class01" id="id01">我的id是id01 我的定位：absolute;</div>
<div class="class01">7</div>
<div class="class01">8</div>
<div class="class01">9</div>
我的定位：position: fixed;
</div>
<div class="class01">10</div>
<div class="class01">11</div>
<div class="class01" id="id03">我的定位：sticky【粘性定位】</div>
<div class="class01">13</div>
<div class="class01">14</div>
<div class="class01">15</div>
<div class="class01">16</div>
<div class="class01">17</div>
<div class="class01">18</div>
<div class="class01" id="id04">19</div>
<div class="class01" id="id05">20</div>
<div class="class01">21</div>
<div class="class01">22</div>
<div class="class01">23</div>
<div class="class01">24</div>
<div class="class01">25</div>
<div class="class01">26</div>
<div class="class01">27</div>
<div class="class01" id="id06">28被隐藏了</div>
<div class="class01">29</div>
<div class="class01" id="id07">我是30，28被隐藏了，我的呈现方式是inline，我不能设置长宽，我的大小是根据里面的内容进行自适应的</div>
<div class="class01">31</div>
<div class="class01" id="id08">我是32，我的呈现方式是 inline-block 我可以设置长宽哦，也不会独占一行的</div>
<div class="class01" id="id09">我是33，我的呈现方式是 inline-block 我可以设置长宽哦，也不会独占一行的</div>
<div class="class01">34</div>
<div class="class01">35</div>
<hr>
<table id="id10">
<tr>
<td colspan="2">小印01、小印02</td>
<!-- <td>小印02</td> -->
<td>小印03</td>
<td>小印04</td>
<td>小印05</td>
</tr>
<tr>
<td>小印01</td>
<td>小印02</td>
<td>小印03</td>
<td>小印04</td>
<td rowspan="2">小印05 * 2</td>
</tr>
<tr>
<td>小印01</td>
<td>小印02</td>
<td>小印03</td>
<td>小印04</td>
<!-- <td>小印05</td> -->
</tr>
</table>
<hr>
<table id="id11">
<tr>
<td colspan="2">小印01、小印02</td>
<!-- <td>小印02</td> -->
<td>小印03</td>
<td>小印04</td>
<td>小印05</td>
</tr>
<tr>
<td>小印01</td>
<td>小印02</td>
<td>小印03</td>
<td>小印04</td>
<td rowspan="2">小印05 * 2</td>
</tr>
<tr>
<td>小印01</td>
<td>小印02</td>
<td>小印03</td>
<td>小印04</td>
<!-- <td>小印05</td> -->
</tr>
</table>
</body>
</html>
- CSSファイルの内容：
* {
padding: 0;
margin: 0;
}
/* 更多相关定位的资料可以查看 w3和菜鸟 里面的内容
* 定位：position: absolute/ fixed/ relative/ static/ sticky(h5);
* position 需要与 top、bottom、left、right 连用
*
* absolute：绝对定位，当这个元素没有父级或者父级的定位是默认的【非静态定位：static】的时候是把浏览器作为参考的，否则就是把父级作为参考
*/
.class01 {
height: 100px;
width: 100px;
background-color: rgba(95, 90, 90, 0.589);
margin-top: 10px;
margin-left: 10px;
}
#id01 {
background-color: #ff6700;
position: absolute;
left: 120px;
top: 0;
}
.class-box {
/* position: fixed; 它的的参照物是当前浏览器可视的部分，通过left、top等来调整它的固定位置，当浏览器窗口滚动它不会随之滚动【适用于类似填写信息的窗口】 */
position: fixed;
left: 200px;
top: 5px;
/* 设置为透明色 */
background-color: transparent;
border: solid black 1px;
height: 950px;
width: 500px;
}
#id02 {
/* position: relative; 相对定位，是相对于其原来本身的位置，然后再进行上下左右的调整 */
position: relative;
left: 150px;
top: 50px;
background-color: rgb(173, 216, 233);
font-size: small;
}
#id03 {
/* position: sticky; 相当于在【position:relative 】和【position:fixed】之间切换，设置相应的top、left等。
* 例如：当 top: 20px; ，当元素随着滚动向上移动时，元素距离顶部为20px的时候，此元素就不会再随之向上滚动【类似于position: fixed;】
*/
position: sticky;
top: 20px;
background-color: rgba(195, 101, 233, 0.658);
}
#id04 {
background-color: rgba(222, 243, 101, 0.589);
position: absolute;
/* z-index: ; 数值越高越在上层 */
z-index: 4;
}
#id05 {
background-color: rgba(238, 179, 139, 0.589);
position: relative;
top: 0px;
z-index: 3;
}
#id06 {
/*
* 呈现形式：display: none/ block/ inline/ inline-block;
* block：块级标签，可设置宽高，元素独占一行
* inline：行标签，不可设置宽高，元素自适应内部内容
* inline-block：介于 block 和 inline 之间，可设置宽高，但是不会独占一行
*
* display: none; 呈现方式：不显示
* 默认值：block 块级标签，可设置宽高，元素独占一行
*/
display: none;
}
#id07 {
background-color: rgb(248, 157, 157);
display: inline;
}
#id08 {
/* 无意中发现，设置属性为 inline-block 后，他们两个的对齐位置是根据里面的内容来对齐的
* 例如：id08 中的的内容自动换行到了第三行， id09 中的内容只有一行，id09 的内容与 id08 的最后一行内容平行
* 同样的，是参照前面的内容的最后位置，对应自己内容的最后位置
*/
display: inline-block;
font-size: small;
}
#id09 {
display: inline-block;
font-size: small;
}
/* 表格线框
* border-collapse: separate/ collapse;
* separate：默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 属性
* collapse：如果可能，边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性
*
* border-spacing: ;
* 规定相邻单元的边框之间的距离。使用px，cm等单位。【不可以使用负值】
* 如果定义一个长度参数，那么定义的是水平和垂直的间距
* 如果是两个长度参数，那么第一个设置水平间距，第二个为垂直间距
*/
#id10 {
margin-top: 50px;
margin-left: 900px;
margin-bottom: 100px;
border: solid black 1px;
width: 500px;
height: 100px;
/* 单元格之间的距离设置为没有 */
border-collapse: collapse;
}
#id10 td {
border: solid black 1px;
}
#id11 {
margin-top: 50px;
margin-left: 900px;
margin-bottom: 100px;
border: solid black 1px;
width: 500px;
height: 100px;
/* 规定相邻单元的边框之间的距离 */
border-spacing: 5px 3px;
}
#id11 td {
border: solid black 1px;
}
後で読むことができるように、いくつかメモを取ります。