五、浮动布局

最新推荐文章于 2022-07-20 12:27:04 发布

戴代_

最新推荐文章于 2022-07-20 12:27:04 发布

阅读量208

点赞数 1

分类专栏：前端笔记文章标签： html

本文链接：https://blog.csdn.net/m0_49879527/article/details/108213071

版权

前端笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、元素的种类

1.特点

h1标签可以设置宽高，可以设置所有外边距，独立成行。
img标签可以设置宽高，可以设置外边距，不独立成行。
a标签不可以设置宽高，不可以设置上下外边距，不独立成行。

2.分类

html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述：

块元素：可以设置宽高，可以设置所有外边距，独立成行。块元素：h*、div、ul、li、p、form
行内块元素（内联块元素）：可以设置宽高，可以设置外边距，不独立成行。行内块元素（内联块元素）：img、input
行内元素（内联元素）：不可以设置宽高，不可以设置上下外边距，不独立成行。行内元素（内联元素）：a、span

3.类型的转换

通过display属性，可以将元素的类型转换成其他类型，例如如下的css样式；
代码如下（示例）：

a{
    display:block;
    /* display:none;隐藏元素 */
}

就可以将a标签转换成块元素，然后就可以对其指定宽度和高度了，这样我们就可以实现一个有宽度和高度的链接元素了。

二、浮动布局

1.float的属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #f00;
            float:left;
        }
        .box2{
            width:200px;
            height:200px;
            background-color: #0f0;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

float属性可以让块元素与其他元素在同一行显示，我们将两个div元素都设置float:left;属性，这样两个div就可以在同一行显示了。

通过float属性也可以将一个行内元素或者块元素设置为右对齐
代码如下（示例）：

<h2>教学文档 <a class="more" href="">查看更多</a></h2>
h2{
    border:1px solid #00f;
    width:500px;
    height:36px;
}
.more{
    color:#aaaaaa;
    font-size: 12px;
    float: right;
    /* 设置浮动的a标签可以设置上边距 */
    margin-top:10px;
}

2.空div清除浮动

我们在菜单和h2之间添加一个空的div标签，并且为其制定样式。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clear{
            clear:both;
        }
        .box1{
            width:200px;
            height:200px;
            background-color: #f00;
            float:left;
        }
        .box2{
            width:200px;
            height:200px;
            background-color: #0f0;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clear"></div>
    <h2>浮动元素之下的元素</h2>
</body>
</html>

通过为空div指定clear:both属性，可以清除其上方菜单浮动导致的页面不良影响，使浮动元素后面的内容可以按正常的文档流布局，这样我们就可以看到h2标签成功的在菜单的下方显示了。

3.伪元素清除浮动

在上面的案例中，我们使用了一个空的div来清除浮动，很方便地解决了清除浮动的问题，但是html标签毕竟是为了布局而存在的，我们随意添加一个标签来处理样式，从html存在的意义来考虑，这个解决方案并不是特别理想，所以我们接下来的这个方案可以完全在css的层面解决清除浮动的问题，代码如下所示。
代码如下（示例）：

<div class="nav clear">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<h2>浮动元素之下的元素</h2>
.clear::before,.clear::after{
    content:"";
    display: block;  /*将伪元素增加的内容设置成块元素*/
    clear:both;
}

戴代_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、浮动布局

目录一、元素的种类1.特点2.分类3.类型的转换二、浮动布局1.float的属性2.空div清除浮动3.伪元素清除浮动一、元素的种类1.特点h1标签可以设置宽高，可以设置所有外边距，独立成行。img标签可以设置宽高，可以设置外边距，不独立成行。a标签不可以设置宽高，不可以设置上下外边距，不独立成行。2.分类html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述：块元素：可以设置宽高，可以设置所有外边距，独立成行。块元素：h*、div、ul、li、p、form行内
复制链接

扫一扫