<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style=""></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: lawngreen; height: 100px; float: left; width: 100%;"></div>
<div style="background-color: lightblue; height: 200px; float: left; width: 70%;"></div>
<div style="background-color: lightcoral; height: 200px; float: right; width: 30%;"></div>
0
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: red; width: 100px; height: 100px; float:left;">342</div>
<div style="width: 200px;">
升级啊回到家按实际的哈数据恢复课教案设计费哈脚手架奥斯卡带回家啊圣诞节快杀到哈市将等哈说的哈剑神打圣诞节按实际等哈说句话哈萨克
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
1)高度塌陷
当父标签不浮动,并且不设置固定高度;字标签浮动就回产生高度塌陷的问题
2)清楚浮动方法
a.空盒子法:在高度会塌陷的标签的最后添加一个空的div,并且设置这个空的div的样式的clear属性为both
<div style=:"clear: both;"></div>
<div class="clear"></div>
b.设置高度会塌陷的标签的样式的overflow属性为hidden
c.万能清除法:给高度会塌陷的标签的after状态添加样式{}
再给高度会塌陷的标签添加样式属性zoom的值为1
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
position:relative;
}
#div2{
/设置参考对象/
position:absolute;
/*设置间距*/
/*top: 50%;*/
left: 150px;
right: 150px;
/*bottom: 150px;*/
}
</style>
</head>
<body>
<div id="div1" style="background-color: lightblue; width: 400px; height: 400px;">
<div id="div2" style="background-color:red; width: 100px; height: 100px;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
/2.padding/
/一起设置4个方向的padding值都为50px/
/padding: 200px;/
/*2)单独设置各个方向的padding*/
padding-left: 20px;
padding-top: 20px;
/*3.border
* 1)一起设置
* 格式 - border:边框宽度 边框样式 边框颜色
* 边框样式 - solid(实线)dashed(虚线)dotted(点划线)double(双线)
*/
border: 2px solid slateblue;
/*2)单独设*/
border-left-width:10px ;
border-right: 20px double;
/*4.margin*/
/*1)一起设置*/
/*margin: 10px;*/
/*单独设置*/
margin-top: 100px;
display: inline-block;
margin: 50px;
}
</style>
</head>
<body>
<div id="div1", style="width: 100px; height: 100px; background-color: lightblue;">
<p>我是段落1</p></div>
<div id="div1", style="width: 100px; height: 100px; background-color: lightblue; ">
<p>我是段落2</p></div>
<div id="div1", style="width: 100px; height: 100px; background-color: lightblue; ">
<p>我是段落3</p></div>
<div id="div1", style="width: 100px; height: 100px; background-color: lightblue; ">
<p>我是段落4</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 200px;
background-color: yellowgreen;
/position: relative;/
/left: 1px;/
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
