1.文档流：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
margin-top: 500px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
文档流
文档流是网页的最底层，我们所创建的元素默认情况下都在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中自上向下排列（垂直排列）
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中默认高度被内容（子元素）撑开
内联元素
1.内联元素在文档流中自左向右水平排列，
如果在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列
2.内联元素的宽度和高度都由内容撑开
-->
<span class="s1">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<span class="s2">我是span</span>
<div class="box1">
<div style="height: 100px;"></div>
</div>
<div class="box2"></div>
</body>
</html>效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 800px;
height: 200px;
background-color: yellow;
/*
浮动
* - 使用float可以设置元素的浮动，
* 当一个元素设置了浮动以后，将会脱离文档流，然后向页面的左上或右上移动
* 当元素脱离文档流以后，它将不会在文档流中占据位置，文档流中的其他元素将自动上移
* - 可选值：
* none，默认值，元素不浮动，在文档流中排列
* left，元素向左浮动
* right，元素向右浮动
*
*
* 1.当浮动元素遇到父元素的边框时，会停止移动
* 2.浮动元素移动时，如果遇到了其他的浮动元素，也会停止移动
* 3.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素不会超过该元素
* 4.浮动元素不会超过他上边的浮动的兄弟元素，最多最多一边齐
*
*/
/*设置box1向右浮动*/
/*float: right;*/
float: left;
}
.box2{
width: 800px;
height: 200px;
background-color: yellowgreen;
float: left;
/*设置向右浮动*/
/*float: right;*/
}
.box3{
width: 200px;
height: 200px;
background-color: skyblue;
float: right;
/*float: right;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮动（2）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除默认样式*/
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
/*
设置box1向左浮动
* */
float: left;
/*
浮动元素的层级要高于文档流中元素的层级，
文字不会被浮动元素所覆盖，文字会环绕在浮动元素的周围，
我们可以通过浮动来设置文字环绕图片的效果
* */
}
.p1 {
background-color: #bfa;
}
.box2{
background-color: yellowgreen;
float: left;
/*
* 一旦脱离文档流，所有的元素都是块元素
当元素浮动以后会完全脱离文档流
1.块元素脱离文档流以后，不会再独占一行
2.块元素脱离文档流以后，宽度和高度都被内容撑开
3.内联元素脱离文档流，会变成块元素，它的特点和块元素脱离文档流的特点一样
* */
}
span{
/*设置span浮动*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<div class="box2">aaaaaaa</div>
<span>我是一个内联元素span</span>
</body>
</html>
3.页面布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置头部div*/
.header{
width: 1000px;
height: 100px;
background-color: yellow;
/*设置居中*/
margin: 0 auto;
}
/*设置content*/
.content{
width: 1000px;
height: 400px;
background-color: orange;
/*设置居中*/
margin: 10px auto;
}
/*设置left*/
.left{
height: 400px;
width: 200px;
background-color: skyblue;
/*设置向左浮动*/
float: left;
}
/*设置center*/
.center{
height: 400px;
width: 580px;
background-color: #bfa;
/*设置向左浮动*/
float: left;
/*设置左右外边距*/
margin: 0 10px;
}
/*设置right*/
.right{
height: 400px;
width: 200px;
background-color: #FF0000;
/*设置向左浮动*/
float: left;
}
/*设置底部*/
.footer{
width: 1000px;
height: 100px;
background-color: silver;
/*设置居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!--创建三个div-->
<!--头部-->
<div class="header"></div>
<!--主体-->
<div class="content">
<!--添加三个div-->
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!--底部-->
<div class="footer"></div>
</body>
</html>
788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
