html 盒子模型基础（文档流，浮动，页面布局）（五）

来源：互联网发布：淘宝鬼脚七微信号编辑：程序博客网时间：2024/05/16 01:10

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>

效果：

2.浮动（1）：

<!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>

效果：

0 0