HTML+CSS基础知识个人笔记_6
1. 清除浮动的四种方法
清除浮动的问题来源，就是由于子级元素的浮动导致父级元素的内部高度为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01 清除浮动的本质.html</title>
<style>
/*清除浮动的问题来源，就是父级元素因为子级元素的浮动而导致的内部高度为0*/
.father {
border: 1px solid red;
}
.big {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.footer {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
1.1 额外标签法
在最后浮动的一个标签后面，加上一个额外的标签，再clear:both;
缺点：结构不好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 额外标签法.html</title>
<style>
/*清除浮动的问题来源，就是父级元素因为子级元素的浮动而导致的内部高度为0*/
.father {
border: 1px solid red;
}
.big {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
/*清除浮动*/
.clear {
clear: both;
}
.footer {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<!-- 在最后浮动的标签下加一个额外的标签，然后清除浮动 -->
<!-- 缺点：结构不好 -->
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
1.2 overflow清除浮动
在 父级元素 添加overflow hidden scroll auto 皆可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 overflow清除浮动.html</title>
<style>
/*清除浮动的问题来源，就是父级元素因为子级元素的浮动而导致的内部高度为0*/
/*在 父级元素 添加overflow hidden scroll auto 皆可以 */
.father {
border: 1px solid red;
/*overflow: auto;*/
overflow: hidden;
/*overflow: scroll;*/
}
.big {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.footer {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
1.3 after伪元素清除浮动
常用方法：
.clearfix:after { /*正常浏览器清除浮动*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie7及以下的版本才会识别*/
}
<!-- 需要清除浮动，就调用clearfix -->
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
1.4 双伪元素清除浮动
.clearfix:before,
.clearfix:after { /*正常浏览器清除浮动*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*ie7及以下的版本才会识别*/
}
<!-- 需要清除浮动，就调用clearfix -->
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
2. 定位
定位，有定位属性和边偏移
position： ；
2.1 静态定位（static）
默认定位，标准流。
2.2 相对定位（relative）
- 以自身为基准
- 脱标，但不完全，会在标准流之上
- 留坑！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06 相对定位.html</title>
<style>
/*定位，有定位属性和边偏移*/
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 10px;
}
.two {
background-color: blue;
/*相对定位
1.边偏移以自身（可以选左上角计算）为基准点，和其他无关
2.边偏移后，原来所占位置保留，留坑！*/
position: relative;
width: 140px;
height: 140px;
padding: 30px;
left: 100px;
}
.three {
background-color: orange;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
2.3 绝对定位（absolute）
- 以最近的有定位（相对 绝对 固定）的父级（祖先）元素为基准
- 没有已定位的父级（祖先），则以浏览器首屏为基准
- 完全脱标，在标准流之上
- 不留坑
2.3.1 没有父级或者父级没有定位
以浏览器首屏为基准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 没有父级或父级没定位.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/*1，绝对定位，不留坑，完全脱标*/
/*2.绝对定位以浏览器首屏为基准（没有父级的情况下）
https://www.cnblogs.com/gchlcc/p/6295199.html*/
.one {
/*position: absolute;*/
/*right: 0;*/
/*bottom: 0*/
margin: 100px;
}
/*3.没有父级，或者父级没有定位，以浏览器首屏为基准*/
.two {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
2.3.2 父级有定位
依据最近的已经定位(绝对,相对,固定)的父元素(祖先)进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 没有父级的绝对定位.html</title>
<style>
* {
margin: 0;
padding: 0;
}
/*1，绝对定位，不留坑，完全脱标*/
/*2.绝对定位以浏览器首屏为基准（没有父级的情况下）
https://www.cnblogs.com/gchlcc/p/6295199.html*/
/*3.没有父级，或者父级没有定位，以浏览器首屏为基准*/
/*4.元素是依据最近的已经定位(绝对,相对,固定)的父元素(祖先)进行定位,注意,父级没有,再向上找*/
.grandfather {
width: 500px;
height: 500px;
background-color: pink;
margin: 200px;
position: relative;
}
.father {
width: 300px;
height: 300px;
background-color: purple;
position: absolute;
top: 10px;
left: 10px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
2.3.3 子绝父相
常用操作。
要理解透彻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 子绝父相.html</title>
<style>
.father {
width: 450px;
height: 450px;
border: 1px solid red;
margin: 50px auto;
padding: 20px;
position: relative;
}
.rec1-1 {
position: absolute;
top: 0;
left: 0;
}
.rec1-2 {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<img src="images/rec2.png" class="rec2" />
<img src="images/rec1.png" class="rec1-1" />
<img src="images/rec1.png" class="rec1-2" />
</div>
</body>
</html>
2.3.4 关于浮动和定位的一点小问题
浮动，盖不了文字和图片。
定位可以，定位是脱标的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 两个小问题.html</title>
<!-- 1.绝对定位是完全脱标,浮动不是,浮动的话,图片文字等还是盖不了 -->
<style>
.one {
width: 300px;
height: 300px;
background-color: pink;
/*浮动,盖不了文字和图片*/
/*绝对定位可以,完全脱标*/
/*定位是飘*/
position: absolute;
}
.two {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one">123ty</div>
<!-- 浮动,盖不了文字和图片 -->
<!-- 定位可以 -->
<!-- <div class="two">asdfsdvfb</div> -->
<div class="two"><img src="images/rec2.png"></div>
</body>
</html>
2.3.5 定位的盒子居中
定位的盒子，使用auto无效（relative在没有指定水平方向的margin或者为0时，auto任然有效）
浮动也是如此，不过浮动可以加一个父盒子，对父盒子居中，但是麻烦
要理解定位盒子居中的算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_定位的盒子居中.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/*加了定位 或者 浮动 的盒子,无法在使用auto!*/
/*但是margin依旧可以设置*/
/*float: left;*/
/*position: absolute;*/
/*margin: 50px auto;*/
/*注意,用relative定位时,不指定水平方向的margin或者为0,auto仍然有效*/
/*position: relative;*/
/*top: 30px;*/
/*margin: 50px auto;*/
/*position: absolute;*/
/*水平居中*/
/*left: 50%;*/
/*margin-left: -150px;*/
/*垂直居中*/
/*top: 50%;*/
/*margin-top: -150px;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4 固定定位（fixed）
是特殊的绝对定位，绝对脱标，不占坑
但是只以浏览器为基准，与其他无关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15_固定定位.html</title>
<style>
body {
height: 2000px;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 50px;
/*position: relative;*/
}
/*固定定位可以理解成特殊的绝对定位，是完全脱标，但是固定定位和父亲没有任何关系，只认浏览器，不随滚动条移动*/
.son {
width: 100px;
height: 100px;
background-color: purple;
position: fixed;
/*top: 100px;*/
left: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<!-- <p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p> -->
</body>
</html>
2.5 绝对定位（特殊固定）和浮动的隐藏模式转换
绝对定位和浮动都会有inline-block特性，默认宽度为内容的宽度
div {
height: 20px;
background-color: pink;
/*float: left; 浮动，隐藏模式转换，inline-block，没有指定宽度，默认内容宽度*/
/*position: relative; 没有影响*/
/*position: absolute; 绝对定位，inline-block*/
/*position: fixed; 特殊的绝对定位,inline-block*/
}
2.6 定位z-index叠放顺序
- z-index只针对定位！！！对其他无效，也无法指定！
- 没有单位
- 越大，越高
- z-index值一致的时候，后来者居上（后来者是指元素的使用顺序）
- 默认为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18_定位z-index叠放顺序.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*1.定位（绝对 相对 固定）的同时，自动z-index: 0*/
/*2.z越大,定位元素在层叠元素中越高*/
/*3.z-index一样的时候，后来者居上
(这里指的不是CSS中的顺序，那个是层叠性!这里指的是标签的使用顺序！！！切记！！！)*/
/*4.z-index不可带单位*/
/*5.只有定位有此属性，其余没有！亦不可指定该属性！*/
/*z-index: 0;*/
}
.red {
top: 50px;
left: 50px;
/*z-index: 1;*/
}
.green {
background-color: green;
top: 100px;
left: 100px;
}
.purple {
background-color: purple;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<div class="purple"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
2.7 经典案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19_一个有趣的例子.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
div {
/*width: 100%;
position: relative;*/
}
ul {
/*position: absolute;
left: 50%;
margin-left: -498px;*/
width: 1005px;
height: 502px;
margin: 50px auto;
}
div li {
width: 200px;
height: 500px;
border: 1px solid #CCC;
float: left;
margin-left: -1px;
position: relative;
}
div li:hover {
border: 1px solid red;
/*position: relative; 在都是标准流的情况下，使用定位（绝对 相对 固定），可以浮在上面*/
z-index: 1; /*在li中也有定位的时候，在hover里再用定位，已经无法浮起来了，此时遵循后来者在上，所以要z-index提升叠放顺序*/
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>