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 父级有定位
依据最近的已经定位(绝对,相对,固定)的父元素(祖先)进行定位
扫描二维码关注公众号,回复:
4332215 查看本文章
<!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>