导航栏样式,盒子模型

1.代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            height: 30px;
            list-style: none;
            display: inline-block;
            text-shadow: 5px 5px 5px gray;
            color: white;
            font-size: 20px;
            font-weight: 800;
            padding: 10px;

        }
        div{
            width: 100%;
            height: 50px;
            background-color: rgb(27, 12, 59);
            border-radius: 20px;
            text-align: center;
            box-shadow: 10px 10px 10px gray;
        }
        li:hover{
            background-color: red;
        }

    </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>

2.运行结果

盒子模型

我这里将2个div看作2个盒子,一个大的盒子中有另一个小盒子

其中每个盒子都有自己的属性,分别为:

margin 外边距

border边框

padding内边距

content实际内容

此时我设置了margin:100px;

小盒子的上左方向的边距为100px

我就想,如果把大盒子的内边距设为100px,效果会不会一样

此时我设置大盒子的内边距为100px

padding:100px;

可以看到,除开100X100px的边距外,内容框依然为500X500,相当于占了600X600的像素

所以设置内边距会撑开整个盒子

我创建了一个盒子3,设置了30的外边距,发现他与盒子2的30外边距相重合

所以padding会和盒子内的margin相加

盒子内多个margin会相互重叠

padding会基于盒子的边框,在里面撑大盒子

margin在边框外扩大盒子

设置样式时要注意大小,仔细计算

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法