CSS Day6-Day8 浮动和定位

发布时间：2024年01月15日

6.1 浮动

float 使一个元素向其父元素的左侧或右侧移动，从而脱离文档流

可选值： none，默认值，元素默认在文档流中排列
          left，向页面的左侧浮动
         ?right，向页面的右侧浮动
浮动特点

1.给元素设置浮动，该元素就会脱离标准文档流，不再占据原来的位置

2.浮动元素不会超出父元素

3.给元素设置浮动后，该元素将会变成行内块

4.不论设置左浮动还是右浮动，其下面的元素都会朝左上角移动

5.父元素设置padding值，浮动元素不会超过padding值

6.两个相同方位的浮动元素会紧挨着排列，这两个都脱离了标准文档流

为何设置浮动？

元素浮动主要就是为了元素之间在一行排列（页面布局问题）

元素在一行展示的方法：

1、行内块展示，缺点就是元素之间有空隙

2、浮动，浮动的元素在一行上会紧紧排列

浮动的影响

子元素设置margin值时，浏览器会默认把margin值给到父元素，导致父元素的高度塌陷，本质是父元素没有设置高度，其高度是由子元素来撑开的

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?ul {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?background-color: pink;
 ? ? ? ? ? ?margin: 0 auto;
 ? ? ?  }
?
 ? ? ? ?li {
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?float: right;
?
 ? ? ? ? ? ?list-style: none;
 ? ? ? ? ? ?background-color: red;
 ? ? ?  }
