CSS属性：定位属性+案例讲解：博雅互动前端开发入门笔记（五）

CSS中的定位属性用于指定HTML元素在文档中的位置。常用的定位属性有以下几种：

position：用于定义元素的定位方式。
- static（默认值）：元素遵循正常的文档流，不进行特殊的定位。
- relative：相对定位，通过设置top、bottom、left、right等属性相对于元素在正常文档流中的位置进行偏移。
- absolute：绝对定位，相对于最近的具有定位属性（relative、absolute、fixed、sticky）的父元素进行定位。
- fixed：固定定位，相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。
- sticky：粘性定位，在滚动过程中表现为相对定位和固定定位的混合。当页面滚动到指定位置时，元素将固定在该位置。
top、bottom、left、right：与定位属性配合使用，用于指定元素相对于其定位父元素的偏移距离。可以使用像素(px)、百分比(%)或其他单位进行指定。
z-index：用于控制元素在重叠文档流中的层叠顺序。值越大，元素越靠前显示。

这些定位属性可以结合使用，以实现更灵活的布局效果。需要注意的是，定位属性会改变元素的定位方式，可能影响到其他元素的布局。因此，在使用定位属性时要谨慎，并合理考虑页面结构和布局需求。

当涉及到定位属性时，还有一些其他的CSS属性可以与之配合使用，以进一步控制元素的位置和行为。

display：用于定义元素的显示类型。
- block：块级元素，独占一行，默认宽度为其父元素的100%。
- inline：内联元素，不会独占一行，宽度由内容决定。
- inline-block：内联块级元素，不会独占一行，宽度由内容决定，但可以设置宽度、高度和margin等属性。
- none：隐藏元素，元素不在文档中占据空间。
float：用于将元素浮动到其容器的左侧或右侧。
- left：元素向左浮动，后续元素会环绕在其右侧。
- right：元素向右浮动，后续元素会环绕在其左侧。
- none（默认值）：元素不浮动。
clear：用于控制元素在浮动元素旁边的行为。
- left：不允许左侧有浮动元素。
- right：不允许右侧有浮动元素。
- both：不允许左右两侧有浮动元素。
- none（默认值）：允许出现浮动元素。
overflow：用于定义当内容溢出元素框时如何处理溢出部分。
- visible（默认值）：内容不会被裁剪，可能会显示在元素框外。
- hidden：内容被裁剪，超出元素框的部分将被隐藏。
- scroll：显示滚动条，以便查看超出元素框的内容。
- auto：根据内容是否超出元素框来决定是否显示滚动条。

https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/09-CSS%E6%A1%88%E4%BE%8B%E8%AE%B2%E8%A7%A3%EF%BC%9A%E5%8D%9A%E9%9B%85%E4%BA%92%E5%8A%A8.html#%E5%89%8D%E8%A8%80

这些属性可以与定位属性结合使用，以实现更多样化的布局效果。通过合理利用这些属性，可以灵活地控制元素在页面中的位置和行为。

当涉及到定位属性时，还有一些其他的CSS属性可以进一步增强元素的布局和样式：

width、height：用于设置元素的宽度和高度。可以使用像素(px)、百分比(%)或其他单位进行指定。
margin：用于设置元素的外边距，控制元素与周围元素之间的空间。可以设置上下左右四个方向的外边距值，也可以通过缩写方式同时设置四个方向的外边距。
padding：用于设置元素的内边距，控制元素内容与边框之间的空间。同样可以设置上下左右四个方向的内边距值，也可以通过缩写方式同时设置四个方向的内边距。
border：用于设置元素的边框样式。可以设置边框的宽度、样式和颜色。
background：用于设置元素的背景样式。可以设置背景颜色、图片、重复方式等。
transform：用于对元素进行变换，如旋转、缩放、平移等效果。
transition：用于设置元素的过渡效果，可以使元素从一个状态平滑地过渡到另一个状态。可以控制过渡的属性、持续时间、延迟时间等。

这些属性可以与定位属性相互配合使用，通过调整元素的大小、外边距、内边距、边框样式和背景样式，以及应用变换和过渡效果，可以创建出各种独特的布局和视觉效果。请根据具体需求选择合适的属性来达到预期的效果。

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位

当涉及到CSS的定位属性时，这里有更详细的说明：

