第二次作业css

最新推荐文章于 2024-07-13 11:50:40 发布

blockrock

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量305

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/blockrock/article/details/140249576

版权

一.导航栏样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        div{
            background-color: rgba(1, 3, 32, 0.822);
            text-align: center;
            width: 1000px;
            height: 20px;
            font-size: 15px;
            border-radius: 15px 15px 15px 15px;
            box-shadow: 10px 10px 3px gray;
            font-weight: 800;
            text-shadow: 10px 10px 18px rgba(246, 243, 243, 0.788);
            padding: 10px;
        }
         li{
            list-style: none;
            display: inline-block;
            color: aliceblue;
            margin: 1%;
            line-height: 0.1;
         }
    </style>
</head>
<body>
    <div>
        <li>游戏1</li>
        <li>游戏2</li>
        <li>游戏3</li>
        <li>游戏4</li>
        <li>游戏5</li>
        <li>游戏6</li>
        <li>游戏7</li>
        <li>游戏8</li>
        <li>游戏9</li>
    </div>
</body>
</html>

运行截图

二.关于css盒子模型

CSS盒子模型是CSS布局的基石，它描述了如何将文档中的每个元素呈现为一个矩形盒子，并定义了这些盒子如何相互堆叠和排列。每个HTML元素都被视为一个盒子，这些盒子可以通过CSS属性进行定制，以达到特定的布局效果。

1. 盒子模型的组成：

        内容（Content）：这是盒子的主体部分，包含了文本、图片等实际内容。内容的宽度和高度由width和height属性定义。
        内边距（Padding）：这是内容区域周围的空白区域，它不包含任何内容，但会增加盒子的总尺寸。内边距的宽度可以通过padding-top、padding-right、padding-bottom和padding-left属性单独设置。
边框（Border）：围绕内容和内边距的线条，它可以是实线、虚线、点线等，并且可以设置宽度和样式。边框的宽度可以通过border-width属性设置，样式可以通过border-style属性设置。
        外边距（Margin）：这是盒子与其他盒子之间的空白区域，它不包含任何内容，并且不会影响盒子的大小。外边距的宽度可以通过margin-top、margin-right、margin-bottom和margin-left属性单独设置。

2. 盒模型的计算：

元素的总宽度和总高度是由内容、内边距、边框和外边距共同决定的。在W3C的盒模型规范中，元素的总宽度和总高度包括内容、内边距、边框和外边距。而在IE的盒模型中（也称为传统盒模型），元素的总宽度和总高度只包括内容、内边距和边框，不包括外边距。
通过设置"box-sizing: border-box;"可以使元素的padding和border包含在设置的width和height之内，这使得盒模型的计算更加直观。

3. CSS盒模型的应用:

CSS盒模型是构建网页布局的基石，通过合理使用盒模型，我们可以创建出复杂且响应式的布局。

4. CSS盒模型的实践技巧：

使用margin的auto值(margin:auto;)可以实现水平居中布局。

*{margin:0px}可消去元素与导航栏的间距

blockrock

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
第二次作业css

在W3C的盒模型规范中，元素的总宽度和总高度包括内容、内边距、边框和外边距。而在IE的盒模型中（也称为传统盒模型），元素的总宽度和总高度只包括内容、内边距和边框，不包括外边距。CSS盒子模型是CSS布局的基石，它描述了如何将文档中的每个元素呈现为一个矩形盒子，并定义了这些盒子如何相互堆叠和排列。边框（Border）：围绕内容和内边距的线条，它可以是实线、虚线、点线等，并且可以设置宽度和样式。"可以使元素的padding和border包含在设置的width和height之内，这使得盒模型的计算更加直观。
复制链接

扫一扫