CSS定位和滚动条
0805自我总结
一.绝对定位
position: absolute;
/*绝对定位:
1、定位属性值:absolute
2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点,而是四边参照四边)
5、左右同时存在,取左;同理上下取上
6、当父级定位了,子级参照父级定位,又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
position:fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
二.相对定位
position: relative;
父级(最近的一个父级)相对定位的目的
1)不影响自身布局
2)辅助自己绝对定位布局
三默认定位
position: static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
四.继承定位
position:inherit
规定应该从父元素继承 position 属性的值。
五.滚动条
overflow
hidden:没有滚动条,且内容只有规定区域的内容.
visible:默认值没有滚动条,这个属性定义溢出元素内容区的内容会如何处理且显示.
scroll:这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条.
auto:显示滚动条,且内容只有规定区域的内容.
CSS定位和滚动条的更多相关文章
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 第八篇 CSS定位
CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么. 在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- 常用的CSS定位,XPath定位和JPath定位
CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
随机推荐
- 《Java基础知识》Java字符串详解
本文内容: String类的概述 String类的使用步骤 String类的常用方法 本文目的: 能够使用String类的构造方法创建字符串对象 能够明确String类的构造方法创建对象,和直接赋值创 ...
- 安装完PyCharm,启动时弹出Failed to load JVM DLLbinserverjvm
安装完PyCharm,启动时弹出"Failed to load JVM DLL\bin\server\jvm.dll"解决方案 问题描述:打开PyCharm时,弹出"Fa ...
- AOP框架Dora.Interception 3.0 [3]: 拦截器设计
对于所有的AOP框架来说,多个拦截器最终会应用到某个方法上.这些拦截器按照指定的顺序构成一个管道,管道的另一端就是针对目标方法的调用.从设计角度来将,拦截器和中间件本质是一样的,那么我们可以按照类似的 ...
- javascript中引用传递的问题如何解决
我们有时候会向一个方法中传入一个参数,并且对这个参数做一些处理的操作: 但是因为是引用传递,处理过后会对原有的对象造成修改,无法进行反复使用. 如例子: 两次打印的结果一模一样.这样下一个方法在继续使 ...
- Hadoop_简介_01
1. Apache Hadoop 1.1 Hadoop介绍 Hadoop是Apache旗下的一个用java语言实现的开源软件框架, 是一个开发和运行处理大规模数据的软件平台. 允许使用简单的编程模型在 ...
- 阿里云MVP 第十期全球发布:让天下没有难做的技术
简介: MVPs与阿里云一起探索前路,用技术改变世界! 在云的世界中,从来没有“简单”二字,想成为一个优秀的开发者,也没有“简单”二字,而阿里云MVP就一直是云计算中最为顶尖的专家.现在,阿里云MVP ...
- Xposed反射字段流程分析
在XposedBridge源码中,反射字段的方法封装在de.robv.android.xposed.XposedHelpers类里面.下面来看看Xposed是如何获取和设置字段的值的 获取字段的值 获 ...
- .net core百万设备连接服务和硬件需求测试
随着物联网的普及,服务应用将面对大量物联设备处理:早期.NET在通讯上的处理能力一直给人的印像并不怎样,但net core经历过大量的优化后在各个模块的处理性能都有着比较出色的提升,针对网络方向的处理 ...
- WPF数据可视化-瀑布图
实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...
- tf读取图片,matplotlib可视化
代码: """ 使用tf读取图片 """ import tensorflow as tf import matplotlib.pyplot ...