引入方式
在html中有三种
1 行内样式
1 <div>
2 <p style="color: green">我是一个段落</p>
3 </div>
2 内接样式
<link rel="stylesheet" href="./index.css">
3外接样式
<style type="text/css">
@import url('./index.css');
</style>
选择器:
基础选择器:
标签选择器:div
id选择器:#{} 一般在js中
类选择器:.{}
高级选择器:
后代选择器
.container p{
color: red;
}
.container .item p{
color: yellow;
}
子代选择器:
1 .container>p{
2 color: yellowgreen;
3 }
并集选择器:多个使用
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
交集:选择器 比较好玩
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
属性选择器
/*根据属性查找*/
/*[for]{
color: red;
}*/
/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/
/*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/**/
/*指定单词的属性*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
伪类选择器:
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
伪元素选择器:
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
继承性和层叠性
继承性:像一些文本的属性:color text-* line-* font-* 这些属性可以继承下来的
a特殊些 color不能继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style>
.father{
width: 100px;
height: 100px;
background-color: yellow;
color: red;
line-height: 100px;
text-align: center;
font-size: 20px;
text-decoration: underline;
}
p{
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
<a href="#">alexsb</a>
</div>
</div>
</body>
</html>
层叠性既是权重,谁得权重大就显示谁的属性
如何看权重:就是数数,选择的个数: id class 标签
1,针对于选中的标签(谁的权重大 就会显示谁的属性)
2,如果权重一样大 ,以 =>的设置为准
3如果是继承下来的属性,它权重为0,跟**选中的标签**没有标签
4,如果权重都为0,那么谁描述的近(就近原则),就显示谁的标签
5,如果权重为0,猫叔的一样近的时候,回顾原始状态(数权重)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1 0 0*/
#box1{
color: red;
}
/*0 1 0*/
.box{
color: blue;
}
/*0 0 1*/
p{
color: green;
}
</style>
</head>
<body>
<p class="box" id="box1">猜猜我的颜色</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*2 1 1*/
.wrap1 #box2 div p{
color: green;
}
/*1 1 2*/
#box1 .wrap2 div p{
color: red;
}
/*#box1 #box2 #box3 p{
}*/
</style>
</head>
<body>
<div class="wrap1" id="box1">
<div class="wrap2" id='box2'>
<div class="wrap3" id="box3">
<p>猜猜我的颜色</p>
</div>
</div>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 1 1 2*/
.wrap1 #box2 div p{
color: green;
}
/*1 1 2*/
#box1 .wrap2 div p{
color: red;
}
</style>
</head>
<body>
<div class="wrap1" id="box1">
<div class="wrap2" id='box2'>
<div class="wrap3" id="box3">
<p>猜猜我的颜色</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*继承性权重为0*/
#box1{
color: yellow;
}
.wrap1 .wrap2{
color: red;
}
</style>
</head>
<body>
<div class="wrap1" id="box1">
<div class="wrap2" id='box2'>
<div class="wrap3" id="box3">
<p>猜猜我的颜色</p>
</div>
</div>
</div>
</body>
</html>
盒模型
属性:
width:内容的宽度
height:内容宽度
padding:内容到border的区域
border边框
margin:标准的标签:margin的使用通常是在兄弟之间的标签
坑:margin水平方向是没有任何问题
垂直方向 会出现"塌陷问题"以设置最大的为基准,以后在写网站标准的盒子 垂直方向只设置 一个方向即可
如果踹他爹可以踹 那么只需要给父亲加上border,那么问题来了页面冗余.可能会影响界面的布局
记住:
如果是父子之间,调整位置,那么使用padding
margin的塌陷要避免,只设置一个方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 5px solid green;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 0;
height: 0;
background-color: red;
padding: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 302*302
如果想保持盒子的宽度不变,减width加padding,加width就要减padding
-->
<!-- 标准盒子模型的计算
盒子的宽度 = width+2*padding + 2*border
-->
<div class="box">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 80px;
height: 70px;
background-color: purple;
/*padding-left: 20px;
padding-top: 10px;*/
color: green;
border: 1px solid red;
cursor: pointer;
/**/
padding: 10px;
/*两个值: 上下 左右*/
padding: 10px 20px;
/*三个值: 上 左右 下*/
padding: 10px 20px 30px;
/*上 右 下 左*/
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box">
李宁
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
background-color: red;
margin-right: 20px;
}
.w{
background-color: green;
margin-left: 20px;
}
</style>
</head>
<body>
<span class="a">alex</span>
<span class="w">wusir</span>
</body>
</html>
浮动元素 对行内元素和块元素的影响:
(1)如果标准流下的标签浮动,定位(绝对定位,固定定位)了 不区分是行内还是块级元素
可以任意的设置宽高
(2)浮动对块元素的影响,像把块元素转化成行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
float: left;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<a href="#">百度一下</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
float: left;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>alex</div>
<div>nvshen</div>
<img src="./logo16366.gif" alt="">
</body>
</html>
浮动
浮动能使盒子脱离标准文档流
四大特性:
1浮动的元素脱标
2,浮动的元素互相紧靠
3.的元素由"字围"效果
4,收缩的效果:将块级元素转化成行内
大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，
清除浮动的方式:
1,给父盒子设置高度
2,clear:both
3,伪元素清除法
4,overflow:hidden
标准文档流:
哪些标签不标准文档流:浮动,绝对定位,固定定位
如果不是标准文档的标签(浮动的标签),那他有四个特性:
1,浮动的元素脱标
2,浮动 的元素互相贴靠
3,浮动的元素由"字围"效果
4,收缩的效果:将块级元素转化成行内
5,不占位置
清除浮动的标签:
好处:1:浮动的元素能实现并排
2,把空白折叠
3,能撑起父盒子的高度
浮动的盒子垂直方向不会出现塌陷问题
使用margin:0 auto;注意点:
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
/*width: 1000px;*/
height: 1000px;
/*border: 1px solid black;*/
}
.child1{
width: 200px;
height: 600px;
background-color: red;
float: left;
}
.child2{
width: 230px;
height: 400px;
background-color: green;
float: left;
}
.child3{
width: 200px;
height: 500px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/timg.jpg" alt="">
<p>姚明美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大美女真美安科技等哈看见大大大大</p>
</div>
</body>
</html>
字围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 100%;
/*overflow: hidden;*/
border: 1px solid black;
}
.child1{
width: 200px;
height: 300px;
background-color: red;
float: left;
}
.child2{
width: 230px;
height: 400px;
background-color: green;
float: left;
}
.child3{
width: 200px;
height: 500px;
background-color: blue;
float: left;
}
.father2{
width: 100%;
height: 300px;
background-color: yellow;
}
/*.clearfix{
clear: both;
}*/
/*伪元素清除法*/
.clearfix:after{
content: '';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<!-- 给浮动元素的最后面加一个空的块级标签 设置该标签为clear:both
-->
<!-- <div class="clearfix"></div> -->
</div>
<div class="father2"></div>
</body>
</html>
为什么要清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 200px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报
</div>
</body>
</html>
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 200px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报哈哈哈就爱看的哈电话卡节点回报
</div>
</body>
</html>
垂直元素方向不会出现塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 100px;
background-color: red;
}
.box2{
width: 1000px;
height: 100px;
margin: 0 auto;
}
.container{
width: 1000px;
height: 100px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<div class="container"></div>
</div>
</div>
</body>
</html>
margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
width: 300px;
height: 80px;
font-size: 16px;
border: 1px solid red;
text-align: justify;
text-indent: 2em;
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
line-height: 30px;
padding-top: 20px;
}
</style>
</head>
<body>
<p>国家国国家国国家国国家国国国家国国家国国家国国家国</p>
</body>
</html>
文本属性和字体属性
1.background
background-image: url('链接的图片地址'); 默认是横向平铺 纵向平普
background-repeat:
repeat:默认
no-repeat:不平铺
repeat-x:
repeat-y:
background-position:x y;
如果为正值 那么表示调整图片的位置
如果为负值 精灵图切图
center top 居中
background-attachment:fixed;
不会随着父盒子的滚动而滚动
background: url('') no-repeat x y;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
/*background-color: rgb(255,0,0);*/
/*background-color: rgba(255,0,0,.5);*/
/*background-color: #112233;*/
/*background-color: #123*/
/*background-color: #f00*/
/*background-color:#123321;*/
background-color: #666;
/*43*/
/*
16进制
2*16+11
2b
255
15*16+15
ff
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 2000px;
}
/*body{
background-image: url(../day49/images/2.jpg);
}*/
.box{
width: 25px;
height: 13px;
/*border: 1px solid red;*/
/*background-image: url(./1.gif);*/
/*background-repeat: no-repeat;*/
/*
background-position 如果为正值 相当于调整位置图的位置
*/
/*background-position: 20px 30px;*/
/*background-position: -25px -60px;*/
background: url(./1.gif) no-repeat -25px -60px;
/*让中心banner居中显示*/
/*background-position: center top;*/
}
.广告{
width: 100%;
height: 120px;
background-image: url('https://i1.mifile.cn/a4/cms_15337986888589_wGuOE.jpg');
background-repeat: no-repeat;
background-position: center top;
}
.active{
width: 32px;
height: 32px;
background-image: url('https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png');
background-repeat: no-repeat;
/*固定*/
background-attachment: fixed;
border: 1px solid red;
/*如果为负值 在一张大图 扣小图
精灵图 技术
*/
background-position: 0 -200px;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt="">
</div>
<div class="广告">
<a href="">
</a>
</div>
<div class="active">
</div>
</body>
</html>
2.定位
四种定位:
position
static:静态定位
relative:
相对定位
作用:1.微调元素
2.可以做"父相子绝"参考
3.如果当前这个标准流的盒子设置了相对定位,那么他跟标准流下的盒子是一样的
参考点:
(1)相对于原来的位置调整位置
记住:
1.不要用相对定位做压盖现象,因为相对定位会"留坑" 占着茅房布拉斯
2.设置定位之后,它的层级大于标准流的盒子
3.相对的盒子不脱离标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
position: relative;
/*
top left right bottom
*/
top: -30px;
left: 100px;
}
.child3{
background-color: blue;
}
</style>
</head>
<body>
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
position: relative;
top: -5px;
}
input{
font-size: 30px
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<!-- <img src="../day49/images/2.jpg" alt=""> -->
<input type="text">
</body>
</html>
absolute:绝对定位
现象:
1.脱标
2.做压盖 层级高
(1)参考点
单独设置绝对定位: top描述
参考点: 页面的左上角 (跟浏览器的左上角区分)
单独设置绝对定位: bottom描述
参考点: 浏览器的左下角
(2)当有父子盒子嵌套时参考点:
父辈元素设置相对定位 子元素设置绝对定位 那么子元素是以最近父辈元素(必须设置相对定位)的左上角为参考点来调整位置
绝对定位的盒子居中:
left:50%;
margin-left:负的该盒子宽度的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 100px;
}
.header{
width: 100%;
height: 100px;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
}
.wrap{
width: 100%;
height: 1000px;
background-color: green;
/*margin-top: 100px;*/
}
.top{
width: 100px;
height: 100px;
background-color: yellow;
position: fixed;
right: 0;
bottom: 100px;
line-height: 100px;
text-align: center;
}
.wrap a{
position: relative;
z-index: 99;
}
</style>
</head>
<body style="height: 2000px">
<div class="header"></div>
<div class="wrap">
<a href="#">百度与喜爱</a>
</div>
<div class="top">回到顶部</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.top').click(function() {
$('html,body').animate({
scrollTop:0
},2000)
});
</script>
</body>
</html>
fixed:固定定位
1.脱标
2.层级提高
参考点:浏览器的左上角
应用:固定导航栏 广告 回到顶部
只要盒子 设置浮动了 固定定位 绝对定位了
1.脱标
2.可以任意宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 400px;
position: relative;
background-color: red;
}
.wrap{
width: 500px;
height: 400px;
position: absolute;
background-color: green;
/*
margin: 0 auto 不起作用;
left:50%;
margin-left:宽度的一般;
*/
left: 50%;
margin-left: -250px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap"></div>
</div>
</body>
</html>
3.z-index
前提条件:必须设置定位
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
height: 500px;
background-color: red;
margin: 200px auto;
position: relative;
}
.father2{
width: 400px;
height: 400px;
background: black;
margin-left: 30px;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
z-index: 10;
}
.child2{
width: 200px;
height: 250px;
background-color: yellow;
position: absolute;
z-index: 5;
}
</style>
</head>
<body style="height: 2000px;">
<div class="father">
<div class="father2">
<div class="child"></div>
<div class="child2"></div>
</div>
</div>
</body>
</html>
2506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
