导航栏＋css盒子

最新推荐文章于 2024-09-09 11:03:57 发布

四宫辉夜.

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量205

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_80646144/article/details/140704466

版权

导航栏

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        *{
        margin: 0px;
        }
        div{
            width: 650px;
            height: 30px;
            background-color: rgba(10, 15, 43, 0.878);
            border-radius:10%;
            text-align: center;
            margin: auto;
        }
        li{
            list-style:none;
            display:inline-block;
            color: aliceblue;
            box-shadow:10px 10px 15px gray;
        }
        .box:hover{
        background-color:red ;
    }
 
    </style>
</head>
<body>
    <div >
        <li class="box">游戏1</li>
        <li class="box">游戏2</li>
        <li class="box">游戏3</li>
        <li class="box">游戏4</li>
        <li class="box">游戏5</li>
        <li class="box">游戏6</li>
        <li class="box">游戏7</li>
        <li class="box">游戏8</li>
        <li class="box">游戏9</li>
    </div>
 
<body>
</html>

运行截图：

css盒子

CSS盒子模型（Box Model）是CSS布局的基础概念。它规定了网页中元素如何分配空间以及如何相互交互。在CSS中，所有的元素都可以看作是一个个的“盒子”，这个模型描述了这些盒子是如何被渲染的，以及它们之间是如何相互作用的。

CSS盒子模型主要包括以下几个部分：

内容（Content）：盒子的内容区域，包括文本、图片等元素。
内边距（Padding）：内容周围的空白区域，内边距位于内容和边框之间。
边框（Border）：围绕在内边距和内容外的边框，可以有不同的样式、宽度和颜色。
外边距（Margin）：边框外的空白区域，用来分隔不同的盒子，即元素之间的距离。

盒子模型有两种：标准盒子模型和IE盒子模型（在较老的IE版本中存在）。

在标准盒子模型中，元素的宽度（width）和高度（height）只包括内容（content）的宽度和高度，不包括内边距（padding）和边框（border）。
在IE盒子模型中，元素的宽度和高度包括了内容、内边距和边框，这是通过设置box-sizing: border-box;实现的，而这个特性现在被现代浏览器广泛支持，并且经常在实际开发中使用，因为它可以让盒子的大小更容易预测。

理解CSS盒子模型对于进行有效的网页布局和设计是非常重要的。通过精确控制这些盒子的属性，开发者可以创建出复杂且美观的页面布局。

四宫辉夜.

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
导航栏＋css盒子

在CSS中，所有的元素都可以看作是一个个的“盒子”，这个模型描述了这些盒子是如何被渲染的，以及它们之间是如何相互作用的。中，元素的宽度（width）和高度（height）只包括内容（content）的宽度和高度，不包括内边距（padding）和边框（border）。理解CSS盒子模型对于进行有效的网页布局和设计是非常重要的。实现的，而这个特性现在被现代浏览器广泛支持，并且经常在实际开发中使用，因为它可以让盒子的大小更容易预测。盒子模型有两种：标准盒子模型和IE盒子模型（在较老的IE版本中存在）。
复制链接

扫一扫