文档流指语言文本从左到右,从上到下显示,这是传统 html 文档的文本布局。
定位 (position) 中的 absolute,relative,fixed; 浮动(float)的 float:left/right。
四种方式:
默认 static:没有定位;
相对定位(relative):相对于原始位置进行定位;常用于布局,让子元素有参考对象。
绝对定位(absolute):该方法令元素不再占有自己原有位置,完全脱离文档流。
fixed:生成绝对定位的元素,常用于广告弹窗等。
,
- absolute
,
- relative
偏移的参考点分别是什么
- fixed
absolute 相对于父容器的偏移量;
relative 相对于原有位置的偏移量;
fixed 相对于浏览器窗口进行定位。
用来控制层叠元素的显示优先级,值越大优先级越高。
和负
- position:relative
都可以使元素位置发生偏移? 二者有什么区别
- margin
position:relative 会让元素脱离文档流,且没有改变自身占据的空间大小;
负 margin 没有脱离文档流,会改变自身占用空间大小。
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="utf-8">
- 5 <title>boxcenter</title>
- 6 <style type="text/CSS" media="screen">
- 7 .ct{
- 8 border: none;
- 9 position: relative;
- 10 width: 500px;
- 11 height: 500px;
- 12 line-height: 500px;
- 13 background-color: #ccc;
- 14 color: #000;
- 15 }
- 16 .box{
- 17 border: none;
- 18 position: absolute;
- 19 top: 50%;
- 20 left: 50%;
- 21 margin-left: -50px;
- 22 margin-top: -50px;
- 23 color: #fff;
- 24 background-color: red;
- 25 width: 100px;
- 26 height: 100px;
- 27 line-height: 50px;
- 28 text-align: center;
- 29 }
- 30 </style>
- 31 </head>
- 32 <body>
- 33 <div class="ct">
- 34 <div class="box">box</div>
- 35 </div>
- 36
- 37 </body>
- 38 </html>
特征:
影响:
1. 浮动元素:能感知浮动元素的存在,碰到其他浮动元素的边框时会停止。
2. 普通元素: 块级元素无法感知浮动元素的存在,会占据其空间;行内元素不会占据浮动元素空间。
3. 文字:文字会被浮动元素挤开,环绕浮动元素排布。
清除浮动是指为元素设置其左右能否有浮动元素。
清除浮动:
1. 为被浮动元素遮挡的元素添加
- clear:both/left/right
2. 为浮动元素的父元素添加
- overflow:hidden
3. 在最后一个浮动元素的后面添加一个元素并加入
样式。
- clear:both
来源: