CSS学习记录6/标准流排版方式/浮动流排版方式/网页布局方式/网页布局案例

最新推荐文章于 2023-09-07 21:10:04 发布

小婵婵不怕鬼

最新推荐文章于 2023-09-07 21:10:04 发布

阅读量306

点赞数

分类专栏： css学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_49080239/article/details/125458794

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是网页的布局方式？
网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。

1、标准流（文档流/普通流）排版方式：

（1）默认的排版方式就是标准流排版方式。
（2）在CSS中将元素分为三类，分别为块级元素/行内元素/行内块级元素
（3）标准流中如果元素是块级元素就会垂直排版和如果元素是行内元素和行内块级元素水平排版

2、浮动流排版方式：

（1）浮动流是一种“半脱离标准流”的排版方式
（2）浮动流就一种排版方式，就是水平排版，它只能设置某个元素的左对齐或右对齐，没有居中对齐，即没有center这个取值。
（3）在浮动流中不可以使用margin:0 auto;的。
（4）在浮动流中不区分块级元素、行内元素和行内块级元素，无论是哪种元素都可以水平排版。
（5）在浮动流中无论是块级元素、行内元素、还是行内块级元素都可以设置宽高。

什么是浮动元素的脱标？
脱标：脱离标准流
当某一个元素浮动之后，这一个元素就会像被删除了一样，这个就是浮动元素脱标。
浮动元素脱标之后会有什么？
如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面元素就会覆盖后面的元素。
浮动元素的排序规则：
（1）相同方向上的浮动元素，先浮动的元素显示在前面，后浮动的元素会显示在后面。
（2）不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
（3）浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

浮动元素贴靠现象：
当父元素的宽度够放下所有浮动元素时，浮动元素就会并列显示，父元素的宽度不够放下所有浮动元素时，就会从最后一个浮动的元素开始往前贴，直到贴到父元素的左边为止，如果贴到父元素的左边，那这时不管父元素够不够都会贴在那。

浮动元素的字围现象：
浮动元素不会盖住没有浮动元素内的文字，没有浮动元素内的文字会给浮动元素让出文字不被盖住。
应用场景：图文混排

企业开发中什么时候使用标准流什么时候使用浮动流？
垂直方向使用标准流，水平方向使用浮动流。

拿到一个很复杂的界面如何下手？
1、从上至下布局
2、从外向内布局
3、水平方向可以先划分为一左一右再对左边或者右边进行进一步布局。

网页布局案例;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        .header{
            width: 980px;
            height: 100px;
            /*background-color: red;*/
            margin: 0 auto;
        }
        .header .ding1{
            width: 200px;
            height: 100px;
            background-color: palevioletred;
            float: left;
        }
        .header .ding2{
            width: 150px;
            height: 50px;
            background-color: blueviolet;
            float: right;;
        }
        .header .ding3{
            width: 650px;
            height: 50px;
            background-color: #ffcaf3;
            float: right;
        }
        .content{
            width: 980px;
            height: 400px;
            margin: 0 auto;
            /*background-color: greenyellow;*/
            margin-top: 10px;
        }
        .zhongzuo{
            width: 320px;
            height: 400px;
            background-color: #ffcaf3;
            float: left;
        }
        .zhongyou{
            width: 650px;
            height: 400px;
            /*background-color: #b1b1a0;*/
            float: right;
        }
        .youshang{
            width: 650px;
            height: 350px;
            /*background-color: #ffada3;*/
        }
        .youxia{
            width: 650px;
            height: 40px;
            background-color: khaki;
            margin-top: 10px;
        }
        .youshangzuo{
            width: 400px;
            height: 350px;
            /*background-color: blueviolet;*/
            float: left;
        }
        .youshangyou{
            width: 240px;
            height: 350px;
            background-color: #ffcaf3;
            float: right;
        }
        .youshangzuo1{
            width: 400px;
            height: 200px;
            background-color: cadetblue;
            margin-bottom: 10px;
        }
        .youshangzuo2{
            width: 400px;
            height: 140px;
            background-color: darkturquoise;
        }
        .footer{
            width: 980px;
            height: 40px;
            margin: 0 auto;
            background-color: #ffada3;
            margin-top: 10px;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="ding1"></div>
    <div class="ding2"></div>
    <div class="ding3"></div>
</div>
<div class="content">
    <div class="zhongzuo">

    </div>
    <div class="zhongyou">
        <div class="youshang">
            <div class="youshangzuo">
                <div class="youshangzuo1"></div>
                <div class="youshangzuo2"></div>
            </div>
            <div class="youshangyou"></div>
        </div>
        <div class="youxia"></div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>

结果：
网页布局

小婵婵不怕鬼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录6/标准流排版方式/浮动流排版方式/网页布局方式/网页布局案例

什么是网页的布局方式？网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。（1）默认的排版方式就是标准流排版方式。（2）在CSS中将元素分为三类，分别为块级元素/行内元素/行内块级元素（3）标准流中如果元素是块级元素就会垂直排版和如果元素是行内元素和行内块级元素水平排版（1）浮动流是一种“半脱离标准流”的排版方式（2）浮动流就一种排版方式，就是水平排版，它只能设置某个元素的左对齐或右对齐，没有居中对齐，即没有center这个取值。（3）在浮动流中不可以使用margin:0 auto;的
复制链接

扫一扫