python全栈学习--day48

时间:2022-12-31 14:08:39

块级元素和行内元素

学习HTML的初期,我们就要知道,标准文档流等级森严。标签分为两种等级:

  • 行内元素
  • 块级元素

比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现:

行内元素和块级元素的区别:(非常重要)

行内元素:

  • 与其他行内元素并排;
  • 不能设置宽、高。默认的宽度,就是文字的宽度。

块级元素:

  • 霸占一行,不能与其他任何元素并列;
  • 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类:

在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。

从HTML的角度来讲,标签分为:

  • 文本级标签:p、span、a、b、i、u、em。
  • 容器级标签:div、h系列、li、dt、dd。

  PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h和ul,p里面也不能放p。

现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:

  • 行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。

  • 块级元素:所有的容器级标签都是块级元素,还有p标签。

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素:

一旦,给一个块级元素(比如div)设置:

display: inline;

那么,这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:

  • 此时这个div不能设置宽度、高度;
  • 此时这个div可以和别人并排了

行内元素转换为块级元素:

同样的道理,一旦给一个行内元素(比如span)设置:

display: block;

那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了,别人无法和他并排
  • 如果不设置宽度,将撑满父亲

标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流

css中一共有三种手段,使一个元素脱离标准文档流:

  • (1)浮动
  • (2)绝对定位
  • (3)固定定位

浮动

浮动是CSS里面布局最多的一个属性,也是很重要的一个属性。

 

float:表示浮动的意思。它有四个值。

  • none: 表示不浮动,默认
  • left: 表示左浮动
  • right:表示右浮动

看一个例子

HTML结构:

 <div class="box1"></div>
 <div class="box2"></div>
 <span>python学习</span>

css样式:

python全栈学习--day48
.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }
python全栈学习--day48

我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。

 

那么浮动如果大家想学好,一定要知道它的四大特性

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

 

浮动元素脱标

脱标:就是脱离了标准文档流

 

看例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lean2</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>
    <span>小马哥</span>
    <span>小马哥</span>
</body>

</html>

原因1:小红设置了浮动,小黄没有设置浮动,小红脱离了标准文档流,其实就是它不在页面中占位置了,此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象,也有一种叫法,浮动元素“飘起来了”,但我不建议大家这样叫。

原因2:所有的标签一旦设置浮动,就能够并排,并且都不区分行内、块状元素,都能够设置宽高

浮动元素互相贴靠

看例子

html结构

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

css样式

        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果发现:

如果父元素有足够的空间,那么3哥紧靠着2哥,2哥紧靠着1哥,1哥靠着边。
如果没有足够的空间,那么就会靠着1哥,如果再没有足够的空间靠着1哥,自己往边靠

 

收缩:一个浮动元素。如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)

html结构:

<div>
     alex
</div>

css样式:

div{
    float: left;
    background-color: red;
}

 

大家一定要谨记:关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动。另外,有浮动,一定要清除浮动,

 

为什么要清除浮动

在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。(为什么?)

大家想,如果我第一版的页面的写完了,感觉非常爽,突然隔了一个月,老板说页面某一块的区域,我要加点内容,或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白,肯定是去每个地方加内容,改图片,然后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是肯定的。

看一个效果:

html效果:

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

</div> <div class="father2"></div>

css样式:

*{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/

            /*出现这种问题,我们要清除浮动带来影响*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果发现:如果不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时.father2的盒子就会跑到第一个位置上,影响页面布局。

那么我们知道,浮动元素确实能实现我们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!所以我们要清除浮动

还好还好。我们有多种清除浮动的方法,在这里给大家介绍四种: