【相对定位】
* 1、使用position:relative;设置元素为相对定位的元素;
* 2、定位机制:
①相对于自己原来文档流中的的位置定位,当不指定top等定位值时,不会改变元素位置;
②相对定位元素,仍会占据原来文档流中的位置,而不会释放;
* 3、使用top、left、bottom、right调整位置,当left和right同时存在,left生效,当top和bottom同时存在,top生效。
【绝对定位】
* 1、使用position:absolute设置元素为绝对定位元素。
* 2、定位机制:
①相对于第一个非static的祖先元素(即使用了relative、absolute、fixed
定位的的祖先元素)进行定位
②如果所有祖先元素均未定位,则相对于浏览器左上角定位
③使用absolute的元素,会从文档流中完全删除,原有空间释放不再占有
【绝对定位元素的水平居中的方式】
* 1、left:50%;
* 2、设置margin-left为-width/2
【固定定位fixed】
* 1、position:fixed是一种特殊的绝对定位,父容器无法使用relative锁住。
* 2、定位机制:永远相对于浏览器定位。
【z-index属性】
* 1、设置定位元素的z轴层叠顺序
* 2、使用要求:
①必须是定位元素(relative、absolute、fixed)才能使用
②使用z-index,需要考虑父容器的约束, 如果父容器为z-index:auto,则子容器的z-index可以不受父容器的约束;如果父容器z-index进行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器中的不同子元素,仍可以通过自己的z-index调整层叠关系)。
* 3、z-index:auto & z-index:0 的异同:
①z-index:auto为默认值,与z-index:0处于同一平面。
②z-index:auto不会约束子元素的z-index层次,而z-index:0会约束子元素必须与父元素处于同一平面
* 4、z-index相同(处于同一平面的定位元素)的层叠关系:后来者居上
【实现块级元素在块级元素中水平垂直居中】
* ①设置子容器为定位元素
* ②使用left:50%;margin-left:-width/2;
* top:50%;margin-top:-height/2;
【使用负边距增大元素宽度】
* ①不指定子容器宽度,指定高度或内容
* ②margin:0px -50px;可以使左右两边,各增加50px
【负边距实现双飞翼布局】
* ①由于main部分写在前面,可以保证主布局的优先加载
【display属性:设置元素的级别】
* none:隐藏元素,元素所占空间释放
* block:设为块级元素
* inline:设为内联元素(行级元素)
* inline-block:设为内联块级元素 (本身为行级元素,但是具有块级元素所特有的各种属性,比如宽、高、text-align等)
 
 
 
 
 
 
 
 
 
 
 

最新文章

  1. Dynamics CRM 之ADFS 使用 WID 和代理的联合服务器场
  2. modelsim实用教程--前言
  3. Linux学习之七--mysql的安装使用
  4. Python 修饰符
  5. [C++][操作符]四种显示转换操作符
  6. 缓存MEMCACHE 使用原子性操作add,实现并发锁
  7. OC-方法的声明和实现、匿名对象
  8. [CareerCup] 6.2 Dominos on Chess Board 棋盘上的多米诺
  9. 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
  10. 几点基于Web日志的Webshell检测思路
  11. 如何去掉html中的超链接
  12. Codeforces 559A 第六周 O题
  13. LoadRunner基础入门教程
  14. 动态的 css——less
  15. 我的DbHelper数据操作类(转)
  16. 数组自定义排序:IComparable和IComparer接口
  17. 推荐一个比crontab更好用的东西:crongo
  18. 四丶前端基础之jquery
  19. CHD 5.15 安装 Kylin
  20. Angularjs 过滤器使用

热门文章

  1. Entity Framework的启动速度优化
  2. Hystrix框架1--入门
  3. (转)Div和Table的区别
  4. 一页纸商业计划书 (Business Plan) 模板(转载)
  5. Apache 配置 Basic 认证
  6. phpcms 05
  7. 如何创建和发布.asmx Web Service
  8. JSON.stringify 函数 (JavaScript)
  9. codeforces 659A Round House
  10. Linux硬盘命名和安装分区
  11. 尽历磨难,搞定OPEN VSWITCH安装
  12. iOS获取网络时间与转换格式
  13. TCP四次挥手
  14. 应用调试(五)侵入式SWI
  15. App拉起小程序提示跳转失败
  16. golang的包管理---vendor/dep等
  17. HDU 5377 (Exgcd + 原根)
  18. Knockout.Js官网学习(加载或保存JSON数据)
  19. Maven的conf目录下settings.xml的简单配置
  20. 微信小程序 - tab+swiper切换(非组件)