【相对定位】
* 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等)
 
 
 
 
 
 
 
 
 
 
 

H5取经之路——随便写点儿的更多相关文章

  1. H5取经之路——HTML的基本标签

    一.head中的基本标签 1.HTML文档的结构:     a.<head>头部部分,b.<body>主体部分 <!DOCTYPE html> <!-- ↑为 ...

  2. H5取经之路——CSS基础语法

    一.CSS常用选择器 [选择器的命名规则] * 1.只能有字母数字下划线组成,不能有其他任何字符 * 2.开头不能是数字 [通用选择器] * 1.写法:*{} * 2.选中页面中的所有标签 * 3.优 ...

  3. H5取经之路——添加hover实现特定效果

    一.鼠标指上后显示二维码,效果图如下: 鼠标未指上时: 鼠标指上后: 代码如下: .div1 .li2 .code_wexin{ width: 0px; height: 0px; position: ...

  4. Jquery 随便写些知识点

    针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...

  5. 随便写一点最近开发遇到的问题和解决方法 大部分关于laravel和php

    laravel里要想对对象进行自己设计的排序(usort()), 得用匿名方法,  原声php就不用 php里面可以随便写html代码,  比如可以把html直接后缀名改成.php, 然后在任何地方& ...

  6. OutputStream之flush() · 李大白写点儿啥

    最近在做一个网络下载功能,I/O操作时,操作完OutputStream时写了flush(),目的是刷新输出流,将缓存写入物理设备.突然就想,这里是否需要flush()呢? 我当时的代码: 1 2 3 ...

  7. Jquery网页加载进度条(随笔,当然要随便写,当日记动态心情写咯)

    首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...

  8. 忙了好一阵,今天随便写篇关于canvas的小东西

    前几天在朋友圈发了几条3D demo视频,其中就有3D空间组成各种图形.如上! 那么这些图形的每个mesh的坐标可不是手动去写,如果你愿意我当然不拦着!所以今天这篇就来介绍如何获得这些图形的坐标数据. ...

  9. 实现一个最简单的VIM文本编辑器(可能有bug,随便写了一个)

    简单的写了一个文本编辑器,功能很简单,但足以把文件IO相关的操作熟悉了,可能功能或者分配的大小还不够完善.请参考参考: #include <stdio.h> #include <co ...

随机推荐

  1. (十五)The Search API

    Now let’s start with some simple searches. There are two basic ways to run searches: one is by sendi ...

  2. Redis入门---字符串类型

    阅读目录 1.keys * 命令 2.判断一个键是否存在(exists key) 3.删除键 4.获取键值的数据类型 5 递增数字(incr) 6.增加指定的整数 (INCRBY) 7.减少指定的整数 ...

  3. python之json模块

    #!/usr/bin/python # -*- coding: UTF- -*- ''' )序列化相关 json pickle (序列化是指将) 序列化是指将一个字符串转换成基础数据类型或者基础数据类 ...

  4. Linux内存管理 (15)页面迁移

    专题:Linux内存管理专题 关键词:RMAP.页面迁移. 相关章节:反向映射RMAP.内存规整. 页面迁移的初衷是为NUMA系统提供一种将进程迁移到任意内存节点的能力,后来内存规整和内存热插拔场景都 ...

  5. 把json数据转换成集合

    Sting MessageList="";JSONArray json = JSONArray.fromObject(MessageList);JSONObject object ...

  6. 第二部分之RDB持久化(第十章)

    RDB持久化功能所生成的RDB文件是一个经过压缩的二进制文件,通过该文件可以还原生成RDB文件时的数据库状态.(数据库状态:服务器中的非空数据库以及它们的键值对统称为数据库状态) 一.RDB文件的创建 ...

  7. 洛谷P3957 跳房子(Noip2017普及组 T4)

    今天我们的考试就考到了这道题,在考场上就压根没有思路,我知道它是一道dp的题,但因为太弱还是写不出来. 下来评讲的时候知道了一些思路,是dp加上二分查找的方式,还能够用单调队列优化. 但看了网上的许多 ...

  8. windows环境下memcache相关配置及PHP加载相应模块(php7版本)

    原文:https://blog.csdn.net/zhangatle/article/details/77504094 亲测安装成功 php 7.0 nts 86 第一步,首先下载windows版本的 ...

  9. mysql-笔记-数据类型

    https://dev.mysql.com/doc/refman/5.7/en/numeric-type-overview.html serial: SERIAL is an alias for BI ...

  10. 作业二:Git的安装与使用

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 分布式版本控制系统Git的安装与使用 1.下载安装配置用户名 ...