1.网页布局方式
网页布局方式是指浏览器是如何对网页中的元素进行排版。
1.标准流（文档流/普通流）排版方式 ==》 水平排版/垂直排版两种
浏览器默认的排版方式，在CSS中将元素分为三类，块级元素/行内元素/行内块级元素。
元素是块级元素那么就会垂直排版
元素是行内或行内块级元素就会水平排版
2.浮动流排版方式
浮动流是一种半"脱离标准流"的排版方式，只能水平排版，设置某个属性的左对齐获取右对齐。
在浮动流中不区分块级元素/行内元素/行内块级元素，并且都可以输入值宽高，水平排版。
浮动流没有居中对齐,不能使用margin: auto;
3.定位流排版方式
1.1标准流排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准流排版</title>
<style>
div,h1,p {
border: 1px solid black;
}
span,strong,b {
border:1px solid black;
}
</style>
</head>
<body>
<div>d1</div>
<h1>h1</h1>
<p>p1</p>
<hr>
<span>apan</span><strong>strong</strong><b>b</b>
</body>
</html>
1标准流排版换行现象
两个行内块级标签，在同一个行显示，使用maring属性隔开，
在对网页拉伸收缩的时候，
如果第一行的页面没有可现实的位置会自动换行到第二行去显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准流排版换行现象</title>
<style>
div {
width: 100px;
height: 100px;
display: inline-block;
}
.box1 {
background-color: red
}
.box2 {
background-color:blue;
margin-left:1200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.2浮动流排版
float属性 让标签脱离文档流。
值：
left; 在父标签中左对齐
right; 在父标签中右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动流基本概念</title>
<style>
span {
height: 100px;
width: 100px;
}
.box1 {
background-color:red;
float: left;
}
.box2 {
background-color:black;
float: right;
}
</style>
</head>
<body>
<span class="box1"></span>
<span class="box2"></span>
</body>
</html>
1.浮动元素的脱标
1.浮动元素的脱标
脱标：脱离标准流。当某一个元素浮动之后，那么这个元素看上去像被从标准流中删除。
2.浮动元素脱标之后的影响
如果前面一个元素浮动流后左对齐，后一个元素没有浮动那么这个时候前面的一个元素会盖住后面一个元素。
被覆盖区域如果有文字，那么文字会自动移动位置，显示出来。（字围现象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素脱标</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color:red;
float:left;
}
.box2 {
height: 150px;
width: 150px;
background-color: #62ff00;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
2.浮动元素排序规则
1.相同方向上的浮动元素，先浮动的元素会现在在前面，后浮动的元素会显示在后面。
2.不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3.浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动排序规则1</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color:red;
float:left;
}
.box2 {
width: 150px;
height: 150px;
background-color:blue;
float:left;
}
.box3 {
width: 200px;
height: 200px;
background-color:orange;
float:left;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动排序规则2</title>
<style>
div {
height: 100px;
width: 100px;
background: aqua;
border:1px solid;
}
.box1,.box2 {
float:left
}
.box3,.box4 {
float:right;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动排序规则3</title>
<style>
div {
border: 1px solid black;
}
.box1,.box3{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2,.box4{
width: 150px;
height: 150px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
3.浮动元素帖靠现象
当父元素的宽度足够放下的浮动元素的时候那么它们会并列显示。
当父元素的宽不足以放下浮动元素的时候，那么从最后一个浮动元素开始往前帖，
如果不宽度还是不够，直到帖到父元素为止，
这时不管够不够都不会再往前了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素贴靠现象</title>
<style>
.father {
width: 500px;
height: 500px;
border:1px solid
}
.box1 {
height: 300px;
width: 100px;
background-color:red;
float:left;
}
.box2 {
height: 100px;
width: 100px;
background-color: #00ff22;
float:left;
}
.box3 {
height: 100px;
width: 300px;
background-color: #fff200;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
4.浮动元素的字围现象
字围现象：
浮动元素在覆盖没有浮动的元素时，
覆盖的元素中存在文字，文字是不被覆盖的，文字会围绕着被覆盖的区域显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素字围现象</title>
<style>
div {
width: 100px;
height: 100px;
background-image: url("image/yy.png");
border:1px solid black;
float:left;
}
p {
width: 500px;
height: 300px;
background-color:orange;
border:1px solid black;
}
</style>
</head>
<body>
<div></div>
<p>阴阳 （中国古代哲学思想） 语音 编辑 讨论3 上传视频
阴阳是一个简朴而博大的中国古代哲学。
阴阳哲理自身具有三个特点：统一、对立和互化。在思维上它是算筹（算数）和占卜（逻辑）不可分割的玄节点。自然界中生物的基因，人工智能中的二进制都充分彰显了阴阳的生命力。
阴阳是中国古代文明中对蕴藏在自然规律背后的、推动自然规律发展变化的根本因素的描述，是各种事物孕育、发展、成熟、衰退直至消亡的原动力，是奠定中华文明逻辑思维基础的核心要素。概括而言，按照易学思维理解，其所描述的是宇宙间的最基本要素及其作用，是伏羲易的基础概念之一。
阴阳相冲化万物，世间万物，皆有阴阳之道。即可从万物万事之间领悟到一丝阴阳之理。古人与后人都对其领悟，拥有不同的见解，因其万物存于阴阳之道，所以古今在各个学术中都有其影。
阴阳一词，代表了很多的意思和道理，简单笼统分为：阴阳对立，阴阳相冲，阴阳转换。</p>
</body>
</html>
5.浮动练习
从上至下，垂直方向使用标准流，水平方向使用浮动流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动练习</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
.header {
width: 980px;
height: 100px;
margin: 0 auto;
}
.header .logo {
width: 250px;
height: 100px;
background-color:pink;
float:left;
}
.header .language {
width: 150px;
height: 50px;
background-color: skyblue;
float:right;
}
.header .nav {
width: 650px;
height: 50px;
background-color:purple;
float:right;
}
.content {
width: 980px;
height: 400px;
margin: 10px auto;
}
.content .aside{
width: 320px;
height: 400px;
background-color:yellow;
float:left;
}
.content .article {
width: 650px;
height: 400px;
float:right;}
.content .article .articleTop {
width: 650px;
height: 350px;
}
.content .article .articleBottom {
width: 650px;
height: 40px;
background-color: #c08413;
margin-top:10px;
}
.content .article .articleTopLeft {
width: 400px;
height: 350px;
float: left;
}
.content .article .articleTopRight {
width: 240px;
height: 350px;
background-color: #aaca32;
float:right;
}
.content .article .articleTopLeft .news1 {
width: 400px;
height: 200px;
background-color: #f920a6;
}
.content .article .articleTopLeft .news2 {
width: 400px;
height: 140px;
background-color: #00c0eb;
margin-top:10px;
}
.footer {
width: 980px;
height: 40px;
background-color:tomato;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="language"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article">
<div class="articleTop">
<div class="articleTopLeft">
<div class="news1"></div>
<div class="news2"></div>
</div>
<div class="articleTopRight"></div>
</div>
<div class="articleBottom"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
2.浮动元素高度问题
1.在标准流中内容可u撑起父元素的高度。
2.在浮动流中浮动的元素是不可以撑起父元的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素高度问题</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
div {
border:1px solid black;
}
p {
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
3.清除浮动
两个div标签都没有了支撑，都到一行中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方式一)</title>
<style>
* {
padding: 0;
margin:0;
}
.box1 {
background-color:red;
}
.box2 {
background-color:aqua;
}
.box1 p {
background-color:burlywood;
width: 100px;
}
.box2 p {
background-color:skyblue;
width: 100px;
}
p {
float: left;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.1方式一
给父元素设置一个高度。
注意：
在开发中，能不谢高度酒不写高度，这个方式使用很少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方式一)</title>
<style>
* {
padding: 0;
margin:0;
}
.box1 {
height: 21px;
background-color: red;
}
.box2 {
background-color:aqua;
}
.box1 p {
background-color:burlywood;
width: 100px;
}
.box2 p {
background-color:skyblue;
width: 100px;
}
p {
float: left;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.2方式二
给后面的盒子提那家clear属性。
clear 属性：
值：
none; 默认值，按照浮动元素的排序规则来排序（左/右浮动找左/右浮动）
left; 不找前面的左浮动
right; 不找前面的右浮动
both; 不找前面的左右浮动
inherit; 继承父元素的clear属性值。
注意：
在给某个元素调clear属性之后,那么这个属性的margin属性就会失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方案二)</title>
<style>
* {
padding:0;
margin:0;
}
.box1 {
background-color: red;
}
.box2 {
clear:both;
margin-top: 20px;
background-color:aqua;
}
.box1 p {
width: 100px;
background-color: burlywood;
}
.box2 p {
width: 100px;
background-color:skyblue;
}
p {
float:left;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.3margin-top失效原因
第一个盒子没有支持就等于没有存在，第二个盒子margin-top 的对象是父元素body。
在开发中没有人为body设置边框，所以失效。
为父元素设置一个边框(仅演示)，
marding-top的值大于第一行的浮动元素的高，
不然向左，会紧帖前面的浮动元素。
（原理太难不去学校，这个知识点了解即可。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方案三)</title>
<style>
* {
padding:0;
margin:0;
}
body {
border: 1px solid #000;
}
.box1 {
background-color: red;
}
.box2 {
margin-top:21px;
background-color:aqua;
}
.box1 p {
width: 100px;
background-color: burlywood;
}
.box2 p {
width: 100px;
background-color:skyblue;
}
p {
float:left;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.4清除浮动方式三
隔墙法：
1.外墙法：在两个盒子中间添加一个额外的块级元素，再设置clear:both;
第三个盒子可以使用margin-top，第一个盒子无法使用margin-bottom。s
一般情况下不会去第三个盒子的margin-top,而是设置第二个盒子的hight。
2.内墙法：在第一个盒子所有子元素中添加一个而外的块级元素，在设置clear:both；
外墙法可以在第二盒子中使用margin-top,第一个盒子中使用margin-bottom；
区别：
外墙法不能撑起第一个盒子的高度，
内墙法可以撑起第一个盒子的高度。
（前端中结构和样式分离，隔墙法直接通过修改html代码来修改了样式。）
1.外墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方案三)</title>
<style>
* {
padding:0;
margin:0;
}
.box1 {
background-color: red;
}
.box2 {
background-color:aqua;
}
.box1 p {
width: 100px;
background-color: burlywood;
}
.box2 p {
width: 100px;
background-color:skyblue;
}
p {
float:left;
}
.wall {
clear:both;
}
.h20 {
height: 20px;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="wall h20"></div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
2.内墙法
第一个盒子被撑起，
第一部分是漂浮元素的高，第二部分为内墙盒子的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方式三,内墙法)</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方案三,外墙法)</title>
<style>
* {
padding:0;
margin:0;
}
.box1 {
background-color: red;
}
.box2 {
background-color:aqua;
}
.box1 p {
width: 100px;
background-color: burlywood;
}
.box2 p {
width: 100px;
background-color:skyblue;
}
p {
float:left;
}
.wall {
clear:both;
}
.h20 {
height: 20px;
background-color: #9dff00;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div class="wall h20"></div>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.5伪元素选择器
伪元素选择器作用：
可以给指定标签的内容前面/后面添加一个子元素（标签）。
格式：
在内容前面添加：
标签::before {
content:"内容";
其他属性设置···
}
在内容后面添加：
标签::after {
content:"内容";
其他属性设置···
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
div {
width: 300px;
height: 300px;
background-color:red;
}
div::before{
content:"第一段";
display:block;
height: 50px;
width: 50px;
background-color:pink;
}
div::after{
content:"第三段";
display:block;
height: 50px;
width: 50px;
background-color: #62ff00;
}
</style>
</head>
<body>
<div>
第二段
</div>
</body>
</html>
3.6隐藏子元素
visibility 属性 子元素的显示模式
hidden； 隐藏
hight属性设置为0，文字内容还是可以显示的,在设置visibility属性隐藏子元素。
hight不设置为0，隐藏只是看不见，但是高度还存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素显示模式(隐藏)</title>
<style>
div {
width: 500px;
background-color:red;
}
.box1::before{
content:"第一段";
display:block;
width: 50px;
height: 50px;
background-color:skyblue;
}
.box1::after{
content:"第三段";
display:block;
width: 50px;
height: 50px;
background-color:salmon;
visibility: hidden;
}
.box2::before{
content:"第一段";
display:block;
width: 50px;
height: 50px;
background-color:skyblue;
}
.box2::after{
content:"第三段";
display:block;
width: 50px;
height: 0;
background-color:salmon;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1">
第二段
</div>
<hr>
<div class="box2">
第二段
</div>
</body>
</html>
3.7清除浮动(方式四)
伪元素+子元素隐藏+内隔墙法。
结构与样式分离。CSS修改样式。开发中推荐使用。
在ie6中会有兼容问题，伪元素不起作用。
需要给第一个盒子添加：
/*兼容ie6*/
.box1 {
*zoom:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方式一)</title>
<style>
* {
padding: 0;
margin:0;
}
.box1 {
height: 21px;
background-color: red;
}
.box2 {
background-color:aqua;
}
.box1 p {
background-color:burlywood;
width: 100px;
}
.box2 p {
background-color:skyblue;
width: 100px;
}
p {
float: left;
}
.box1::after {
content:"";
display: block;
height: 0;
visibility: hidden;
clear:both;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.8清除浮动(方式五)
overflow:hidden；的作用
1.
盒子的文本内容过长可以正常显示。
overflow:hidden; 设置文字内容超出标签范围不显示。
2.
overflow:hidden; 在第一个盒子中设置，也可以用来清除浮动。
注意：
可以撑标签。
第一个盒子可以使用margin-bottom，第二个盒子可以使用margin-top。
兼容问题: ie6中不生效，也需要加上*zoom:1;
3.盒子嵌套，子元素设置margin-top,父元素设置overflow:hidden；
可以防止父元素塌陷。外面的盒子没有边框也不会被顶下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动(方式五)</title>
<style>
* {
padding: 0;
margin:0;
}
.box1 {
background-color: red;
overflow:hidden;
}
.box2 {
background-color:aqua;
}
.box1 p {
background-color:burlywood;
width: 100px;
}
.box2 p {
background-color:skyblue;
width: 100px;
}
p {
float: left;
}
</style>
</head>
<body>
<div class="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="box2">
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
3.9防止父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止父标签塌陷</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color:red;
overflow:hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: #62ff00;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>