盒子模型
CSS 盒模型是 Web 设计中解释文档布局的基本概念之一。在 CSS 中，每个元素被视为一个矩形的 " 盒子 " ，该盒子包含内容、填充、边框和外边距四个部分。网页里所有元素都是一个一个盒子，并且都占据着一定的网页空间。页面就是由很多这样的盒子组成，这些盒子之间还会互相影响。
盒模型的组成
内容 (Content): 盒子中实际包含的内容，比如文本、图片等。
内边距 (Padding): 内容周围的透明区域，内边距位于内容区域和边框之间。可以使用 padding 属性来设置。
边框 (Border): 内容和内边距外部的边框，边框会围绕内容和内边距绘制。可以使用 border 属性来设置。
外边距 (Margin): 盒子与相邻元素之间的距离，外边距位于边框外部。可以使用 margin 属性来设置。
内边距
padding 属性用于设置内边距。是指边框与内容之间的距离
分为四个方向的内边距 ;padding-top, padding-right, padding-bottom,padding-left
外边距
marign 属性用于设置外边距，是指盒子与盒子之间的距离。
分为四个方向的内边距： marign-top,marign-bottom,marign-right,marign-left
这些部分共同决定了元素的总宽度和高度。通过调整这些属性的值，可以控制元素在页面布局中的位置、间距和尺寸。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: aqua;
}
li {
display: inline-block;
border: 1px solid red;
margin-left: 50px;
padding: 5px 10px;
}
</style>
</head>
<body>
<ul>
<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>
</ul>
</body>
</html>
扫一扫
3493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
