布局
文档流
就是按照元素的顺序从左到右从上到下排列
如果有块级标签,块级会占据一正行
在img中加一个块级元素div
定位
默认的文档流许多时候无法满足我们的需求,需要更多地布局手段
用到定位:默认定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed
默认定位 static
无定位,不受left right top bottom的影响,元素出现在正常
的文档流中
相对定位 relative
可以看出div2是相对原有位置进行left、right、top、bottom进行
位移,而且对后续元 素无影响
绝对定位 absolute
父相子绝:父级元素相对定位,再给子级绝对定位
固定定位 fixed
z-index
重新定位之后可能出现重叠,可以通过z-index调整顺序 默认值
是auto,即与父元素相 同,可以为他设置数值,数值越大层数越高
定位总结:
1.标准文档流按照从左到右自上而下的方式依次排列顺序。若要改变
默认的布局方式则需要使用定位:relative absolutefixed 等定
位方式
2.Relative相对于原有位置进行偏移
3.Absolute 相对于父容器进行偏移,注意:父容器必须要有定位,
非默认定位,否则一直往上追溯,知道页面
4.Fixed相对于整个页面进行偏移
5.Relative 不会脱离文档流 absolute和fixed都会脱离文档流
浮动
通过设定浮动,可以使元素从原来的文档流中脱离出来,感觉像浮
在原本的文档流上面。
一.父元素高度
二.父元素 overflow:hidden;
三.在最后一个标签后加div设置clear:both;
四.伪元素(双伪元素)