day 8
标准文档流
我们开发网页更像写word，我们开发网页有自己的书写规律，从上往下，从左往右。前面内容的变化会影响后面内容的位置。
以上也是标准文档流的特性
HTML文件就是一种标准文档流的文件，所以也有一些自己的特性
元素类型
从HTML的角度讲，元素分两个级别：容器级和文本级
从CSS角度讲，将元素分为三种类型：块级元素，行内元素，行内块元素
块级元素
特点：可以设置宽度和高度，元素独占一行。
常用的块级元素：div、p、h1~h6，ul，ol，dl等
行内元素
特点：文字并排显示，不能设置盒子的宽度和高度。
常用的行内元素：span，a，b，u，i等
行内块元素
特点：既能设置宽高，盒子又能并排显示
常见的行内块元素：input，img，table
display：显示模式
大部分标签默认的时候都会以各自的显示状态（类型）进行加载，标签的显示状态并不是固定不变的，可以通过css属性display进行切换。
属性值：
block：砖块的意思，表示标签要以块级元素加载
inline：标签以行内元素加载
inline-block：表示将标签以行内块元素显示
如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现一些非标准流特点的页面，就必须让标签去标准化。
让标签脱离标准流的方法有两个：浮动、定位
浮动
浮动属性是专门用于进行网页并排布局的
作用：脱离了标准文档流，不再受元素等级的限制（块级，行内，行内块），又可以并排显示，又可以设置宽高
float：属性就是设置元素浮动
属性值：left和right
不管是left还是right，都是以1标签为标准的
浮动特性：元素会按照书写的顺序进行依次贴边，同一个父盒子中，既可以设置左浮动，也可以设置左浮动也可以设置有浮动。
浮动练习
还原上图的布局
从外向内拆分布局
如果浮动元素要设置宽度，不会撑满父盒子，而会被内容撑宽
所有的兄弟元素，一个设置了浮动，剩下的兄弟元素也必须设置浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.inner{
width: 970px;
margin: 0 auto;
}
.inner .top{
height: 103px;
margin-bottom:10px;
}
.inner .top .logo{
width: 277px;
height: 103px;
background-color:red;
float:left;
}
.inner .top .nav{
width: 679px;
height: 103px;
float:right;
}
.inner .top .nav .news{
width: 137px;
height: 49px;
background-color:green;
float:right;
margin-bottom :8px;
}
.inner .top .nav .lead{
height: 46px;
background-color:green;
float:right;
width:100%;
}
.inner .middle{
height: 435px;
margin-bottom:10px;
}
.inner .middle .left{
width: 310px;
height: 435px;
background-color:orange;
float:left;
}
.inner .middle .right{
width: 650px;
height: 435px;
float:right
}
.inner .middle .right .rtop{
height: 401px;
margin-bottom:10px;
}
.inner .middle .right .bottom{
height: 25px;
background-color:blue;
}
.inner .middle .right .rtop .rleft{
width: 450px;
height: 401px;
background-color:perple;
float:left;
}
.inner .middle .right .rtop .rleft .stop{
height: 240px;
background-color:blue;
margin-bottom:10px;
}
.inner .middle .right .rtop .rleft .smiddle{
height: 110px;
background-color:blue;
margin-bottom:10px;
}
.inner .middle .right .rtop .rleft .sbottom{
height: 30px;
background-color:blue;
margin-bottom:10px;
}
.inner .middle .right .rtop .rright{
width: 190px;
height: 401px;
background-color:purple;
float:right;
margin-bottom:10px;
}
.inner .middle .right .rbottom{
width: 650px;
height: 25px;
background-color:yellow;
float:right;
}
.inner .footer{
height: 35px;
background:navy;
}
</style>
<body>
<div class="inner">
<!-- 顶部 -->
<div class="top">
<div class="logo"></div>
<div class="nav">
<div class="news"></div>
<div class="lead"></div>
</div>
</div>
<!-- 中心部分 -->
<div class="middle">
<div class="left"></div>
<div class="right">
<div class="rtop">
<div class="rleft">
<div class="stop"></div>
<div class="smiddle"></div>
<div class="sbottom"></div>
</div>
<div class="rright"></div>
<div class="rbottom"></div>
</div>
</div>
</div>
<!-- 尾部部分 -->
<div class="footer">
</div>
</div>
</body>
</html>
浮动的性质
浮动的元素脱标
标准流中元素是分为行、块和行内块的
我们知道了浮动元素是脱离标准流的，那么脱离标准流之后，浮动元素有哪些特性呢？
Answer：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素状态，也就是不区分行内元素和块级元素。
没有脱标：
P标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有设置宽高。
Div内部元素浮动时候，此时既可以显示宽高，又可以并排显示。（此时要注意，兄弟元素，一个浮动，另外一个也需要设置浮动）
如果此时p标签和span标签都没有设置宽高，元素的宽度会被内容撑宽，不会自动撑满父盒子。
依次贴边
如果父盒子的宽度不足以所有的子盒子，存放不下的会自动向前寻找，直到空余位置能够存放，从而进行贴边显示。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 400px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
height: 200px;
background: blue;
}
div p.par3{
background: yellow;
}
div p.par4{
width: 300px;
background: cyan;
}
</style>
</head>
<body>
<div>
<p class="par1">1</p>
<p class="par2">2</p>
<p class="par3">3</p>
<p class="par4">4</p>
</div>
</body>
如果父盒子的宽度不够，子盒子会依次贴边，但是如果前面元素中有空隙，当前需要贴边的元素不会钻空，不会出现钻空现象，而会查询剩余宽度，实现依次贴边。
div {
width: 600px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
width: 330px;
background: blue;
}
div p.par3{
height: 200px;
background: yellow;
}
div p.par4{
width: 400px;
background: cyan;
}
如果某一个子盒子的宽度大于父盒子，会有溢出现象。
div {
width: 600px;
height: 400px;
border: 5px solid red;
margin: 100px auto
}
div p{
width: 100px;
height: 100px;
float: left;
}
div p.par1{
height: 250px;
background: green;
}
div p.par2{
width: 330px;
background: blue;
}
div p.par3{
height: 200px;
background: yellow;
}
div p.par4{
width: 650px;
background: cyan;
}
向右贴边原理和向左贴边相同，也是按照先后顺序进行贴边。
浙公网安备 33010602011771号