三大布局共用(标准流，浮动，定位)
Posted alexephor
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三大布局共用(标准流，浮动，定位)相关的知识，希望对你有一定的参考价值。
圆角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框圆角</title> <style> /*div {*/ /* !*矩形边框*!*/ /* height: 100px;*/ /* width: 200px;*/ /* border: 1px solid red;*/ /* !*圆角边框的设置*!*/ /* border-radius: 50px;*/ /* !*盒子阴影 不会占用盒子的空间的*!*/ /* !*box-shadow: 10px 10px 10px 10px blue;*!*/ /* box-shadow: 10px 10px 10px -4px rgba(0,0,0,.2);*/ /*}*/ /*.yuanXin {*/ /* !*圆形*!*/ /* height: 100px;*/ /* width: 100px;*/ /* !*可以设置多个值*!*/ /* !*border-radius: 50px;*!*/ /* border-radius: 50%;*/ /* border: 2px solid chartreuse;*/ /*}*/ div{ color: aqua; /*文字阴影的使用*/ text-shadow: 5px 5px 5px rgba(0,0,0,.2); } </style> </head> <body> <!-- <div class="yuanXin"></div>--> <div>你是阴影 我是火影</div> </body> </html>
标准流 浮动 定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准流/浮动/定位</title>
<style>
/*.left, .right{*/
/* height: 100px;*/
/* width: 150px;*/
/* background-color: lime;*/
/* float: left;*/
/*}*/
/*.left {*/
/* height: 100px;*/
/* width: 150px;*/
/* background-color: lime;*/
/* float: left;*/
/*}*/
/*.right {*/
/* height: 100px;*/
/* width: 150px;*/
/* background-color: lime;*/
/* float: right;*/
/*}*/
div {
float: left;
height: 100px;
width: 100px;
background-color: deeppink;
}
span {
float: left;
height: 100px;
width: 100px;
background-color: deeppink;
}
</style>
</head>
<body>
<p>标准流：块级元素 行内元素</p>
<p>浮动：把块级元素放在一行上
如果都是左浮动那么每个块级元素会一个个的顺序紧挨着排列
</p>
<p>浮动特性：脱离标准流 不再保留原先的位置 浮动元素都具有行内块元素</p>
<p>浮动的盒子只会影响后边的标准流，不会影响前边的标准流</p>
<p>清除浮动:有时候不方便给父盒子的高度</p>
<p>
清除浮动的四种方式:
0.隔墙法：就是在子标签中最后一个标签后边再添加一个块级元素 挡住
1.父级添加overflow
2.父级添加after
3.父级添加伪元素
</p>
<div class="left">1</div>
<div class="right">2</div>
<div>3</div>
<div>4</div>
<span>1</span>
<span>2</span>
</body>
</html>
浮动案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.total {
height: 226px;
width: 1000px;
background-color: blue;
margin: 0 auto;
}
.left {
float: left;
height: 226px;
width: 300px;
background-color: #ff49d6;
text-align: center;
}
.right {
float: left;
height: 226px;
width: 700px;
background-color: #b9ffa7;
}
</style>
</head>
<body>
<div class="total">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
浮动案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
height: 285px;
width: 1226px;
background-color: yellowgreen;
margin: 0 auto;
}
.box li {
height: 285px;
width: 296px;
background-color: deeppink;
float: left;
margin-right: 14px;
}
.box .last {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</body>
</html>
使用隔墙法清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔墙法清除浮动</title>
<style>
.father {
width: 500px;
border: 1px solid deeppink;
margin: 0 auto;
}
.yiMao {
float: left;
width: 100px;
height: 200px;
background-color: magenta;
}
.erMao {
float: left;
width: 100px;
height: 200px;
background-color: #b9ffa7;
}
.clear {
clear: both;
}
.footer {
width: 600px;
height: 200px;
background-color: #b9ffa7;
}
</style>
</head>
<body>
<div class="father">
<div class="yiMao"></div>
<div class="erMao"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
使用overflow清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用overflow清除浮动</title>
<style>
.father {
width: 500px;
border: 1px solid deeppink;
margin: 0 auto;
overflow: hidden;
}
.yiMao {
float: left;
width: 100px;
height: 200px;
background-color: magenta;
}
.erMao {
float: left;
width: 100px;
height: 200px;
background-color: #b9ffa7;
}
.footer {
width: 600px;
height: 200px;
background-color: #b9ffa7;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="yiMao"></div>
<div class="erMao"></div>
</div>
<div class="footer"></div>
</body>
</html>
使用after清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加after清除浮动</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.father {
width: 500px;
border: 1px solid deeppink;
margin: 0 auto;
}
.yiMao {
float: left;
width: 100px;
height: 200px;
background-color: magenta;
}
.erMao {
float: left;
width: 100px;
height: 200px;
background-color: #b9ffa7;
}
.footer {
width: 600px;
height: 200px;
background-color: #b9ffa7;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="yiMao"></div>
<div class="erMao"></div>
</div>
<div class="footer"></div>
</body>
</html>
清除浮动之双伪元素清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before/after</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/*IE6 7 专有清除浮动*/
*zoom: 1;
}
.father {
width: 500px;
border: 1px solid deeppink;
margin: 0 auto;
}
.yiMao {
float: left;
width: 100px;
height: 200px;
background-color: magenta;
}
.erMao {
float: left;
width: 100px;
height: 200px;
background-color: #b9ffa7;
}
.footer {
width: 600px;
height: 200px;
background-color: #b9ffa7;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="yiMao"></div>
<div class="erMao"></div>
</div>
<div class="footer"></div>
</body>
</html>
以上是关于三大布局共用(标准流，浮动，定位)的主要内容，如果未能解决你的问题，请参考以下文章