第二次作业

寒..

于 2024-07-17 16:57:08 发布

阅读量650

点赞数 6

文章标签： css css3 html

本文链接：https://blog.csdn.net/abrspo/article/details/140463960

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业二</title>
    <style>
        li{
            list-style:none;
            display: inline-block;
            color: white;
            text-shadow: 10px 20px 10px black;
        }
        .box{
            width: 900px;
            background-color: black;
            border-radius: 25%;
            box-shadow: 50px 20px 10px gray;
        }
        .box1{
            width: 500px;
            background-color: black;
            margin: auto;
        }
        a:active{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
    <div class="box1">
    <a href=""><li>首页</li></a>
    <a href=""><li>新闻</li></a>
    <a href=""><li>体育</li></a>
    <a href=""><li>健康</li></a>
    <a href=""><li>生活</li></a>
    <a href=""><li>学习</li></a>
    <a href=""><li>美食</li></a>
    <a href=""><li>游戏</li></a>
    <a href=""><li>关于</li></a>
    </div>
    </div>
</body>
</html>

CSS盒子模型是网页设计中一个基础且核心的概念，它描述了HTML元素如何被呈现并在页面上进行布局。在CSS中，每个HTML元素都可以被视为一个矩形的盒子，这个盒子包括以下几个部分：

内容区域（Content）：这是盒子的中心区域，用于显示文本、图片等元素的内容。内容区域的大小可以通过width和height属性来设置。
内边距（Padding）：内边距是内容区域和边框之间的空间。它可以通过padding属性来设置，并且可以分别设置上、右、下、左四个方向的内边距。
边框（Border）：边框围绕着内边距和内容，它定义了盒子的边界。边框的样式、宽度和颜色可以通过border相关的属性来设置。
外边距（Margin）：外边距是盒子与其它元素之间的空间。它可以通过margin属性来设置，同样可以分别设置上、右、下、左四个方向的外边距。

盒子模型有两种类型：

标准盒子模型（content-box）：在这个模型中，width和height属性仅应用于内容区域，不包括内边距和边框。
怪异盒子模型（border-box）：在这个模型中，width和height属性应用于内容区域、内边距和边框的总和。

理解CSS盒子模型对于进行有效的网页布局和设计至关重要，因为它决定了元素的大小、位置以及它们之间的空间关系。

内容：内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

边框：边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果。

内边距（Padding）是CSS盒子模型中的一个重要概念，它指的是元素内容区域与元素边框之间的空间。内边距可以增加元素内部的空白区域，从而提高内容的可读性或美观性。

外边距（Margin）是CSS盒子模型的一个关键特性，它指的是元素边框与元素周围其他元素之间的空间。外边距可以用来控制元素之间的距离，影响布局的总体结构和外观。外边距会影响元素在页面上的位置，但不影响元素的实际尺寸。外边距可以为负值，这会导致元素重叠。

寒..

关注

6
点赞
踩
10

收藏

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

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。
复制链接

扫一扫