课程名称：初识HTML(5)+CSS(3)-升级版
章节名称：第13章 CSS3布局模型
讲师姓名：五月的夏天
课程内容：
CSS布局模型
流动模型（一）
流动模型（二）
浮动模型
课程收获：
1.CSS布局模型:
CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
（1）流动模型（Flow）
（2）浮动模型 (Float)
（3）层模型（Layer）
2.流动模型（一）:
（1）流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
（2）流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
3.流动模型（二）：
（1）在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。
4.浮动模型：
（1）设置元素浮动就可以实现两个块状元素并排显示。
任何元素在默认情况下是不能浮动的，但可以用 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>效果如图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动模型</title>
<style type="text/css">
div {
border: 2px red solid;
width: 200px;
height: 400px;
float:left;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>每天学习一点点！加油！！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