H5 58-网页的布局方式

时间：2022-03-06 21:07:31
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>58-网页的布局方式</title>

    <style>

        /*

        div,h1,p{

            border: 1px solid #000;

        }

        span,strong,b{

            border: 1px solid #000;

        }

        */

        *{

            margin: 0;

            padding: 0;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: red;

            /*display: inline-block;*/

            float: left;

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: blue;

            /*display: inline-block;*/

            /*margin-left:930px;*/

            float: right;

        }

    </style>

</head>

<body>

<!--

1.什么是网页的布局方式?

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

1.标准流(文档流/普通流)排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素

1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版

垂直排版, 如果元素是块级元素, 那么就会垂直排版

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

2.浮动流排版方式

2.1浮动流是一种"半脱离标准流"的排版方式

2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值

2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的

无论是级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

3.定位流排版方式

-->

<!--

<div>我是div</div>

<h1>我是标题</h1>

<p>我是段落</p>

-->

<!--

<span>我是span</span>

<strong>我是强调</strong>

<b>我是加粗</b>

-->

<span class="box1"></span>

<span class="box2"></span>

</body>

</html>

相关文章