文章目录
前言
对于布局float与float总是运用的不够熟练,在学习响应式布局前,把这部分总结如下
一、float
布局两个div的盒子
<div class="box1"></div> //黑
<div class="box2"></div> //蓝
- 两个盒子都不添加浮动
-
两个盒子都添加左浮动
-
两个盒子都添加右浮动
-
box1添加左浮动,box2不添加浮动
-
box1不添加浮动,box2添加左浮动
第一个粉丝盒子浮动,第二个绿色盒子不浮动,第三个橙色盒子浮动
设置浮动的总结:
1 如果先进行标准流(把标准流下想象成一堵墙),后进行浮动,标准流不会被遮盖,不起作用(效果类似于不设置浮动)
2 如果先进行浮动,则先浮起,留出空位,标准流在底侧
3 如果两个都float则转化为一行排列
float常见布局
例一:
1 先布局出一个父盒子,里面在布局两个子盒子
2 两个子盒子应该与父盒子的高度相同,盒子一的宽度+ 盒子一的
margin-right: 10px + 盒子二 = 父盒子的长度
3 最后对盒子一与盒子二设置浮动
例二:
1 先布局出一个父盒子,父盒子里面装八个子盒子。
2 盒子1+ 盒子12345+盒子1234的margin-right = 父盒子的宽度
3 上盒子+下盒子+上盒子margin-bottom = 父盒子高度
4 最后对9个盒子都添加左浮动
盒子1设置
.box .smallbox1{
float: left;
height: 600px;
width: 300px;
background-color: blue;
margin-right: 10px;
}
盒子23456789设置
.box div{
float: left;
height: 290px;
width: 240px;
background-color: rgb(61, 148, 192);
margin-right:10px;
margin-bottom: 20px;
}
最后对59边距进行处理
.box .smallbox5,
.box .smallbox9{
margin-right: 0;
}
实际中的用途(独立案例之仿小米官网)
注意❗
1浮动布局一定要用父元素来约束,所有的浮动都是根据父元素来定位的
2 如果一个子元素浮动了那么其他的兄弟元素也要浮动就不会产生错乱
清除浮动
- 为什么要清除浮动?
由于父级盒子很多情况下,不方面给高度(元素过多或文章不需要对称),但是子盒子浮动又不占有位置使得父级盒子高度为0,就会影响下面的标准流盒子,所以引出了清除浮动的概念。
- 清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响,如果父盒子本身就有高度,则不需要清理浮动,清除浮动之后,父级会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
1. 额外标签法(隔墙法)
在浮动元素末尾添加一个额外标签清除浮动样式
<div style = ''clear:both'></div>
或者在css的样式中对最后一个子元素写clear : both
注意:要求这个新的空标签必须是块级元素
2. 父级添加overflow属性
可以给父元素添加overflow,将属性设置为hidden,auto或scroll
缺点是无法显示溢出的部分,会将溢出的部分切掉
3. 父级添加after伪元素
相当于额外标签的升级版 (可以使用class的多类名法)
理解为给子元素后面添加一堵墙
4.父级添加双为元素
理解为给子元素前后都添加一堵墙
二、position
为什么需要定位?当需要把元素固定到页面中时,标准流和浮动都无法快速实现,此时需要定位来实现
所以:
1. 浮动可以让多个块级盒子一行没有缝隙排列显示,常用于横向排列盒子
2 定位则是可以让盒子在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子
3 定位 = 定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式;
边偏移则决定了该元素的最终位置(right left top bottom)
静态定位
position:static;
- 静态定位按照标准流特性摆放位置,它没有边偏移
- 默认的定位方式,无定位的意思
相对定位
position:relative
- 移动的位置是相对于元素原来的位置进行移动的(不是相对于父元素,也不是相对于浏览器)
- 移动后,原来在标准流的位置继续占用(不脱标,继续保持原来的位置,它以前的位置任何元素都无法继续使用)
绝对定位
position:absolute;
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
当没有祖先元素时:left:0; bottom:0,盒子跑到了左下角 - 如果祖先元素有定位时 (相对,绝对,固定定位)则以最近一级的有定位的祖先元素为参考点移动位置(将子元素包含在父辈元素内)
- 绝对定位不再占用原来的位置
例一:
.father{
position: relative;
height: 200px;
width: 300px;
background-color: rgb(26, 25, 25);
}
.son{
position: absolute;
right: 0px;
bottom: 0;
height: 30px;
width: 40px;
background-color: rgb(49, 159, 218);
}
方法一:子绝父相(运用在父亲需要占用位置的时候)上图所示
方法二:自绝父绝(如果父元素不需要占用位置,子绝父绝也会用到)
案例:hot利用子绝父相
.father{
height: 270px;
width: 225px;
position: relative;
left: 200px;
}
.father .hot{
position: absolute;
right: -5px;
top: 5px;
}
固定定位
position:fixed
固定于浏览器可视区的位置(不管浏览器窗口是否放大缩小都按照规定的数据)
主要使用场景:浏览器页面滚动时元素的位置不会改变
特点如下
- 以浏览器的可视窗口为参照点移动元素
- 与父元素的定位没有关系
- 不随滚动条的滚动而滚动
- 不占用原来的位置
实例:固定到版心右侧
小算法:
1 让固定定位的盒子left:50%,走到浏览器可视区(也可以看作版心)的一半位置
2 然后让固定定位的盒子margin-left:版心宽度的一半距离
//版心规定如下
.box{
margin:0 auto;
}
实例二:粘性定位(京东左侧框)
position:sticky; 后添加top:10px; (可以固定到上面)
粘性定位的特点:
1 以浏览器的可视窗口为参照点移动元素(固定定位的特点)
2 粘性定位占用原先的位置(相对定位的特点)
3 必须添加top、left、right、bottom其中一个才有效
定位的叠放规则
Z-index:1 来控制定位叠放的次序
- 数值可以是正整数、负数或者是0,数值越大,盒子就越往上
- 如果属性值相同,默认都是auto,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才能有z-index属性
总结
如有问题还望指出