绝对定位（position: absolute）：
- 使用绝对定位的元素会完全脱离文档流，不会对其他元素造成影响。
- 可以通过设置top、bottom、left、right属性来指定元素相对于其最近的已定位父元素的偏移量。也可以使用负值来偏移元素的位置。
- 如果没有已定位的父元素，绝对定位元素将相对于文档的根元素进行定位。
- 绝对定位常用于创建重叠布局、悬浮导航栏、弹出式菜单等效果。
相对定位（position: relative）：
- 相对定位的元素仍然占据原来的空间，并在正常文档流中保持位置。
- 通过设置top、bottom、left、right属性来指定元素相对于自身在正常文档流中的位置进行偏移。
- 相对定位的元素对其他元素的布局会产生影响，其他元素仍然会根据相对定位元素在正常文档流中的位置进行布局。
- 相对定位常用于微调元素的位置、创建动画效果等。
固定定位（position: fixed）：
- 固定定位的元素会相对于浏览器窗口进行定位，始终保持在同一个位置。
- 通过设置top、bottom、left、right属性来指定元素相对于浏览器窗口的偏移量。
- 固定定位的元素不会随页面滚动而移动，适用于创建固定的导航栏、悬浮工具条等效果。
- 在移动设备上，固定定位的元素常用于创建页头、页脚或菜单。

除了定位属性外，还可以使用z-index属性来控制元素的堆叠顺序。z-index值较大的元素将覆盖在其他元素之上。这在处理重叠元素时非常有用。

值得一提的是，使用定位属性时，需要慎重考虑其对文档流和其他元素的影响，以确保布局和视觉效果的一致性和可靠性。

另外，需要注意以下几点：

在使用定位属性时，最好使用比较精确的像素值来定位元素，而不是使用百分比等相对值。否则可能出现不同浏览器、不同设备上元素显示不一致的情况。
对于绝对定位和固定定位的元素，如果没有设置宽度和高度，那么它们的大小将自动调整为包含内容的大小。因此，如果需要为这些元素设置特定的尺寸，需要为它们设置显式的宽度和高度。
对于相对定位的元素，如果没有设置偏移量，则在正常文档流中保持不动。
在使用定位属性时，要记得考虑浏览器窗口大小、滚动条位置等因素的影响，以确保页面布局的稳定性和可靠性。
最后，使用定位属性时应该尽量避免滥用，以免造成代码的复杂性和难以维护性。

导航栏的制作

在此我们只讲基础知识的使用，不涉及浏览器的优化。

class==header这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为class=inner_c，c指的是center。

class=inner_c不需要给高，因为它可以被内容撑高。

现在我们需要在class=inner_c里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。

接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。

我们最好把「加入我们」这个超链接放到div里，然后设置div的margin和padding，而不是直接设置的边距。

我们起个名字叫class=jrwm是没有问题的，这在工作当中很常见，如果写成class=join_us反倒很别扭。

暂时我们的做法是：

（1）给class=jrwm_box这个div里放一个class=jrwm的div。class=jrwm用来放绿色的背景图片。
（2）在class=jrwm里放一个超链接，并将超链接转为块级元素。
最终，导航栏的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}body{font-size: 14px;font-family: "Microsoft YaHei","SimSun";height: 8888px;}.header{height: 58px;background-color: #191D3A;}/*版心*/.inner_c{width: 1000px;margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/}/*导航条的logo*/.header .logo{float: left;margin-right: 40px;}.header .nav{float: left;}.header .nav ul{list-style: none; /*去掉列表前面的圆点*/}.header .nav ul li{float: left;width: 100px;line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/border-left: 1px solid #252947; /*每个li之间有间隔线*/}.header .nav ul li.last{border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/}.header .nav ul li a{display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/height: 58px;text-decoration: none; /*去掉超链的下划线*/color:#818496;text-align: center;  /*让这个div内部的文本居中*/}.header .nav ul li a.current{color:white;background: #252947;}.header .nav ul li a:hover{color: white;background: #252947;}.header .jrwm_box{float: left;height: 58px;width: 100px;padding-left: 48px;padding-top: 12px;}/*放背景图片的div*/.header .jrwm_box .jrwm{height: 34px;background-image: url(images/jrwm.png);background-repeat: no-repeat;text-align: center; /*让这个div内部的超链接居中*/}.header .jrwm_box .jrwm a{display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/text-decoration: none; /*去掉超链的下划线*/color: white;}</style>
</head>
<body><div class="header"><div class="inner_c"><div class="logo"><img src="images/logo.png " alt=""></div><div class="nav"><ul><li><a href="#" class="current">首页</a></li><li><a href="#">博雅游戏</a></li><li><a href="#">博雅新闻</a></li><li><a href="#">关于我们</a></li><li><a href="#">客服中心</a></li><li class="last"><a href="#">投资者关系</a></li></ul></div><div class="jrwm_box"><div class="jrwm"><a href="https://www.google.com/" target="_blank">加入我们</a></div></div></div></div>
</body>
</html>

banenr图

"banner图"通常指的是网页或应用程序界面上的横幅广告或标识，用于吸引用户的注意和传达信息。它通常位于网页的顶部或侧边，具有鲜明的设计和吸引人的视觉效果。banner图可以包含文字、图像、标志、产品展示等内容，用于宣传、推广或增强品牌形象。它在网页设计和数字营销中起到重要的作用，帮助吸引用户的眼球并引导他们进行进一步的操作。

因为涉及到 js 的内容，这里先不讲内容区域轮播图的效果。

我们首先在导航条和banner图之间加一道墙，即class=cl，然后采用隔墙法对其设置clear: both;的属性。

然后设置banner的背景图片属性，添加banner图。

内容区域的制作
导航栏+banner+内容区域的完整代码如下：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}/*清除浮动的影响*/.cl{clear: both;}body{font-size: 14px;font-family: "Microsoft YaHei","SimSun";height: 8888px;}.header{height: 58px;background-color: #191D3A;}/*版心*/.inner_c{width: 1000px;margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/}/*导航条的logo*/.header .logo{float: left;margin-right: 40px;}.header .nav{float: left;}.header .nav ul{list-style: none; /*去掉列表前面的圆点*/}.header .nav ul li{float: left;width: 100px;line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/border-left: 1px solid #252947; /*每个li之间有间隔线*/}.header .nav ul li.last{border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/}.header .nav ul li a{display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/height: 58px;text-decoration: none; /*去掉超链的下划线*/color:#818496;text-align: center;  /*让这个div内部的文本居中*/}.header .nav ul li a.current{color:white;background: #252947;}.header .nav ul li a:hover{color: white;background: #252947;}.header .jrwm_box{float: left;height: 58px;width: 100px;padding-left: 48px;padding-top: 12px;}/*放背景图片的div*/.header .jrwm_box .jrwm{height: 34px;background-image: url(images/jrwm.png);background-repeat: no-repeat;text-align: center; /*让这个div内部的超链接居中*/}.header .jrwm_box .jrwm a{display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/text-decoration: none; /*去掉超链的下划线*/color: white;}.banner{height: 465px;background: url(images/banner.jpg) no-repeat center top;}.content{padding-top: 50px;}.content .product{height: 229px;border-bottom: 1px solid #DBE1E7;}.content .product ul{list-style: none;}.content .product ul li{float: left;width: 218px;margin-right: 43px;}.content .product ul li.last{margin-right: 0;width: 217px;}.content .product ul li img{width: 218px;height: 130px;}.content .product ul li.last img{width: 217px;}.content .product ul li h3{text-align: center;line-height: 38px;font-size: 14px;font-weight: bold;}.content .product ul li p.djbf{text-align: center;line-height: 16px;}.content .product ul li p.djbf a{font-size: 12px;color:#38B774;text-decoration: none;background:url(images/sanjiaoxing.png) no-repeat right 5px;padding-right: 12px;}</style>
</head>
<body><div class="header"><div class="inner_c"><div class="logo"><img src="images/logo.png " alt=""></div><div class="nav"><ul><li><a href="#" class="current">首页</a></li><li><a href="#">博雅游戏</a></li><li><a href="#">博雅新闻</a></li><li><a href="#">关于我们</a></li><li><a href="#">客服中心</a></li><li class="last"><a href="#">投资者关系</a></li></ul></div><div class="jrwm_box"><div class="jrwm"><a href="https://www.google.com/" target="_blank">加入我们</a></div></div></div></div><!-- 在导航条和banner之间隔一堵墙 --><div class="cl"></div><div class="banner"></div><!-- 内容区域 --><div class="content inner_c"><div class="product"><ul><li><p><img src="images/pro1.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><img src="images/pro2.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><img src="images/pro3.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li class="last"><p><img src="images/pro4.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li></ul></div></div>
</body>
</html>