浮动的特点、导航栏练习

最新推荐文章于 2022-08-11 22:00:47 发布

图图马

最新推荐文章于 2022-08-11 22:00:47 发布

阅读量145

点赞数

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

本文链接：https://blog.csdn.net/Natural_mengniu/article/details/118379051

版权

笔记专栏收录该内容

11 篇文章 3 订阅

订阅专栏

文章目录

浮动的简介
- 浮动的特点
- 浮动的其他特点、脱离文档流的特点

浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置元素的浮动
– 可选值：
– none 默认值，无浮动
– left 元素向左浮动
– right 元素向右浮动

注意：

元素设置浮动之后，水平布局的等式便不需要强制成立（即块元素没有了右外边距）
元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的其他存在于文档流中的元素会自动上移。

浮动的特点

浮动元素会完全脱离文档，不再占据文档流中的位置
设置浮动以后元素会向父元素的左侧或右侧移动
浮动元素默认不会从父元素中溢出
浮动元素向左或向右移动，不会超过它之前的其他元素
如果浮动元素的上一个元素是没有移动的块元素，则浮动元素无法上移
浮动元素不会超过它上一个的浮动的兄弟元素，最多与之相等
总结： 浮动目前的主要作用时让页面元素的可以水平排列，通过浮动可以制作一些水平方向的布局。

浮动的其他特点、脱离文档流的特点

浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围
可以利用浮动来设置文字环绕图片的效果

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会改变：
脱离文档流的特点：
块元素：
1、块元素不会独占页面的一行
2、脱离文档流后，块元素的宽度和高度默认都被内容撑开

行内元素：
1、行内元素脱离文档流后会变成块元素，特点和脱离文档流的块元素一样

练习：
导航栏

<head>
    <meta charset="UTF-8">
    <title>导航条练习</title>

    <link rel="stylesheet" href="./css/reset.css">

    <style>
        a {
            /* 将 a 转换为块元素，即可设置宽高 ，自动填满 li 的宽高 */
            display: block; 
            text-decoration: none;
            font-size: 18px;
            color: #777777;
            /* 将 a 中的文字居中 */
            padding: 0 39.85px;

        }

        li a:hover {
            background-color: #3f3f3f;
            color: #e8e7e3;
        }

        .nav {
            width: 1210px;
            height: 48px;
            margin: 50px 0 0 12px;
        }
        .menu{
            width: 1210px;
            height: 48px;
            background-color: #e8e7e3;
        }

        li {
            /* 使 li 占满整个 div */
            line-height: 48px;
            float: left;
        }
    </style>
</head>

<body>

    <div class="nav">
        <ul class="menu">
            <li id="h">
                <a href="javascrippt:;">HTML/CSS</a>
            </li>
            <li id="b">
                <a href="javascrippt:;">Browser Side</a>
            </li>
            <li id="s">
                <a href="javascrippt:;">Sever Side</a>
            </li>
            <li id="p">
                <a href="javascrippt:;">Programming</a>
            </li>
            <li id="x">
                <a href="javascrippt:;">XML</a>
            </li>
            <li id="w">
                <a href="javascrippt:;">Web Building</a>
            </li>
            <li id="r">
                <a href="javascrippt:;">Reference</a>
            </li>
        </ul>
    </div>
</body>

效果展示：
在这里插入图片描述

图图马

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浮动的特点、导航栏练习

文章目录浮动的简介浮动的特点浮动的其他特点、脱离文档流的特点浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置元素的浮动– 可选值：– none 默认值，无浮动– left 元素向左浮动– right 元素向右浮动注意：元素设置浮动之后，水平布局的等式便不需要强制成立（即块元素没有了右外边距）元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的其他存在于文档流中的元素会自动上移。浮动的特点浮动元素会完全脱离文档，不
复制链接

扫一扫