一个完整的网页必须要以下三种布局方式一起构成
**1.普通流(标准流、文档流)**
标签按照规定好默认方式排列,比如DIV它独占一行,行内元素从左右到依次排列,碰到父元素边缘则换行
**2.浮动**
可以让多个块级元素一行内排列显示
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
网页布局第二准则:先设置盒子大小,之后设置盒子的位置
注意
1.浮动元素会脱离标准流(脱标)(脱离标准流的盒子移动到指定的位置,且脱标的盒子不再保留原先的位置)
2.浮动的元素会一行内显示并且元素顶部对齐(浮动的元素是互相贴靠在一起且不会有缝隙,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
3.浮动的元素会具有行内块元素的特性(没有宽度,内容多宽撑多宽)
4.为了约束浮动元素位置,先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则(白话
意思就是用个div盒子把浮动元素框起来,让它们在盒子里浮动,不要整个页面乱跑)
5.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
6.浮动的元素不会压住下面标准流的文字,它只会压住盒子,但里面的文字还是会露出来的(原因是浮动最初设计出来,是为了做文字的环绕效果)
思考:为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度(比如淘宝的商品每天都在增加,我希望的是父级盒子被子盒子自行撑开,有多少商品就放多少商品)
但是子盒子浮动不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子,清除浮动的本质就是清除浮动元素造成的影响。清除浮动之后,
父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流。
解决策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
解决方案:
1.额外标签法也称为隔墙法,缺点是添加了无意义的标签,导致结构变差(不推荐)
在最后一个浮动的元素后,添加一个块级元素,并给这个标签写一个样式 { clear:both }
2.父级添加overflow,缺点是无法显示溢出的部分(这个单词本身的意思是溢出,它是针对溢出的属性,如果子元素有溢出一部分,它就直接给你砍了不显示)
给父元素添加overflow属性,将其属性值设置为hidden、auto、或scroll。
3.伪元素清除浮动,现在的淘宝,百度等都是用该方法清除浮动(它相当于在父元素里插入一个盒子,但它是不影响结构的)
给父元素增加一个样式 .clearfix:after {content:""; display:block; height:0; clear:both; visibility:hidden;}
4.双伪元素清除浮动,腾讯,小米用的是这种方法(它在父元素里的最前边和最后边都插入一个盒子,把路堵死)
给父元素增加一个样式 .clearfix:before,.clearfix:after {content:""; display:table;} .clearfix:after{clear:both;}
**3.定位**
为什么需要定位?
1.浮动可以让多个块级的盒子在一行没有缝隙的排列显示,经常用于横向排列盒子,但它和标准流一样,有难以实现的效果,
比如将某个盒子固定在页面中,不随 滚轮滚动而滚动。
2.定位则是可以让盒子自由的在某个盒子内移动位置,或者固定在屏幕中某个位置,并且可以压住其他盒子。
定位 = 定位模式 + 边偏移
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子(一样的利用上下左右距离来调整这个盒子最终的位置)
定位模式用于指定一个元素在文档中的定位方式。‘边偏移’则决定了该元素的最终位置
position:static(静态定位),relative(相对定位),absolute(绝对定位,压住别的盒子显示,比如某些按钮),fixed(固定定位,可以在页面某个位置固定显示)
relative:1.自恋型定位,它总相对于自身来移动,意思就是它总是以自己原先的坐标位置为参照,来移动。
2.相对定位移动的盒子,它原来的位置保留,后面其他的盒子仍然以标准流的方式对待它
absolute:1.拼爹型定位,它总是相对于它祖先元素来移动
2.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
注意:绝对定位盒子所参考的祖先元素也必须有定位,如果祖先元素没有position,它还是会参照浏览器为准,例如div>ul>li,如果ul没有定位
而div有定位,则参照div的位置
3.设置绝对定位后,盒子飘起来了不再占有原先的位置,后面的盒子按照标准流直接占有它原先的位置
4.绝对定位会压住下面标准流所有的内容(和浮动不同)
fixed:1.固定定位是元素固定于浏览器可视区的位置,它始终会在一个位置,不随页面滚动而消失
2.它以浏览器的“可视窗口”为参照点移动元素(可视窗口就是你浏览器body那一块区域,缩小浏览器,能看见的body区域也变小了)
3.不占有原先的位置
sticky:1.粘性定位,可被认为是相对定位和绝对定位的混合。
2.以浏览器的可视窗口为参照点移动元素(固定定位特点)
3.粘性定位占有原先的位置(相对定位特点)
4.粘性定位虽然非常灵活,但它的兼容性较差
边偏移?
边偏移就是定位的盒子移动到最终位置。有top,bottom,left,right四个属性,都是定义的那个元素相对于父元素的上下左右四个边线的距离
定位叠放顺序-z-index
在使用定位布局时,设置了定位的盒子可以压住别的盒子,但是定位盒子彼此之间参照的是z-index这个属性来控制前后顺序
选择器 { z-index:1;}
1.数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上(数字不能加单位)
2.如果属性值相同,则按照书写顺序,后来居上
3.只有定位的盒子才有z-index属性
绝对定位的盒子居中方法?
因为设置了position:absolute;的盒子,margin:atuo就不起作用了,所以只能手动调,思路是先移动至父盒子的一半{left:50%},再用margin微调一下就可以了
定位特殊特性?
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位,可直接设置高度和宽度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
注:参考Pink老师在B站的html5+css3,感谢Pink老师