【相对定位】
* 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. 【Python 08】汇率兑换2.0-1(字符串索引)

     1.案例描述 设计一个汇率换算程序,其功能是将人民币转换为美元,或者美元转换为人民币. 增加功能:根据输入判断是人民币还是美元,进行相应的转换计算. 2.案例分析 3.字符串 两个双引号或单引号括起 ...

  2. NSSM安装服务

    NSSM是一个服务封装程序,它可以将普通exe程序封装成服务,使之像windows服务一样运行.同类型的工具还有微软自己的srvany,不过nssm更加简单易用,并且功能强大.它的特点如下: 支持普通 ...

  3. Spring Security(三十七):Part IV. Web Application Security

    Most Spring Security users will be using the framework in applications which make user of HTTP and t ...

  4. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  5. 用python实现的一个自动聊天的机器人

    因为之前想过 如果每天早上微信能够发送天气预报给我,给我老婆多好,然后就动手看网上的教程做了一个可以定时发送天气预报的程序, 最近又想到折腾,做了一个更加详细的版本.但是需要主动操作 具体操作看图. ...

  6. 乡下人重拾MVC——@RenderBody @RenderSection @Html.Partial @Html.Action @Html.RenderPartial @Html.RenderAction

    1.   @RenderBody()  代表:是一个占位符,是留给子页面的位置,子页面使用这个模版,子页面中的内容会被放到@RenderBody的位置.合并后当作一个整体加载 2.   @Render ...

  7. Entity Framework Core系列之DbContext(修改)

    上一篇我们介绍了Entity Framework Core系列之DbContext(添加),这一篇我们介绍下修改数据 修改实体的方法取决于context是否正在跟踪需要修改的实体. 下面的示例中实体由 ...

  8. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  9. JAXB注解的使用详解

    前言: 最近一直在做各种接口的对接,接触最多的数据类型就是JSON和XML数据,还有XML中包含JSON的数据,而在Java中对象和XML之间的转换经常用到JAXB注解,抽空在这里总结一下,首先做一下 ...

  10. 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 '你的密码';