欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML连载44-标准排版、浮动排版

程序员文章站 2023-12-19 20:35:10
一、什么网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的 二、标准流排版方式(又称为文档流、普通流) 1.含义 其实浏览器默认的排版方式就是标准流排版方式 2.在CSS中将元素分为三类:块级元素(独占一行,可以是设置宽高)、行内元素(不独占一行不能设置宽高),行内块级元素 ......

一、什么网页的布局方式?

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

二、标准流排版方式(又称为文档流、普通流)

1.含义

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

2.在css中将元素分为三类:块级元素(独占一行,可以是设置宽高)、行内元素(不独占一行不能设置宽高),行内块级元素(既不独占一行又可以设置宽高)

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

垂直排版:元素是块级元素,那么就会垂直排版;

水平排版:元素是行内元素或者行内块级元素,那么就会水平排版。

举例:

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>d121_layoutofweb</title>

    <style>

        div,p,h1{r

            boder:1px solid red;

        }

        span,b,strong{

            border:2px dotted purple;

        }

</style>

</head>

<body>

<div>我是div</div>

<h1>我是标题</h1>

<p>我是段落</p>

<span>我是span</span>

<b>我是加粗</b>

<strong>我是加粗</strong>

</body>

</html>

 

HTML连载44-标准排版、浮动排版

三、浮动排版

我们对于标准流来进行布局的时候,首先要分清元素的属性,来进行布局,设置好之间的距离参数,但是每个人的屏幕分辨率都是不一样的,可能在你的屏幕上是好的,换做其他人那里位置就不是我们所预期的了,因此我们引出浮动排版,以此来应对活动多变屏幕。

举例:

 

<style>

        .box1{

            width: 200px;

            height:200px;

            background-color: red;

            display:inline-block;

​

        }

        .box2{

            width: 200px;

            height:200px;

            background-color: blue;

            display: inline-block;

            float:right;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

 

 

我们可以看出来源码中加入了float:right;

这段代码,在标准流的基础上,将我们第二个盒子进行浮动调整,也就是这个蓝色的盒子,无论页面的分辨率是怎么变得,它水平居右的属性不变,如果我们用外边距来实现居右,分辨率一变,那么相对位置也就变了。

HTML连载44-标准排版、浮动排版

 
   

 

 

HTML连载44-标准排版、浮动排版

2.浮动流是一种“半脱离标准流”的排版方式

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

注意点:

(1)浮动流中没有居中对齐。

(2)在浮动流中是不能使用:margin:0 auto;来进行设置居中的。

特点:

在浮动流中,不会区分行内元素和块级元素的并且也是对任意元素进行宽高设置,因此上面的示例代码,就可以把display属性去掉了。即

 

  

      .box1{

            width: 200px;

            height:200px;

            background-color: red;

            /*display:inline-block;*/

            float:left;

​

        }

        .box2{

            width: 200px;

            height:200px;

            background-color: blue;

            /*display: inline-block;*/

            float:right;

        }

 

 

四、源码:

d121_layoutofweb.html

d122_layoutoffloat.html

地址:

https://github.com/ruigege66/html_learning/blob/master/d121_layoutofweb.html

https://github.com/ruigege66/html_learning/blob/master/d122_layoutoffloat.html

2.csdn:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包

 HTML连载44-标准排版、浮动排版                                                                                 

上一篇:

下一篇: