一.导航栏样式
<!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>
.d1{
width:800px;
height: 40px;
background-color: grey;
border-radius: 8%;
box-shadow: 10px 10px 10px gray;
}
div{
display: inline-block;
color: white;
text-align: center;
font-size: 25px;
}
.d2{
background-color:brown;
}
</style>
</head>
<body>
<div class="d1">
<div>电影1</div>
<div class="d2">电影2</div>
<div>电影3</div>
<div>电影4</div>
<div>电影5</div>
<div>电影6</div>
</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.具体属性：
在CSS中，content、padding、border和margin都有各自的属性来控制元素的样式和布局。以下是这些属性的详细列表：
内容（Content）
width: 设置元素内容区域的宽度。
height: 设置元素内容区域的高度。
min-width: 设置元素内容区域的最小宽度。
min-height: 设置元素内容区域的最小高度。
max-width: 设置元素内容区域的最大宽度。
max-height: 设置元素内容区域的最大高度。
内边距（Padding）
padding: 简写属性，用于同时设置四个方向的内边距。
padding-top: 设置元素顶部内边距。
padding-right: 设置元素右侧内边距。
padding-bottom: 设置元素底部内边距。
padding-left: 设置元素左侧内边距。
边框（Border）
边框宽度
border-width: 简写属性，用于设置四个边框的宽度。
border-top-width: 设置顶部边框的宽度。
border-right-width: 设置右侧边框的宽度。
border-bottom-width: 设置底部边框的宽度。
border-left-width: 设置左侧边框的宽度。
边框样式
border-style: 简写属性，用于设置四个边框的样式。
border-top-style: 设置顶部边框的样式。
border-right-style: 设置右侧边框的样式。
border-bottom-style: 设置底部边框的样式。
border-left-style: 设置左侧边框的样式。
边框颜色
border-color: 简写属性，用于设置四个边框的颜色。
border-top-color: 设置顶部边框的颜色。
border-right-color: 设置右侧边框的颜色。
border-bottom-color: 设置底部边框的颜色。
border-left-color: 设置左侧边框的颜色。
单个边框属性
border: 简写属性，用于同时设置边框的宽度、样式和颜色。
border-top: 简写属性，用于同时设置顶部边框的宽度、样式和颜色。
border-right: 简写属性，用于同时设置右侧边框的宽度、样式和颜色。
border-bottom: 简写属性，用于同时设置底部边框的宽度、样式和颜色。
border-left: 简写属性，用于同时设置左侧边框的宽度、样式和颜色。
外边距（Margin）
margin: 简写属性，用于同时设置四个方向的外边距。
margin-top: 设置元素顶部外边距。
margin-right: 设置元素右侧外边距。
margin-bottom: 设置元素底部外边距。
margin-left: 设置元素左侧外边距
3. CSS盒模型的应用:
CSS盒模型是构建网页布局的基石，通过合理使用盒模型，我们可以创建出复杂且响应式的布局。
4. CSS盒模型的实践技巧：
使用margin的auto值(margin:auto;)可以实现水平居中布局。
*{margin:0px}可消去元素与导航栏的间距
3415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
