为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天...

【九月打卡】第15天 初识HTML(5)+CSS(3)-升级版 第13章

2022.09.20 19:32 26浏览

课程名称:初识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>

效果如图:

https://img1.sycdn.imooc.com/6329a3d50001fdef04400269.jpg

代码:

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

每天学习一点点!加油!!

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
8

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消