1。盒子的显隐

  display:none      在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个

  opacoity : 0        在页面中占位,采用定位布局后,显示隐藏都不会影响其他标签,要用动画处理时,一般用这个

  一般显隐操作的盒子都是采用定位布局:

     悬浮父级,显示子级。

2。相对定位布局

    设置定位属性,要先打开定位方位

position: relative;

通过定位方位完成布局

top: 100px;

left: 100px;

bottom: 100px;

right: 100px;

    结论:1.参考系:自身原有位置********,  right参考的就是原有位置的右边界;

       2.top , bottom , left , right 都可以完成自身定位。left与right同时存在,只有left生效, 上下同时存在,只有top生效。

       3. left=  -right    top=  -bottom

       4.布局后不影响自身原有位置

       5.不脱离文档流

3。绝对定位布局

  参考系: 最近的定位父级

  position: absolute;  => 打开了四个定位方位

  1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左

  2.父级必须自己设置宽高,绝对定位布局一定存在父子关系

  3.父级的高度不再依赖于子级,子级脱离文档流

  绝对定位需要大家脱离文档流,相互不会影响布局,每个都是独立相对于父级进行布局的个体

4。固定定位布局

  1参考系: 页面窗口

  2.position: fixed;  => 打开了四个定位方位

  3.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左

  4.相对于页面窗口是静止的

  5.完全脱离文档流

5。z-index

  修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

6。流式布局思想

  1. 百分比

  2. vw | vh => max-width(height) | min-width(height)

  3. em | rem

盒子的显隐

Python12/11--盒子的显隐/布局/z-index/流式布局思想的更多相关文章

  1. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

  2. Android流式布局实现

    查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大 ...

  3. RV LayoutManager 流式布局 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  5. Web前端_流式布局(百分比布局)

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

  6. 移动web中的流式布局和viewport知识介绍

    1   流式布局 其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 这样的布局方式  就是移动web开发使用的常用布局方式 ...

  7. 05-移动web之流式布局

    一.视口 1.常见屏幕知识 设备 解释 描述 宽 屏幕的宽度 - (单位:英寸) 屏幕的宽度 高 屏幕的高度 -(单位:英寸) 屏幕的高度 对角线 屏幕的对角线的长度 英寸 一般说手机尺寸 是指以屏幕 ...

  8. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  9. webapp,liveapp: 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

随机推荐

  1. Python打包之pyinstaller

    Pyinstaller 进行对应目录下的打包 执行完后请注意建议将该m2的拷贝走 加了参数-w后不会出现黑色控制台的窗子 常用参数说明: –icon=图标路径 -F 打包成一个exe文件 -w 使用窗 ...

  2. gogs 源码阅读笔记 001

    gogs 源码阅读笔记 001 gogs项目相当不错,本笔记实际是基于gogs fork版本 git-122a66f. gitea (gitea版本由来)[https://blog.gitea.io/ ...

  3. Core Graphices 设置渐变

    Core Graphices 设置渐变 Quartz 提供了两种设置渐变的方式  CGShadingRef and CGGradientRef 尝试CGGradientRef 的使用 import & ...

  4. 使用css实现时间轴

    本文将使用css来实现一个左右交叉布局的时间轴,效果如下: 使用的都是一些常用的css,代码如下: <!DOCTYPE> <html> <head> <tit ...

  5. Vue非父子组件之间的传值

    1.新建一个js文件  然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...

  6. Phpstorm 与 服务器 同步 代码

    链接:(自己领悟就好了) Phpstorm同步代码

  7. oracle入坑日记<一> 安装

    学习日记系列(前辈/大神勿喷) 一.下载 下载地址:http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads ...

  8. 解决strcmp的错误以及VS的快捷键

    主要是C++数组作业中发现的一些问题. 第一点是关于strcat函数 我用VS2018调用strcat的时候报错,错误信息提示strcat不安全(?)要用strcat_s.修改后,可成功运行. 但这两 ...

  9. servlet cdi注入

    @WebServlet("/cdiservlet")//url映射,即@WebServlet告诉容器,如果请求的URL是"/cdiservlet",则由NewS ...

  10. Python第2天

    今天学习的主要内容: pycharm专业版的安装和注册,采用注册码的方式注册. 运算符,+ — * / // % < > <=  >= != <> . 基本数据类型 ...