4、盒子模型
4.1什么式盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLUEyQBL-1614495530411)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210223091515549.png)]
margin:外边距
margin:0 全部为0
margin:0 1px 上下为0 左右为以
margin:0 1px 2px 0 上 左 下 右
padding:内边距
border:边框
border-radius: 20px 2px/*左上 右下*/
border-radius: 20px 2px 3px 4px/*左上 右上 右下 左下*/
4.2
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wa{
width: 300px;
height: 309px;
/*粗细 样式 颜色*/
border: 1px solid gainsboro;
}
h2{
font-size: 19px;
line-height: 1;
text-align: center;
background: #eae2e2;
width: 300px;
}
form div{
line-height: 2;
text-indent: 2em;
border: 1px solid red;
}
div :nth-of-type(1) input{
border: 2px solid green;
background: #21D4FD;
}
</style>
</head>
<body>
<div class="wa">
<div>
<h2>会员登录</h2>
</div>
<hr>
<form action="#">
<div class="i1">
<span>账号:</span><input type="text">
</div>
<div>
<span>密码:</span><input type="password">
</div>
</form>
</div>
</body>
</html>
4.3阴影
box-shadow:10px 10px 100px yellow/*往右 往下 模糊大小 颜色*/
4.4display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*行类元素 inline
块元素 block
既是行内元素,右保留这块元素的 inline-block
不显示 none*/
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid black;
/*display: block;*/
display:inline-block;
}
</style>
</head>
<body>
<div>我是块元素</div>
<span>我是行内元素</span>
</body>
</html>
QQ会员导航练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
background: black;
}
li a{
text-decoration: none;
color: white;
}
li{
display: inline-block;
margin-left: 25px;
}
li:nth-of-type(1){
margin-left: 170px;
vertical-align: middle;
}
li:nth-of-type(2){
margin-left: 100px;
vertical-align: middle;
}
.d1{
margin-left:110px;
border: 1px yellow solid;
border-radius: 20px;
padding: 10px 30px;
}
.d1 a{
color: yellow;
}
.d2{
background: yellow;
border-radius:20px ;
padding: 10px 30px;
margin-left: 5px;
}
.d2 a{
color: #915355 ;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="t1">
<div>
<ul>
<li> <img width="150" height="90" src="../images/QQ超级会员-不做大多数_files/logo.png "alt="QQ会员首页"title="QQ会员首页"> </li>
<li><a href="#">靓号站</a></li>
<li><a href="#">功能特权</a></li>
<li><a href="#">游戏特权</a></li>
<li><a href="#">装饰装扮</a></li>
<li><a href="#">成长体系</a></li>
<li><a href="#">年费专区</a></li>
<li><a href="#">免流量专区</a></li>
<li class="d1"><a href="#">登录</a></li>
<li class="d2"><a href="#">开通超级会员</a></li>
</ul>
</div>
</div>
</body>
</html>
浮动
float:right;
clear:both;
父级边框塌陷
解决方法
- 给父类添加高度
height:800px
- 增加一个div标签 清除浮动
clear:both;
margin:0;
padding:0;
- 在父类标签添加一个overflow
overflow:hidden;
- 给父类添加伪类after
#father:after{
content:'';
display:block;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="c1">
<div class="c2"><img src="images/1.png" alt="#"></div>
<div class="c3"><img src="images/logo.png" alt=""></div>
<div class="c4"><img src="images/logo_b.png" alt=""></div>
<div class="c5">浮动可以左滑右滑</div>
<div class="c6"></div>
</div>
</body>
</html>
.c1{
border: 1px solid red;
/*overflow: hidden; 给父类标签添加一个overflow:hidden*/
/*height: 1000px; 给父类添加高度*/
}
/*.c1:after{*/
/* content: '';*/
/* display: block; 给父类添加一个伪类*/
/* clear: both;*/
/*}*/
.c2{
border: 1px solid red;
display:inline-block;
float: left;
clear: both;
}
.c3{
border: 1px solid red;
display:inline-block;
float: left;
}
.c4{
border: 1px solid red;
display:inline-block;
/*float: left;*/
}
.c5{
border: 1px solid red;
display:inline-block;
/*float: right;*/
}
div{
margin: 10px;
padding: 15px;
}
.c6{
/*clear: both;!*最后添加空的div标签*!*/
}
5、定位
5.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
border: 1px solid red;
padding: 0;
margin: 0;
}
.first{
border: 1px dashed black;
background:rebeccapurple ;
position: relative;/*相对定位*/
bottom: 16px;
left: 22px;
}
.second{
border: 1px dashed black;
background: #21D4FD;
position: relative;
bottom: 9px;
}
.third{
border: 1px dashed black;
background: #6bc633;
position: relative;
top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="first">我是第一</div>
<div class="second">我是第一</div>
<div class="third">我是第一</div>
</div>
</body>
</html>
相对原来的位置指定的偏移,它任然在标准文档流中,他原来的位置任然被保留
5.2绝对定位
定位:基于xxx定位,上下左右
- 没有父级元素的定位前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对父级元素进行定位
- 在父级元素范围内移动
position:absolute;/*绝对定位*/
原来位置消失
固定定位 任何情况下始终保持原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){
width: 300px;
height: 300px;
background: blue;
position: absolute;/*绝对定位 父类没有定位时相对于窗口定位*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 100px;
height: 100px;
background: yellow;
position: fixed;/*固定定位始终在一个位置*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>hello</div>
<div>hello</div>
</body>
</html>
5.3z-index
表示图层 越大越在上面
z-index:0;/*表示在最底层*/
opacity:0.5;/*背景透明度*/