盒子模型
1 边框-border
- 边框粗细
- 边框样式
- 边框颜色
2 盒子 - div
- 内边距 - padding
- 外边距 - margin
让元素居中：
- margin： 外层盒子需要有宽度，居中的盒子也要有宽度，设置在居中盒子属性中
- text-align：外层盒子要有宽度，设置在外层盒子属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box1{
border: 2px solid pink;
width: 1000px;
text-align: center;
}
.box2{
margin: 0 auto;
width: 100px;
}
</style>
<title>Title</title>
</head>
<body>
<div class="box1">
<div class="box2">
<img src="image/a.jpg" alt="" style="width: 100px;margin: 0 auto">
</div>
</div>
</body>
</html>
3 圆角边框 - border-radius
顺序： 左上 右上 右下 左下
左上右下 右上左下
4 阴影 - box-shadow
颜色 位置 虚化程度
浮动
- 块级元素：独占一行
h标签 p div 列表。。。
- 行内元素：不独占一行
span a img strong。。。
行内元素可以被包含在块级元素中，反之不可以
1 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联在一行
*/
div{
height: 200px;
width: 200px;
border: 2px solid yellow;
display: inline-block;
margin: 0;
}
span{
height: 200px;
width: 200px;
border: 2px solid yellow;
display: inline-block;
}
</style>
</head>
<body>
<div>
块级元素div
</div>
<span>
行内元素span
</span>
</body>
</html>
2 float
左右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
/*float：right 浮动
使元素浮在盒子上方
clear：both 浮动的块元素
*/
.box{
border: 2px solid;
}
.box div{
display: inline-block;
float: right;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div><img src="../images/t1.jpg" alt="" width="320px" height="180px"></div>
<div><img src="../images/t2.jpg" alt="" width="250px" height="332px"></div>
<div><img src="../images/t3.jpg" alt="" width="120px" height="85px"></div>
</div>
</body>
</html>
3 父级元素边框塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
/*float 浮动
使元素浮在盒子上方
clear：both 浮动的块元素
*/
/*父级元素塌陷的解决办法：*/
/*1、设置父级元素的大小*/
/*2、在父级元素中增加一个overflow : hidden属性
overflow用来处理元素溢出
hidden 隐藏溢出元素
scroll 滑轨显示
*/
.box{
border: 2px solid;
/*overflow: hidden;*/
}
.img1{
display: inline-block;
float: right;
}
.img2{
display: inline-block;
float: right;
clear: right;
}
.img3{
display: inline-block;
float: right;
clear: right;
}
/*3、在最下面添加一个空的块元素*/
/*.clear{*/
/*clear: both;*/
/*margin: 0;*/
/*padding: 0;*/
/*}*/
/*4、在父级元素最后添加一个伪类
原理和添加块元素相同
*/
.box:after{
content: '';
display: block;
clear: both;
}
/*总结：
1、浮动元素后面添加空div：简单，但是尽量避免空div
2、设置父级元素的高度：简单，元素假设有了固定高度，就会被限制
3、overflow：简单，下拉的一些场景避免使用
4、父类添加一个伪类：after 写法稍微复杂但是没有副作用，推荐使用
*/
</style>
</head>
<body>
<div class="box">
<div class="img1"><img src="../images/t1.jpg" alt="" width="320px" height="180px"></div>
<div class="img2"><img src="../images/t2.jpg" alt="" width="250px" height="332px"></div>
<div class="img3"><img src="../images/t3.jpg" alt="" width="120px" height="85px"></div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>
定位
1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相对定位 : position:relative
相对于自己原来的位置进行偏移
仍然在标准文档流中
原来的位置会被保留
*/
div{
margin:10px;
padding: 5px;
font-size: 12px;
line-height: 10px;
}
#father{
border: 2px solid red;
}
#first{
border: 2px solid pink;
background-color: pink;
position: relative;/* 相对定位：上下左右 */
bottom: 20px;
}
#second{
border: 2px solid saddlebrown;
background-color: saddlebrown;
position: relative;
right: -20px;
}
#third{
border: 2px solid aqua;
background-color: aqua;
position: relative;
left:20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
2 绝对定位
- 没有父级元素定位的前提下，相对于浏览器定位
- 父级元素存在定位，相对于父级元素定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相对定位 : position:relative
相对于自己原来的位置进行偏移
仍然在标准文档流中
原来的位置会被保留
*/
div{
margin:10px;
padding: 5px;
font-size: 12px;
line-height: 10px;
}
#father{
border: 2px solid red;
}
#first{
border: 2px solid pink;
background-color: pink;
position: relative;/* 相对定位：上下左右 */
bottom: 20px;
}
#second{
border: 2px solid saddlebrown;
background-color: saddlebrown;
position: relative;
right: -20px;
}
#third{
border: 2px solid aqua;
background-color: aqua;
position: relative;
left:20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
width: 1000px;
height: 1000px;
border: 2px solid black;
}
/*绝对定位：
当父级元素大小确定后，相对于父级元素定位，位置不在改变，除非父级元素大小发生改变
固定定位：
固定位在浏览器上
*/
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}.box2{
width: 200px;
height: 200px;
background: pink;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box2">固定定位</div>
<div class="box1">绝对定位</div>
</body>
</html>
4 z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
border: 2px solid red;
overflow: hidden;
}
ul{
list-style: none;
position: relative;
}
.tipText,.tipBg{
position: absolute;
top: 130px;
color: red;
height: 20px;
width: 200px;
}
.tipText{
/*z-index:设置元素层级*/
/*z-index: 3;*/
}
.tipBg{
background: black;
/*opacity 背景透明度*/
/*opacity: 0.5;*/
/*早期版本使用filter:alpha(opacity)*/
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<div id="father">
<ul>
<li>
<img src="images/kl.jpg" alt="" style="width: 200px">
</li>
<li class="tipText">
<span>无敌考拉</span>
</li>
<li class="tipBg">
</li>
<li>
<span>2021/5/8</span>
</li>
</ul>
</div>
</body>
</html>