从零开始学习html（十二）CSS布局模型——上
2018-06-24 01:20:26来源：未知 阅读 ()
一、css布局模型
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。
但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。
如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
这三个布局模型究竟是什么布局？
二、流动模型（一）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>流动模式下的块状元素</title> 6 <style type="text/css"> 7 #box1{ 8 width:300px; 9 height:100px; 10 } 11 div,h1,p{ 12 border:1px solid red; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 18 <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 19 <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 20 21 <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px--> 22 </body> 23 </html>
先来说一说流动模型，流动（Flow）是默认的网页布局模式。
也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以行的形式占据位置。如代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
观查一下右侧代码编辑器中的代码，感受一下块状元素的特点：“在默认状态下，块状元素的宽度都为100%”。
三、流动模型（二）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>流动模式下的内联元素</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em> 12 <strong>强调</strong> 13 </body> 14 </html>
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
（内联元素可不像块状元素这么霸道独占一行）
代码编辑器中内联元素标签a、span、em、strong都是内联元素。
观查一下代码编辑器中的代码，感受一下在流动模型下，内联元素的特点：“包含元素内从左到右水平分布显示”。
流动模型：
1 块级元素从上到下垂直显示 宽度100%
2 内联元素从左到右水平分布显示
四、浮动模型
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>浮动模型</title> 6 <style type="text/css"> 7 div{ 8 border:2px red solid; 9 width:200px; 10 height:400px; 11 12 } 13 14 </style> 15 </head> 16 <body> 17 <div id="div1">栏目1</div> 18 <div id="div2">栏目2</div> 19 </body> 20 </html>
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？
不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，
如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
效果图
当然你也可以同时设置两个元素右浮动也可以实现一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
效果图
又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
效果图
来试试，在右侧的代码编辑器中试一试使两个栏目并排显示出来且两个栏目都是左对齐。
在代码编辑器中的第 11 行输入下面代码：
float:left;
3个栏目并排显示，可以利用之前学习的{inline-block}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：火狐hr标签的兼容性问题
下一篇：htnl类名命规范
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
