资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端基础-CSS如何布局以及文档流

前端基础-CSS如何布局以及文档流

番茄西红柿 / 2726人阅读

摘要：一网页布局方式二标准流三浮动流四定位流一网页布局方式什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如，等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的网页布局排版的三种方式标准

  • 一、 网页布局方式
  • 二、 标准流
  • 三、 浮动流
  • 四、 定位流

一、 网页布局方式

　1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，

比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的

　　2、网页布局/排版的三种方式

　　　　2.1、标准流
　　　　2.2、浮动流
　　　　2.3、定位流

二、 标准流

　　标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

　　1 、浏览器默认的排版方式就是标准流排版方式

　　2 、在CSS中将元素分为三类：分别是 块级 行内 行内块级

　　3、在标准流中有两种排版方式，一种是垂直排版，一种是水平排版 垂直排版，如果元素是块级元素，那么就会垂直排版 水平排版，

如果元素是行内元素或行内块级元素，那么就会水平排版

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>

    <style type="text/css">
        div,h1,p {
            border: 1px solid red;
        }

        span，strong,b {
            border: 1px solid #000;
        }
    style>
head>
<body>
<div>我是divdiv>
<h1>我是标题h1>
<p>我是段落p>

<span>spanspan>
<strong>我是强调strong>
<b>我是加粗b>
body>
html>
实例

三、 浮动流

1、浮动流是一种半脱离标准流的排版方式那什么是脱离文档流？什么又是半脱离文档流？

1.1 什么是脱离文档流？

　　1、浮动元素脱离文档流意味着

　　　　1、不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版

　　　　2、无论是什么级的元素都可以设置宽高 综上所述，浮动流中的元素和标准流总的行内块级元素很像

DOCTYPE html>
<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*
        不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版：span和p都显示到一行
        无论是什么级的元素都可以设置宽高：span这种行内元素也可以设置宽高
        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;

            float: left;
        }


    style>
head>

<body>

<span class="box1">我是spanspan>
<p class="box2">我是段落p>



body>
html>
实例

　　2、浮动元素脱标文档流意味着

　　　　1、当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

　　　　2、如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素脱标title>

    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    style>
head>
<body>
<div class="box1">div>
<div class="box2">div>


body>
html>
实例

注意点：

　　1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值

 　  2、一旦使用了浮动流，则margin:0 auto;失效

DOCTYPE html>
<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 930px;
            height: 100px;
            border: 1px solid #000;

            margin: 0 auto;
        }

        .logo {
            width: 100px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        .nav {
            width: 300px;
            height: 50px;
            background-color: green;
            float: left;

            /*失效*/
            margin: 0 auto;
        }

    style>
head>

<body>

<div class="header">
    <div class="logo">div>
    <div class="nav">div>
div>
实例 
DOCTYPE html>
<html>
<head>
    <title>方式一：修改显示方式为inline-blocktitle>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            /*
            当设置box2的margin-left足够大时，第二个盒子就靠右面显示了
            但是当浏览器界面缩小时，box2由于左边的margin-left不够930，则必须换一个新行显示，就无法让两个盒子处于一行
            */
            margin-left: 930px;
        }

    style>
head>

<body>



<div class="box1">div>
<div class="box2">div>


body>
html>










DOCTYPE html>
<html>
<head>
    <title>方式二：用浮动的方式title>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            float: right;
        }

    style>
head>

<body>



<div class="box1">div>
<div class="box2">div>


body>
html>
让两个元素显示到一行，有两种实现方式，一种是修改元素的显示方式为inline-block，另外一种就是用浮动的方式

1.2、 那什么又是半脱离文档流？

脱离分为：半脱离与完全脱离， 其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，
比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，
打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，
他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：

（1）同一个方向上谁先浮动，谁在前面

（2）不同方向上左浮动找左浮动，右浮动找右浮动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素排序规则title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>
浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素排序规则title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: left;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
<div class="box4">4div>


body>
html>
同一个方向上谁先浮动，谁在前面 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素排序规则title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: right;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: right;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    style>
head>
<body>

<div class="box1">1div>
<div 
                 

                                                                                                                    
                         GPU云服务器
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css布局
                                                                                                           css布局教程
                                                                                                           学习css布局
                                                                                                           文档流输出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2200.html

相关文章

  • 前端常见知识点汇总（面试）-HTML和CSS部分

    摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

    DevTTL 评论0 收藏0

  • 前端常见知识点汇总（面试）-HTML和CSS部分

    摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

    wuyangnju 评论0 收藏0

  • 前端面试之CSS总结(上)

    摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

    琛ｈ。 评论0 收藏0

  • CSS 布局经典问题初步整理

    摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

    Amos 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<