认识浮动
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<title>Document</title><!--网页标题-->
<!--style里面书写css样式-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
ul{
width:1000px;
border:3px solid red;
margin:30px auto;
}
li{
/* display:inline-block; *//* 不兼容低版本的IE */
float:none;
/*
浮动就是让元素可以横排显示，但是可以设置宽度高度内外边距等等块级元素的特性的属性
left : 左浮动
right : 右浮动
none : 不浮动元素
*/
width:100px;
height:30px;
border:2px solid black;
}
li:first-child{
float:none;
}
li:nth-child(2){
float:left;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
</html>
浮动的排列特性
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
ul{
width:1000px;
border:3px solid red;
margin:30px auto;
height:120px;
}
li{
float:left;
width:100px;
height:30px;
border:1px solid black;
}
li:nth-child(3){
/* border-width:2px; */
/* height:31px; */
/* margin-bottom:1px; */
}
/* li:nth-child(4){
height:50px;
} */
/* 浮动元素排列的特性
1. 父级宽度不够的时候放不下的元素会在下一排排列
2. 遇到父级边缘的时候停下来
3. 遇到其他任意浮动元素的时候停下
*/
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<!-- <ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul> -->
</body>
</html>
宽高特性
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
div,span{
float:left;/* 拥有了浮动特性 */
border:1px solid red;
line-height:200px;
/* margin:auto; */
}
/* 浮动的宽高特性
1. 可以设置宽度高度
2. 没有设置高度的时候，高度由内容撑开（包括行高）
3. 没有设置宽度的情况下，宽度由内容撑开
4. margin:auto; 失效
*/
</style>
</head>
<body>
<span>
span<!-- <br/>span -->
</span>
<div>
divdivdivdivdivdivdivdiv
</div>
</body>
</html>
层级特性
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
.box{
width:800px;
height:500px;
border:3px solid red;
margin:30px auto;
}
p{
float:left;
width:100%;
height:50px;
background-color:rgba(0,0,0,0.5);
}
p:last-child{
/* float:left; */
float:none;
height:100px;
background-color:pink;
}
.box2{
width:800px;
height:500px;
border:3px solid red;
margin:0 auto;
}
.child{
float:left;
width:300px;
height:300px;
background-color:rgba(0,0,0,0.3);
}
.box3{
border-color:black;
height:auto;
/*
auto 宽度高度的默认值
*/
background-color:skyblue;
}
.box3 .child{
float:left;
}
/* 浮动元素的层级特特性
1. 浮动元素之后的没有浮动的元素，会在浮动元素的下方显示
(浮动提高了半个层级)
2. 文字不会显示在浮动元素的下方
3. 浮动元素无法撑起父级的高度
*/
/*
按照自身的特性（行内，块级，行块），正常的在界面中排列，并且占据自己应该占据的位置
*/
body{
padding-bottom:500px;
}
</style>
</head>
<body>
<div class="box">
<p>p1</p>
<p>p1</p>
<p>p1</p>
<p>p2</p>
</div>
<div class="box2">
<div class="child"></div>'
文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方'
文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方'
文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方'
文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方'
文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方文字不会显示在浮动元素的下方
</div>
<div class="box3 box2">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
清除浮动
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
div{
width:500px;
background-color:pink;
margin:30px auto;
/* height:300px; */
}
div p{
float:left;
width:200px;
height:200px;
background-color:skyblue;
}
.box1{
/* float:left; */
/* display:inline-block; */
/* position:absolute; */
overflow:hidden;
}
/* 清除浮动的情况
1. 父级设置height
2. 父级元素浮动
3. 父级元素 display:inline-block;
4. 父级元素定位 position:absolute;
5. 父级元素 overflow:hidden;
*/
</style>
</head>
<body>
<div class="box1">
<p></p>
</div>
<div style="height:300px;background-color:deeppink;">
</div>
</body>
</html>
clear 清除浮动
<!doctype html>
<html lang="en">
<head> <!--头部标签-->
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none;color:inherit; }
*{ margin: 0; padding: 0; }
div{
width:800px;
border:5px solid red;
margin:30px auto;
/* clear:left; */
}
p{
float:left;
width:100px;
height:100px;
margin-right:5px;
background-color:pink;
/* clear:left; */
}
.first{
display:block;
/* display:inline; */
clear:both;
/*
left 清楚左浮动
right 清楚右浮动
both 清楚所有浮动
*/
}
/*
1. 清楚浮动的样式只能 清楚结构之前的元素的浮动
2. 使用样式的元素必须是一个块级特性
伪类元素 ::after ::before
伪类选择器 :hover :link :nth-child
*/
.clearFix::after{
content:'';
display:block;
clear:both;
/* 避免出现兼容问题 */
height:0;
width:0;
overflow:hidden;
}
.clearFix{
zoom:1;/* 兼容低版本IE */
}
</style>
</head>
<body>
<ul class="clearFix">
<li></li>
<li></li>
<li></li>
<li class="first"></li>
</ul>
<div class="clearFix">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- <span class="first"></span> -->
</div>
</body>
</html>
认识定位
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
/*
定位
确定一个元素位置
*/
.box{
position:relative;/* 我要使用相对定位 */
left:100px;
top:100px;
width:300px;
height:300px;
background-color:skyblue;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
定位的偏移量
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
/*
定位
确定一个元素位置
*/
.wrap{
width:600px;
height:600px;
margin:0 auto;
border:5px solid black;
}
.box{
position:relative;/* 我要使用相对定位 */
/* 定位的偏移属性
left 元素相对于左边的偏移距离
top 元素相对于上边的偏移距离
right 元素相对于右边的偏移距离
bottom 元素相对于下边的偏移距离
*/
/* right:100px; */
left:50%;
top:50%;
/* bottom:100px; */
width:300px;
height:300px;
background-color:skyblue;
/* margin-top:100px; */
}
/*
relative 相对定位
相对于元素自身没有移动之前所在的位置
同轴向的偏移量通常情况下只会出现一个 同时出现时 left 和 top 生效与属性书写的顺序无关
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
relative
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.wrap{
width:600px;
height:600px;
margin:0 auto;
border:5px solid black;
}
.box{
width:300px;
height:300px;
background-color:skyblue;
}
.box1{
position:relative;
left:200px;
top:200px;
/* margin:200px 0 0 200px; */
/* margin-left:-50px; */
}
.box2{
background-color:deeppink;
}
/*
relative 相对于元素自身没有移动之前所在的位置
1. 除了可以使用偏移属性移动元素之外，对元素自身的特性没有任何影响
2. 元素移动之后依然占据移动之前的位置
3. 元素移动之后的位置（现在所在的位置），并不会影响到其他元素
4. 通常情况情况下不会用来移动元素，而是用来做参照物
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
absolute
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.wrap{
position:relative;
width:600px;
height:600px;
margin:0 auto;
border:5px solid black;
}
.box{
width:200px;
height:200px;
background-color:skyblue;
}
.box1{
position:absolute;
/* float:left; */
left:0px;
top:0px;
}
.box2{
width:300px;
height:300px;
background-color:deeppink;
}
/*
absolute 绝对定位
1. 不会占据原来的位置，脱离了普通文档流
a、默认情况下宽度高度由内容决定
b、提高层级一层，文字会显示在定位元素的下边，而不是被挤出来
2. 相对遇见 第一个（就近原则） 拥有定位属性（任意值）的 祖级（定位父级） 元素
3. 没有定位父级的时候，相对body移动
4. 不要用来做主要的布局方式，主要是用来做一些辅助的效果
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box box1">1111111</div>
<div class="box box2">22222222</div>
</div>
</body>
</html>
fixed
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.wrap{
position:static;/* static 默认值 */
width:600px;
height:600px;
margin:0 auto;
border:5px solid black;
}
.box{
width:200px;
height:200px;
background-color:skyblue;
}
.box1{
position:fixed;
left:100px;
top:100px;
}
.box2{
width:300px;
height:300px;
background-color:deeppink;
}
body{
height:10000px;
}
/* 固定定位
相对浏览器的窗口去移动
其他特性与 absolute 相同
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box box1">1111111</div>
<div class="box box2">22222222</div>
</div>
</body>
</html>
万能居中
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.wrap{
position:relative;
width:800px;
height:500px;
border:5px solid black;
margin:0 auto;
}
/* 方法一
需要固定宽度高度 */
/*
.box{
position:absolute;
left:100px;
right:100px;
top:100px;
bottom:100px;
margin:auto;
width:100px;
height:100px;
background-color:pink;
}
*/
.box{
position:absolute;
left:50%;
height:100px;
margin-left:-50px;
background-color:pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
111111111
</div>
</div>
</body>
</html>
定位元素的层级关系
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
ul{
position:relative;
width:500px;
height:500px;
border:5px solid red;
margin:0 auto;
background-color:rgba(0,0,0,0.3);
/* z-index:99; */
/* 没有设置z-index的父级 没有层级 子级负值的层级会跑到 父级的下边 */
}
li{
position:absolute;
width:100px;
height:100px;
}
li:nth-child(1){
left:0;
top:0;
background-color:#00ffff;
/* z-index:1; */
}
li:nth-child(2){
left:20px;
top:20px;
background-color:#ff0066;
}
li:nth-child(3){
left:240px;
top:40px;
background-color:#00ff00;
z-index:-2;
/* z-index:2; */
}
li:nth-child(4){
left:260px;
top:60px;
background-color:#ffff33;
z-index:-1;
}
li:nth-child(5){
margin-top:80px;
margin-left:80px;
background-color:#3300ff;
z-index:100;
}
/* 层级关系
1. 默认情况下，结构越靠后层级越高
2. 可以通过 z-index 修改元素的层级，值没有单位，值越大层级越高
3. 默认的层为 0 只要设置 1的层级 那么层级就会高于其它所有定位元素
4. 只有定位了的元素才有层级概念
5. 理论是没有上限
*/
</style>
</head>
<body>
<div style="position:relative;width:400px;
background-color:#3300ff;">3333
<div style="width:200px;
background-color:#ffff33;">2222
<div style="position:absolute;width:100%;
background-color:#00ff00;">111</div>
</div>
</div>
<!-- 父级存在层级比较关系的时候，子级之间的比较永远以父级为准 -->
<ul style="z-index:1;">
<li>1</li>
<li style="top:400px; z-index:20;">2</li>
<li>3</li>
<li>4</li>
<li style="position:static;float:left;"></li>
</ul>
<ul style="z-index:2;">
<li style="top:-50px; z-index:10;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li style="position:static;float:left;"></li>
</ul>
</body>
</html>
扫一扫
4093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
