流定位相对定位学习笔记_第1页
流定位相对定位学习笔记_第2页
流定位相对定位学习笔记_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、定位：解决元素的布局（摆放）问题。1. 流（队伍）定位：元素默认布局的方式块元素垂直排列（hn/p/div/ol/ul/table ）行内元素左右排列（span/a/img/input）2. 浮动定位可以让块左右排列3. 相对定位：相对于自己设置偏移4. 绝对定位a）相对于父亲设置偏移5. 固定定位a）相对于窗口设置偏移相对定位、绝对定位、固定定位本质都一样，都是相对于某个目标设 置偏移前提：1. 元素的高度会自适应，其高度是流（队伍）中元素高度的和2. 无论如何浏览器都会将文本显示出来，不会被遮挡。浮动定位：可以让块左右排列：浮动定位分为2种：左浮动、右浮动浮动的目标将脱离流（队伍）浮动的步

2、骤：1. 目标离队2. 弟弟跟上3. 浮动到对应的位置右浮动：让块按照倒序左右排列1消除对叔叔的影响：clear： left/right;2.消除对父亲的影响1在父元素内加一个空的块2在这个块上设置消除浮动影响。结论：由于新块消除影响后会出现浮动块的下方, 因此拉伸了父元素的高度。相对定位：1. 以自己原始的位置为目标；2. 不脱离队伍（流）；Positi on: relative;Left:2px;Top:-2px;绝对定位：1. 以带有position的父辈为目标，若都没有而它还是处于流内,position 以 body 为目2. 脱离队伍Posit in: absolute;固定定位：1. 以窗口为目标设置偏移；2目标脱离队伍（流）；3元素会固定在窗口上，不会随着滚动条而滚动Positi on: fixed;元素的显示方式（display）1. 块a）有宽高、独立成行（垂直排列）b）Hn / p / div/ ol/ ul/ table2. 行内a）没有宽高、不独立成行（横向排列）b）Span/ b / strong/ em /i /u /del/ a3. 行内块a）有宽高、不独立成行（横向排序）b）Img/ input /select/textarea修改显示方式Display: block 块Display: inline 行内

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论