整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
【技术等级】初级
【承接文章】《CSS三个重要的定位属性，使用频率超高，定位属性详解》
上两篇文件主要讲解了定位属性的使用，本篇文章小海老师带领大家利用定位属性制作一个轮播图的前端界面。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
本文以动手实践为主，希望跟着学的同学们按照下面所讲的步骤一步一步的操作一下。前端开发注重实践操作，只要你按照小海老师所讲的步骤操作，一定能够掌握轮播图界面的制作方式。如果能抽出时间多做几次，熟能生巧，相信你会从中学习到在容器内部对元素进行定位的一类方法。
一、我们要做的轮播图界面展示：
轮播图案例界面展示
本案例旨在利用CSS的定位属性制作轮播图的界面，并不涉及轮播图的各项行为。轮播图的各项行为需要借助JavaScript脚本技术实现，在后续的内容中会逐步介绍。首先我们对这个案例进行一下简单的分析。
通过上图，我们可以总结出，整个案例需要一个总的容器，我们可以使用<div></div>实现，并为其设置一个名为lunbo的id属性取值。即：
<div id=”lunbo”></div>
在这个容器内部，有下列对象：
一张图片。（因为制作界面，所以展示只放置一张图片即可）
左右两侧各有两个箭头图标，用于鼠标单击产生轮播效果。
下方有一个黑色透明的部分。
黑色透明的部分内部有5个数字组成的矩形，用于鼠标单击时跳转到指定的图片。
二、轮播图界面布局的原理：
通过分析，我们发现，大部分内容都在#lunbo的<div>容器中。那么，如何在容器内部对各个元素进行位置的确定呢？这就需要使用CSS技术中的定位属性。
这里，有一个这类问题的处理方法，它的原理如下所示。
根据上述原理，我们很容易就能写出容器的CSS代码。
这里设图片的尺寸为800px*400px，则容器的CSS代码如下所示：
#lunbo{
width:800px; height:400px;
position:relative;
}
三、实现容器内部的HTML对象：
下面我们来实现容器内部的各个HTML对象。注意，本小节只实现各个HTML对象，不对各个对象进行CSS样式设计。
1、一张图片：
<img src=”images/01.jpg” />
2、左右两侧各有两个箭头图标：
左侧箭头利用小于号显示，小于号在HTML中使用 < 实现。放在一个容器中并设置class为small。
右侧箭头利用大于号显示，大于号在HTML中使用 > 显示。放在一个容器中并设置class为big。
<div><</div>
<div>></div>
3、下方有一个黑色透明的部分：
<div class="black"></div>
4、黑色透明的部分内部有5个数字组成的矩形：
五个数字分别用<span></span>标记对实现的，并安排在一个名为num的容器中，最后放在黑色透明容器内部。
<div class=”black”> <!--black容器开始-->
<div class="num"> <!--num容器开始-->
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> <!--num容器结束-->
</div> <!--black容器结束-->
整体的HTML代码如下所示。
轮播案例的HTML代码
四、左右两侧箭头图标的样式：
左右两侧的箭头设置宽度为40px，高度为60px，背景颜色位白色，并设置一定的透明度。字体为Arial，字体大小为50px，水平方向和垂直方向均居中对齐。文字颜色为#666666，鼠标经过时显示手型鼠标。
这些样式两个箭头都具备，所以使用群组选择器。
#lunbo .small,#lunbo .big{
width:40px; height:60px;
background-color:rgba(255,255,255,0.3);
font-family: Arial;
font-size: 50px;
text-align: center;
color:#666666;
cursor:pointer;
}
为了在容器#loubo中对这两个箭头定位，所以应该将这两个箭头设置为“绝对定位”，并分别设置位置属性。
因为两个箭头的高度位置相同，所以top属性取值一样。通过测试，选择top属性为175px。
左侧小于号箭头设置left属性为50px。
右侧大于号箭头设置right属性为50px。
#lunbo .small,#lunbo .big{position:absolute;top:175px;}
#lunbo .small{left:50px;}
#lunbo .big{right:50px;}
除此之外，还需要为这两个箭头设置鼠标经过时的背景颜色变化。
#lunbo .small:hover,
#lunbo .big:hover{
background-color: rgba(255,255,255,0.6);
}
综上所述，左右两侧箭头图标的CSS样式代码如下所示。
左右两侧箭头图标的CSS代码
五、黑色透明的部分的样式：
设置黑色透明的部分宽度为容器#lunbo的宽度，因此可以将宽度的取值设置为inherit，意思为宽度的大小继承该元素容器的大小。高度设置为40px，背景颜色为黑色并带有一定的透明度，利用定位将其设置在容器的底端。CSS代码如下所示。
#lunbo .black{
width:inherit; height:40px;
background-color: rgba(0,0,0,0.7);
position:absolute;
left:0; bottom:0;
}
六、黑色透明部分内部的数字：
做为数字的直接容器num，只需要设置位置属性，以保证这5个数字的位置在黑色透明部分的右侧。
#lunbo .num{
position:absolute;
right:10px;
bottom:8px;
}
容器num内部的span标记对用于盛放每一个数字。因为<span>标记对作为内联元素无法设置宽度和高度，所以将所有的<span>标记对变为内联块。设置它们的宽度为20px，高度为24px，背景颜色位为999999，水平垂直方向居中对齐，文字颜色为#ffffff，字号大小为14px，鼠标经过时变为手型鼠标。为了让它们之间具有一定的距离，可以设置每一个<span>的右边界为10px。
#lunbo .num span{
display:inline-block;
width:20px; height:24px;
background-color: #999999;
text-align: center;
line-height: 24px;
color:#ffffff;
font-size: 14px;
margin-right:10px;
cursor:pointer;
}
最后设置这些<span>标记对鼠标经过时背景颜色的变化。
#lunbo .num span:hover{
background-color: #ff5857;
}
综上所述，黑色透明部分内部的数字的CSS样式代码如下所示。
黑色透明部分内部的数字的CSS代码
七、结束：
最后请同学们将这些代码整理到一起，看看能不能实现。
仔细的同学们肯定能够发现，整个项目中，第一个数字的背景颜色和其它数字的背景颜色是不一样的，这是为了说明此时是第一张图片在显示。这是如何实现的呢？
<span style="background-color:#ff5857">1</span>
大家想一想，这段代码是不是就能够实现了呢！
下一篇文章中，小海老师继续带大家实现跟定位有关的实例，一同看一看定位属性都有哪些应用领域，对定位技术有疑问的学习者千万不要错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
. 流式定位
这是网页元素默认的定位方式，网页元素按照其HTML标签的先后顺序，在网页内依次显示，就像液体一样“流动”，所以称为“流式定位”，这种方式将所有网页元素的默认显示方式分为以下几种类型：
块级元素（display: block）： 可以设置宽度，默认宽度为100%，但不管多宽都会独占一行，多个块级元素按从上到下的顺序纵向显示，默认显示为块级元素的包括：段落(p)、层(div)、表单(form)等。
内联元素（display: inline）： 不会独占一行，可以多个元素共享一行，按从左至右的顺序横向显示，默认显示为内联元素的包括：文本标签(label)、链接(a)等。
行内块元素（display: inline-block）： 这种定位方式兼具块级元素和内联元素的优势，既可以像块级元素一样设置宽度和高度，又可以一行放置多个，默认显示为内联元素的包括：图片(img)、输入项(input)、多行文本(textarea)等。
可以通过设置HTML元素的CSS样式的display属性来改变元素默认的流式定位方式，例如将层(div)元素设置为行内块元素后，就可以跟文本标签(label)、图片(img)等元素放在同一行显示，不再独占一行。
流式定位存在一些问题，主要包括：
l 块级元素很难被有效利用起来，因为其独占一行的特性，不能一行显示多个。
l 内联元素无法设置宽度、高度和垂直方向边距，不好精确控制元素大小和显示位置。
l 内联元素之间水平方向会因为代码中的空格、换行等产生间隙，垂直方向存在默认的底部间隙，这给水平布局带来额外的麻烦。
2. 浮动定位
浮动定位会让元素脱离原来的标准文档流浮动起来，直至它的外边缘遇到父元素的内边缘或者另一个兄弟浮动元素的外边缘。
任何HTML元素都可以设置为浮动，可以通过设置HTML元素的CSS样式的float属性来设置具体的浮动方式，可以选择向左浮动（float: left）或向右浮动（float: right）。
相对于网页默认的流式定位，浮动定位有以下优势：
l 多个块级元素可以共享一行。
l 内联元素可以设置宽度和高度。
l 元素之间的空格、换行不影响元素的显示位置。
浮动定位最初被设计出来是为了实现文字环绕图片显示的效果，但由于其上述优势，后来大家也用浮动定位来设置更多网页元素的位置，代替默认的流式定位，也是TaskBuilder默认的组件定位方式。
不过，浮动定位也有一些问题，不是所有的场合都适合，大家根据需要选择，这些问题包括：
l 居中对齐问题：浮动定位不太好实现垂直和水平居中对齐。
l 父元素的高度塌陷问题：如果元素不浮动，会自动撑开父元素的高度，浮动后，由于浮动元素已经脱离原来的标准流，如果父元素没有设置高度，且父元素中没有其他非浮动元素时，会造成父元素的高度塌陷（高度变成了0）。
3. 坐标定位
坐标定位是指为HTML元素设置上下左右的偏移量来确定其具体的显示位置或大小，通过设置元素CSS的position属性，可以选择坐标定位的具体方式，包括：
相对定位（position: relative）：即相对于元素在流式定位时的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个CSS属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
相对定位示意图
绝对定位（position: absolute）：即相对于第一个非静态定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。元素使用绝对定位后，其他标准流元素会填补它的位置。绝对定位可以通过设置元素CSS样式的left和top属性来精确控制元素的显示位置，再设置right或bottom这两个CSS样式，实现元素的宽度或高度根据父元素的宽度和高度动态设置和变化。
绝对定位示意图
固定定位（position: fixed）：即相对于浏览器的窗口进行定位，可以使用 top、right、bottom、left 这 4 个CSS属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口，元素的位置都是固定不变的。
粘性定位（position: sticky）：它是相对定位和固定定位的结合体，能够实现类似吸附的效果，当滚动页面时它的效果与相对定位相同，当元素要滚动到屏幕之外时则会自动变成固定定位的效果。用粘性定位很容易实现元素置顶显示的效果。
4. 表格定位
顾名思义，表格定位就是用表格来实现网页内容的定位，先绘制一个多行多列的表格，并设定表格各列的宽度和各行的高度，然后在表格的单元格里插入相关网页元素，最终实现这些元素的位置定位。
这种定位方式比较适合可以将页面内容清晰明确地划分为多行多列的场景，例如各种业务单据和数据报表等。
有两种方式可以实现表格布局： HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。HTML Table是早期网页设计采用的表格定位方式，由于其渲染性能较低，且有些界面效果较难实现，用的人已经比较少了，现在推荐使用CSS Table，能实现一些HTML Table做不到的效果。
目前，TaskBuilder只是在报表设计器里集成了一个第三方的表格插件，在前端tfp页面设计器里，还没有提供表格定位相应的容器组件，未来会提供。（现有的可编辑表格和数据表格不是用来为其他组件提供定位的，所以不能算作是表格定位的容器组件）
5. 弹性定位
弹性定位又叫弹性布局，这种定位方式最大的特点就是可以让子元素的大小可以根据父元素的大小自动扩张或收缩，从而可以做到自动适应不同终端的屏幕尺寸，或者在用户改变浏览器窗口大小时自动伸缩。
这种定位方式需要先将一个父元素的CSS属性display设置为flex，然后该元素里的子元素即可实现弹性定位。
采用弹性定位的容器元素可以设置以下CSS样式：
元素排列方向（flex-direction）：用来设置子元素的排列方向，有四种方式可以选择：从左到右显示（row）、从右到左显示（row-reverse）、从上到下显示（column）、从下到上显示（column-reverse）。
元素水平对齐方式（justify-content）：用来设置子元素在水平方向的对齐方式，可以选左对齐（flex-start）、右对齐（flex-end）、居中对齐（center）、两端对齐（space-between）和等距对齐（space-around）。
元素垂直对齐方式（align-items）：用来设置子元素在垂直方向的对齐方式，可以选顶部对齐（flex-start）、底部对齐（flex-end）、居中对齐（center）、基线对齐（baseline）、自动伸展（stretch）。
内容整体对齐方式（align-content）：当有多行子元素时，可以用该属性设置全部子元素整体的垂直对齐方式，包括自动拉伸（stretch）、在容器的顶部排列（flex-start）、在容器的底部排列（flex-end）、在容器内居中排列（center）、均匀分布，上下靠边（space-between）、均匀分布，每行等距（space-around）。
元素是否自动换行（flex-wrap）：用来设置子元素是否自动换行。
弹性定位容器内的子元素可以设置以下CSS样式：
扩展量（flex-grow）：必须参数，用来设置当前元素相对于其他元素的增长量，默认值为 0，即如果存在剩余空间，也不自动放大。
如果所有元素的扩展量都设置为1，将等分剩余空间。如果一个元素的扩展量设置为2，其他元素都为1，则前者占据的剩余空间将是其他项的2倍，如下图所示：
收缩量（flex-shrink）：必须参数，用来设置当弹性容器空间不足时，该元素相对于其他元素的收缩量，默认值为 1。如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他元素都为1，则空间不足时，前者不缩小。
基准长度（flex-basis）：必须参数，元素的基准长度定义了父容器在分配多余空间之前，当前元素占据的主轴空间（main size，如果是横向排列，则指父容器在水平方向的空间，如果是纵向排列，则指父容器在垂直方向的空间）。浏览器根据这个属性，计算主轴是否有多余空间。合法值为 auto（默认值，表示根据其他情况自动伸缩），或者以具体的值加 "%"、"px"等单位的形式，表示该元素将占据固定空间。
显示顺序（order）：属性用来设置元素在容器中出现的顺序，您可以通过具体的数值来定义元素在容器中的位置，默认值为 0。下图所示的四个普通的面板组件，在弹性面板里从左至右的正常插入顺序是panel1、panel2、panel3、panel4，但通过设置这四个面板的显示顺序，将panel1和panel4的显示位置进行了调换。
对齐方式（align-self）：该属性允许您为某个特定的元素设置不同于其它元素的对齐方式，该属性可以覆盖父容器组件（弹性面板）里的垂直对齐属性的值。该属性的可选顶部对齐（flex-start）、底部对齐（flex-end）、居中对齐（center）、基线对齐（baseline）、自动伸展（stretch）。
由于弹性定位的自动伸缩特性，且易于实现子元素的水平和垂直对齐，目前很多主流的前端UI框架都大量地采用了该定位方式。
今天好程序员web前端教程为大家分享web中CSS绝对定位的教程
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative{
position:absolute;
left:30px;
top:20px;
}
如下图所示：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或HTML元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。
*请认真填写需求信息，我们会在24小时内与您取得联系。