?
 ? ? ? ?div {
 ? ? ? ? ? ?width: 300px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? ? ?background-color: green;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<ul>
 ? ? ? ?<li></li>
 ? ? ? ?<li></li>
 ? ?</ul>
 ? ?<div></div>
</body>
?
</html>

解决办法

1、给父元素设置border边框

2、给父元素设置padding值

3、给父元素设置overflow:hidden

上margin塌陷问题是针对父元素里面的第一个子元素产生的问题

下margin塌陷问题是针对父元素里面的最后一个子元素产生的问题

6.2 清除浮动?????????????

添加额外的空标签，设置属性clear，值为both
overflow属性：属性值为hidden
给父元素设置after伪元素

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?.father {
 ? ? ? ? ? ?width: 600px;
 ? ? ? ? ? ?/* 2.overflow属性：属性值为auto hidden scroll visible */
 ? ? ? ? ? ?/* overflow: hidden; */
 ? ? ? ? ? ?background-color: pink;
 ? ? ?  }
?
 ? ? ? ?.box1,
 ? ? ? ?.box2 {
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?background-color: red;
 ? ? ?  }
?
 ? ? ? ?.box2 {
 ? ? ? ? ? ?background-color: green;
 ? ? ?  }
?
 ? ? ? ?/* 1.清除浮动添加额外的空标签，设置属性clear，值为both */
 ? ? ? ?/* div {
 ? ? ? ? ?  clear: both;
 ? ? ?  } */
 ? ? ? ?/* 3. */
 ? ? ? .clearfix:after {
 ? ? ? ? ? /* 只写一个冒号是为了兼容其他浏览器不支持:: */
 ? ? ? ? ? /* content值加点，为了防止低版本浏览器解析时出现空隙问题 */
 ? ? ? ? ? content: ".";
 ? ? ? ? ? /* 转化为块元素 */
 ? ? ? ? ? display: block;
 ? ? ? ? ? height: 0;
 ? ? ? ? ? /* 隐藏content里面的小点 */
 ? ? ? ? ? /* overflow: hidden; */
 ? ? ? ? ? visibility: hidden;
 ? ? ? ? ? /* 清除浮动 */
 ? ? ? ? ? clear: both;
 ? ? ? }
?
 ? ? ? .clearfix {
 ? ? ? ? ? /* *代表只有ie6和ie7才会解析这段代码，zoom是ie6和ie7的清除浮动的方法 */
 ? ? ? ? ? *zoom: 1;
 ? ? ? }
 ? </style>
 ? ? ? </head>
?
 ? <body>
 ? ? ? <div class="father clearfix">
 ? ? ? ? ? <div class="box1"></div>
 ? ? ? ? ? <div class="box2"></div>
 ? ? ? ? ? <!-- <div></div> -->
 ? ? ? </div>
 ? </body>
?
 ? </html>

?4.给父元素添加双伪元素after before

<!DOCTYPE html>
 ? <html lang="en">
?
 ? <head>
 ? ? ? <meta charset="UTF-8">
 ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ? ? <title>Document</title>
 ? ? ? <style>
 ? ? ? ? ? .box1 {
 ? ? ? ? ? ? ? width: 500px;
 ? ? ? ? ? ? ? background-color: pink;
 ? ? ? ? ? }
?
 ? ? ? ? ? .box2 {
 ? ? ? ? ? ? ? width: 100px;
 ? ? ? ? ? ? ? height: 100px;
 ? ? ? ? ? ? ? background-color: red;
 ? ? ? ? ? ? ? float: left;
 ? ? ? ? ? }
?
 ? ? ? ? ? .box3 {
 ? ? ? ? ? ? ? width: 200px;
 ? ? ? ? ? ? ? height: 100px;
 ? ? ? ? ? ? ? background-color: green;
 ? ? ? ? ? ? ? float: left;
 ? ? ? ? ? }
 ?      /*双伪元素法*/
 ? ? ? ? ? .clearfix:before,
 ? ? ? ? ? .clearfix:after {
 ? ? ? ? ? ? ? content: "";
 ? ? ? ? ? ? ? display: table;
 ? ? ? ? ? ? ? /*触发BFC*/
 ? ? ? ? ? ? ? clear: both;
 ? ? ? ? ? }
?
 ? ? ? ? ? .clearfix {
 ? ? ? ? ? ? ? *zoom: 1;
 ? ? ? ? ? }
 ? ? ? </style>
 ? </head>
?
 ? <body>
 ? ? ? <div class="box1 clearfix">
 ? ? ? ? ? <div class="box2"></div>
 ? ? ? ? ? <div class="box3"></div>
 ? ? ? </div>
 ? </body>
?
 ? </html>

5.BFC块级格式化上下文

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC
当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素
BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部
开启BFC后，元素将会具有如下的特性：

1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

如何开启元素的BFC？

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

?案例1

 ? <!DOCTYPE html>
 ? <html lang="en">
?
 ? <head>
 ? ? ? <meta charset="UTF-8">
 ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ? ? <title>Document</title>
 ? ? ? <style>
 ? ? ? ? ? .box {
 ? ? ? ? ? ? ? border: 1px solid red;
 ? ? ? ? ? ? ? /* 开启BFC的元素可以包含浮动的子元素,父元素的垂直外边距不会和子元素重叠  */
 ? ? ? ? ? ? ? overflow: hidden;
 ? ? ? ? ? }
?
 ? ? ? ? ? .box1 {
 ? ? ? ? ? ? ? width: 100px;
 ? ? ? ? ? ? ? height: 100px;
 ? ? ? ? ? ? ? float: left;
 ? ? ? ? ? ? ? background-color: pink;
 ? ? ? ? ? }
?
 ? ? ? ? ? /* 开启BFC 不会在布局上影响到外面的元素 */
 ? ? ? ? ? .box2 {
 ? ? ? ? ? ? ? width: 200px;
 ? ? ? ? ? ? ? height: 200px;
 ? ? ? ? ? ? ? background-color: green;
 ? ? ? ? ? }
 ? ? ? </style>
 ? </head>
?
 ? <body>
 ? ? ? <div class="box">
 ? ? ? ? ? <div class="box1"></div>
 ? ? ? </div>
 ? ? ? <div class="box2"></div>
?
 ? </body>
?
 ? </html>

?案例2

 ? <!DOCTYPE html>
 ? <html lang="en">
?
 ? <head>
 ? ? ? <meta charset="UTF-8">
 ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ? ? <title>Document</title>
 ? ? ? <style>
 ? ? ? ? ? .box {
 ? ? ? ? ? ? ? float: left;
 ? ? ? ? ? ? ? width: 200px;
 ? ? ? ? ? ? ? height: 200px;
 ? ? ? ? ? ? ? background-color: pink;
 ? ? ? ? ? }
?
 ? ? ? ? ? .box1 {
 ? ? ? ? ? ? ? width: 500px;
 ? ? ? ? ? ? ? height: 400px;
 ? ? ? ? ? ? ? /* 开启BFC的元素**不会被**浮动元素所覆盖 */
 ? ? ? ? ? ? ? overflow: hidden;
 ? ? ? ? ? ? ? background-color: red;
 ? ? ? ? ? }
 ? ? ? </style>
 ? </head>
?
 ? <body>
 ? ? ? <div class="box">我是浮动的元素</div>
 ? ? ? <div class="box1">我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动</div>
 ? </body>
?
 ? </html>

三个布局案例

（1）上下布局

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?.top {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 100px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.banner {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 50px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 50px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.main {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 300px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.footer {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 200px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="top">top</div>
 ? ?<div class="banner">banner</div>
 ? ?<div class="main">main</div>
 ? ?<div class="footer">footer</div>
</body>
?
</html>

（2）左右布局

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ?  * {
 ? ? ? ? ? ?padding: 0;
 ? ? ? ? ? ?margin: 0;
 ? ? ?  }
?
 ? ? ? ?.top {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 100px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.banner {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 50px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 50px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.main {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ?  }
?
 ? ? ? ?.left {
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? ? ?line-height: 300px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.right {
 ? ? ? ? ? ?float: right;
 ? ? ? ? ? ?width: 580px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? ? ?line-height: 300px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.footer {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?line-height: 200px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="top">top</div>
 ? ?<div class="banner">banner</div>
 ? ?<div class="main">
 ? ? ? ?<div class="left">left</div>
 ? ? ? ?<div class="right">right</div>
 ? ?</div>
 ? ?<div class="footer">footer</div>
</body>
?
</html>

（3）多布局

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ?  * {
 ? ? ? ? ? ?padding: 0;
 ? ? ? ? ? ?margin: 0;
 ? ? ? ? ? ?list-style: none;
 ? ? ?  }
?
 ? ? ? ?.top {
 ? ? ? ? ? ?width: 1000px;
 ? ? ? ? ? ?height: 50px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ? ? ? ?/* border: 2px dashed gray;
 ? ? ? ? ?  background-color: rgb(212, 194, 250); */
 ? ? ?  }
?
 ? ? ? ?.container {
 ? ? ? ? ? ?width: 800px;
 ? ? ? ? ? ?margin: 10px auto;
 ? ? ?  }
?
 ? ? ? ?.banner {
 ? ? ? ? ? ?height: 100px;
 ? ? ?  }
?
 ? ? ? ?.top,
 ? ? ? ?.banner {
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
?
 ? ? ? ?.main_top li {
 ? ? ? ? ? ?/* float: left;
 ? ? ? ? ?  width: 190px; */
 ? ? ? ? ? ?height: 150px;
 ? ? ? ? ? ?/* margin-top: 10px;
 ? ? ? ? ?  margin-left: 5px; */
 ? ? ? ? ? ?/* border: 2px dashed gray;
 ? ? ? ? ?  background-color: rgb(212, 194, 250); */
 ? ? ?  }
?
 ? ? ? ?.main_bottom li {
 ? ? ? ? ? ?height: 250px;
 ? ? ?  }
?
 ? ? ? ?.main_top li,
 ? ? ? ?.main_bottom li {
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 190px;
 ? ? ? ? ? ?margin-top: 10px;
 ? ? ? ? ? ?margin-left: 6px;
 ? ? ? ? ? ?border: 2px dashed gray;
 ? ? ? ? ? ?background-color: rgb(212, 194, 250);
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="top"></div>
 ? ?<div class="container">
 ? ? ? ?<div class="banner"></div>
 ? ? ? ?<div class="main">
 ? ? ? ? ? ?<ul class="main_top">
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ?</ul>
 ? ? ? ? ? ?<ul class="main_bottom">
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ? ? ?<li></li>
 ? ? ? ? ? ?</ul>
 ? ? ? ?</div>
 ? ?</div>
 ? ?</div>
?
?
</body>
?
</html>

6.3 定位

6.3.1 相对定位 position:relative;

需要和偏移量结合使用才生效

top 正值时元素向下移动，负值时元素向上移动

bottom 正值时元素向上移动，负值时元素向下移动

left 正值时元素向右移动，负值时元素向左移动

right 正值时元素向左移动，负值时元素向右移动

相对于自己的定位

相对于自己之前的位置进行了偏移，不会影响其他元素

元素偏移后原本的位置不会被其他元素所占据

偏移量的数值可以超出父元素，也可以覆盖兄弟元素

开启相对定位的元素不会脱离标准文档流（下面的元素不会跑上去），其层级会比普通元素要高，所以会覆盖兄弟元素

同时设置top和bottom时，top会生效；通常情况下会使用top和left来进行偏移量的设置

元素开启相对定位后，块元素还是块元素，行内元素还得行内元素，不会变

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?.father{
 ? ? ? ? ? ?width: 500px;
 ? ? ? ? ? ?height: 500px;
 ? ? ? ? ? ?border: 1px solid red;
 ? ? ? ? ? ?background-color: pink;
 ? ? ?  }
 ? ? ? ?.box1,.box2{
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 200px;
 ? ? ?  }
 ? ? ? ?.box1{
 ? ? ? ? ? ?/* 开启相对定位 */
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?/* 设置偏移量 */
 ? ? ? ? ? ?top: 20px;
 ? ? ? ? ? ?/* 元素设置偏移量时，可以同时设置margin值，不推荐同时使用 */
 ? ? ? ? ? ?margin-bottom: 40px;
 ? ? ? ? ? ?background-color: red;
?
 ? ? ?  }
 ? ? ? ?.box2{
 ? ? ? ? ? ?background-color: skyblue;
 ? ? ?  }
 ? ? ? ?span{
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?background-color: green;
 ? ? ? ? ? ?/* 开启相对定位 */
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?top: 20px;
 ? ? ?  }
?
 ? ?</style>
</head>
<body>
 ? ?<div class="father">
 ? ? ? ?<div class="box1"></div>
 ? ? ? ?<!-- 元素开启相对定位后，行内元素还是行内元素 -->
 ? ? ? ?<span>你好</span>
 ? ? ? ?<div class="box2"></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>Document</title>
 ? ?<style>
 ? ? ? ?.box {
 ? ? ? ? ? ?width: 320px;
 ? ? ? ? ? ?height: 320px;
 ? ? ? ? ? ?border: 1px solid #f00;
 ? ? ?  }
?
 ? ? ? ?a {
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?display: inline-block;
 ? ? ? ? ? ?text-decoration: none;
 ? ? ? ? ? ?color: #fff;
 ? ? ? ? ? ?background-color: pink;
 ? ? ?  }
?
 ? ? ? ?a:nth-child(3) {
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?top: 200px;
 ? ? ? ? ? ?left: -200px;
 ? ? ?  }
?
 ? ? ? ?a:nth-child(2) {
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?left: 100px;
 ? ? ?  }
?
 ? ? ? ?a:nth-child(4) {
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?right: -200px;
 ? ? ? ? ? ?bottom: -100px;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="box">
 ? ? ? ?<a href="#">链接1</a>
 ? ? ? ?<a href="#">链接2</a>
 ? ? ? ?<a href="#">链接3</a>
 ? ? ? ?<a href="#">链接4</a>
 ? ? ? ?<a href="#">链接5</a>
 ? ?</div>
</body>
?
</html>

6.3.2 绝对定位 position:absolute;

开启元素的绝对定位，该元素就会脱离文档流（下面的元素会占据该元素的位置）

层级关系

子绝父相：设置偏移量后，元素是相对于（有相对定位的）父元素进行偏移，如果没有相对定位的父元素，则相对于浏览器（html）进行偏移了

开启绝对定位后，元素会转化为行内块

开启绝对定位设置偏移量后，使用外边距-上和外边距-左时，元素将在现在位置基础上进行移动（所以不推荐）

开启绝对定位后浮动不生效

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ?  * {
 ? ? ? ? ? ?padding: 0;
 ? ? ? ? ? ?margin: 0;
 ? ? ?  }
?
 ? ? ? ?.father {
 ? ? ? ? ? ?width: 500px;
 ? ? ? ? ? ?height: 500px;
 ? ? ? ? ? ?/* 子绝父相 */
 ? ? ? ? ? ?position: relative;
 ? ? ? ? ? ?background-color: pink;
 ? ? ? ? ? ?padding: 10px;
 ? ? ? ? ? ?margin: 0 auto;
 ? ? ?  }
?
 ? ? ? ?.box1 {
 ? ? ? ? ? ?width: 90px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?/* 设置绝对定位 */
 ? ? ? ? ? ?position: absolute;
 ? ? ? ? ? ?background-color: blue;
 ? ? ?  }
?
 ? ? ? ?.box2 {
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?background-color: yellow;
 ? ? ? ? ? ?/* 设置绝对定位 */
 ? ? ? ? ? ?/* position: absolute; */
 ? ? ? ? ? ?/* float: right;
 ? ? ? ? ?  left: 100px;
 ? ? ? ? ?  top: 0; */
 ? ? ?  }
?
 ? ? ? ?.box3 {
 ? ? ? ? ? ?width: 110px;
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?background-color: green;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="father">
 ? ? ? ?<div class="box1"></div>
 ? ? ? ?<div class="box2"></div>
 ? ? ? ?<div class="box3"></div>
 ? ?</div>
</body>
?
</html>

6.3.3 固定定位 position:fixed;

开启固定定位后，元素会脱离文档流，即使不设置偏移量，元素也会固定住

开启固定定位后，会影响兄弟元素

偏移量的参考物是浏览器的可视窗口

开启固定定位后，会把元素转换为行内块???????

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?div {
 ? ? ? ? ? ?width: 80px;
 ? ? ? ? ? ?height: 30px;
 ? ? ? ? ? ?position: fixed;
 ? ? ? ? ? ?right: 10px;
 ? ? ? ? ? ?bottom: 50px;
 ? ? ? ? ? ?line-height: 30px;
 ? ? ? ? ? ?text-align: center;
 ? ? ? ? ? ?background-color: #4F4F4F;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div>回到顶部</div>
 ? ?<p>
 ? ? ?  很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
 ? ? ?  很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
 ? ? ?  风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
 ? ? ?  深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
 ? ? ?  我们也像一群大雁，飞翔在人生的天空中。
 ? ? ?  前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
 ? ? ?  当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
 ? ? ?  再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
 ? ? ?  我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
 ? ? ?  当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
 ? ? ?  很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
 ? ? ?  风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
 ? ? ?  深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
 ? ? ?  我们也像一群大雁，飞翔在人生的天空中。
 ? ? ?  前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
 ? ? ?  当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
 ? ? ?  再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
 ? ? ?  我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
 ? ? ?  当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
 ? ? ?  很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
 ? ? ?  风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
 ? ? ?  深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
 ? ? ?  我们也像一群大雁，飞翔在人生的天空中。
 ? ? ?  前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
 ? ? ?  当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
 ? ? ?  再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
 ? ? ?  我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
 ? ? ?  当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
 ? ? ?  很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
 ? ? ?  风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
 ? ? ?  深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
 ? ? ?  我们也像一群大雁，飞翔在人生的天空中。
 ? ? ?  前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
 ? ? ?  当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
 ? ? ?  再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
 ? ? ?  我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
 ? ? ?  当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
 ? ? ?  很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
 ? ? ?  风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
 ? ? ?  深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
 ? ? ?  我们也像一群大雁，飞翔在人生的天空中。
 ? ? ?  前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
 ? ? ?  当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
 ? ? ?  再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
 ? ? ?  我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
 ? ? ?  当秋天不再，大雁飞过千山，南方的冬天还会冷吗?
 ? ?</p>
</body>
?
</html>

6.3.4 粘性定位 position:sticky;

开启粘性定位后一定要设置偏移量，否则没有任何作用

偏移量是相对于浏览器窗口

父元素消失后粘性定位的元素才会失效

粘性定位生效后就相当于固定定位

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ?  * {
 ? ? ? ? ? ?margin: 0;
 ? ? ? ? ? ?padding: 0;
 ? ? ?  }
?
 ? ? ? ?body {
 ? ? ? ? ? ?height: 2000px;
?
 ? ? ?  }
?
 ? ? ? ?ul {
 ? ? ? ? ? ?height: 700px;
 ? ? ? ? ? ?background-color: #ccc;
 ? ? ?  }
?
 ? ? ? ?ul li {
 ? ? ? ? ? ?height: 100px;
 ? ? ? ? ? ?list-style: none;
 ? ? ?  }
?
 ? ? ? ?li:nth-child(odd) {
 ? ? ? ? ? ?background-color: pink;
 ? ? ?  }
?
 ? ? ? ?li:nth-child(even) {
 ? ? ? ? ? ?background-color: skyblue;
 ? ? ?  }
?
 ? ? ? ?li:nth-child(3) {
 ? ? ? ? ? ?position: sticky;
 ? ? ? ? ? ?top: 50px;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<ul>
 ? ? ? ?<li></li>
 ? ? ? ?<li></li>
 ? ? ? ?<li>3</li>
 ? ? ? ?<li></li>
 ? ? ? ?<li></li>
 ? ?</ul>
</body>
?
</html>

定位特点：

?????????????

如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index

???????

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?div {
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?background-color: #ccc;
 ? ? ?  }
?
 ? ? ? ?.box1 {
 ? ? ? ? ? ?position: relative;
 ? ? ?  }
?
 ? ? ? ?.box2 {
 ? ? ? ? ? ?width: 250px;
 ? ? ? ? ? ?position: absolute;
 ? ? ? ? ? ?z-index: 999;
 ? ? ? ? ? ?background-color: pink;
 ? ? ?  }
?
 ? ? ? ?.box3 {
 ? ? ? ? ? ?width: 220px;
 ? ? ? ? ? ?position: fixed;
 ? ? ? ? ? ?/* z-index: 2; */
 ? ? ? ? ? ?background-color: skyblue;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="box1"></div>
 ? ?<div class="box2"></div>
 ? ?<div class="box3"></div>
</body>
?
</html>

6.4 语义化标签

6.4.1 布局标签（了解）

header 整个页面或者部分区域的头部

footer 整个页面或者部分区域的底部

nav 导航栏

article 文章/帖子杂志新闻博客评论区等用到

section 页面中的某段文字或者文章中的某段文字（里面的文字通常会包含标题） p

aside 侧边栏

main 文档的主要内容（IE不支持），几乎不用

6.4.2 状态标签（了解）

meter 在已知范围内的标准测量

progress:主要就是显示某个任务完成进度的指示器

6.4.3 表单控件

placeholder 提示文字文本框提示语
required 表示该输入项的值是必须要填写的
autofocus 自动获取焦点，一般情况下是写在页面的第一个表单里面，让用户知道需要在哪输入内容
type属性值：

email 邮箱地址必须写@以及@后要有内容

number 数值 step min max属性 step是值数字已多少值为基础朝上或朝下加减，min是值最小值，输入框不允许输入比这个小的值，max是值输入框能够输入的最大值（设置这个值之后input会变小）

search 搜索框，输入内容后可以叉号删除

color 颜色值，默认黑色

date 日期展示年月日

month 月份，可以选择哪一年的哪月

week 周，哪一年的第几周不常用

time 展示时分，没有秒

 <form action="#">
 ? ? ?  姓名: <input type="text" name="usename" placeholder="请输入姓名" autofocus><br />
 ? ? ?  密码：<input type="password" name="password" placeholder="请输入密码"><br />
 ? ? ?  性别：<input type="radio" name="sex">男<br />
 ? ? ?  爱好：<input type="checkbox" name="hobby">敲代码<br />
?
?
 ? ? ?  邮箱： <input type="email" name="email" required><br />
 ? ? ?  数值： <input type="number" step="4" min="50"><br />
?
 ? ? ?  搜索框： <input type="search"><br />
 ? ? ?  颜色：<input type="color"><br />
 ? ? ?  日期：<input type="date"><br />
 ? ? ?  月份： <input type="month"><br />
 ? ? ?  周：<input type="week"><br />
 ? ? ?  时间：<input type="time">
 ? ? ? ?<input type="submit"><br />
</form>

文章来源:https://blog.csdn.net/2301_76534754/article/details/135545936
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！