标签：BFC 元素 轮播 float 规范 width 200px left
轮播图
作用：主要用于产品的展示或公司相关的宣传；
组成：1、轮播的组图（至少两张）
2、控制器
3、计数器
cursor: pointer; 将图标设为手型
定位
1、postion:设定元素在文档中的内容；会自动转化为块级标签；
2、a、static:静态定位；（默认，不能设置left/top/right/bottom）占用文档流
b、relative:相对定位 ；占用文档流，可以设置偏移；相对自己原本的位置
c、absolute:相对定位；脱离文档流，相对于body做偏移；与相对定位结合使用，就会相对于relative做偏移，设定父类的元素上 (注意容易考)
d、fixed:绝对定位；脱离文档流，相对于浏览器（0,0）偏移，与relative无关。用于开发中的固定导航栏。
3、z-index：仅能在定位元素上发挥作用；（postion;absolute）
默认为0 ，对于static和retive无效；
4、开发策略：先整体，后局部，自顶向下，逐步细化；
a、双飞翼布局：由三列组成，两端固定，中间自适应；兼容性好，最主要的部分可以优先加载；
.left{
width: 300px;
background-color: slateblue;
margin-left: -100%; //注意是-100%,使它没有大小，挤上去
}
.right{
width: 300px;
background-color:goldenrod;
margin-left: -300px; //同理
}
b、圣杯布局：由三列组成，两端固定，中间自适应，外观与双飞翼一样
c、侧边栏布局：两栏或者三栏
左侧固定，右侧自适应：
.contrain{
width: 100%;
overflow: hidden;
position: absolute;
}
.left{
width: 200px;
height:200px;
float: left;
background-color: aqua;
margin-right: -200px;
position: relative;
}
.right{
float: left;
width: 100%;
height: 200px;
margin-left: 200px;
background-color: pink;
}
三栏布局：
.center{
float: left; //虽然中间自适应，也要float;
width: 100%;
height: 200px;
background-color: slateblue;
}
BFC规范以及IFC规范
FC：Fammting context(格式上下文)。
一、BFC：块级格式上下文：
条件：浮动元素（float）、定位元素（postion(absolute/fixed)）、display(inline-block/table-cell/table-caption)、overflow(hidden\auto\scroll)
t特性：1、内部的盒子会在垂直方向上接一个的放置；
2、垂直方向的距离有margain最大值决定；
3、BFC区域不会与float元素区域重叠
4、计算BFC高度，也会计算浮动元素；
5、BFC是独立的容器，里面的子元素不会影响到外面的元素；
二、IFC行级格式：
font-size/line-height/height/vertical-aligin
规则：a、元素会在一行上从左到右；
b、在一行上所以的元素在该区域形成一个行框
c、行宽的高度包含框的高度，高度行框元素中最高的；
d、浮动的元素不会在行框中，并且浮动元素会压缩行宽的宽度
E、宽度容纳不下子元素时，就会换行，并产生新的行框；
F、行框的元素内遵循text-align和vertical-align
标签：BFC,元素,轮播,float,规范,width,200px,left 来源： https://www.cnblogs.com/LiangQiong/p/15314514.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。