- w3school:Position(定位)、Display(显示)
- 菜鸟教程:Position(定位)、Display(显示)
- 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;
}
一点点笔记,以便以后翻阅。