【相对定位】
* 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. Django-CRM项目学习(七)-权限组件的设置以及权限组件的应用

    开始今日份整理 1.利用自定制标签,增加展示权限,权限分级设定 1.1 在权限组件中创建自定义标签 使用自定义标签的目的,使各个数据进行分离 1.2 导入自定义标签包 自定义标签复习(自定义标签有三种 ...

  2. zabbix,php,nginx,mysql源码安装 神仙操作

    →软件包 mkdir /soft/ cd /soft ♦下载以下软件包 nginx-1.14.2.tar.gz wget http://nginx.org/download/nginx-1.14.2. ...

  3. sanic set up

    (venv) MacBook-Pro:bin shihw$ pip3 install sanicCollecting sanic Downloading https://files.pythonhos ...

  4. java面试准备之面向对象

    面向对象 下面列出了面向对象软件开发的优点: (1) 代码开发模块化,更易维护和修改. (2) 代码复用. (3) 增强代码的可靠性和灵活性. (4) 增加代码的可理解性. 面向对象编程有很多重要的特 ...

  5. Linux 字符编码 查看与转换

    Linux 查看文件编码格式 Vim 查看文件编码 set fileencoding // 即可显示文件编码格式 若想解决Vim查看文件乱码问题, 可以在 .vimrc 文件添加 set encodi ...

  6. 3 数据分析之Numpy模块(2)

    数组函数 通用元素级数组函数通用函数(即ufunc)是一种对ndarray中的数据执行元素级的运算.我们可以将其看做是简单的函数(接收一个或多个参数,返回一个或者多个返回值). 常用一元ufunc: ...

  7. MySQL 8.0 - Client does not support authentication protocol requested by server; consider upgrading MySQL client

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码';

  8. 操作docker容器

    Docker容器时镜像的一个运行实例,而镜像是静态的只读文件,容器带有运行时需要的可写文件层.如果认为虚拟机是模拟运行的一整套操作系统(包括内核.应用运行的环境和其他系统环境)和跑在上面的应用,那么D ...

  9. JS-JAVASCRIPT的eval()方法

    Lodop的传统模版是JS语句,如果储存的这种JS模版,可用javascript的eval()方法获取,该方法属于JS的范畴,并不是lodop语句,由于这个方法很多程序员可能不常用,对于这个JS方法不 ...

  10. 带拦截器配置的 struts.xml文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...