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定位和滚动条的更多相关文章

  1. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. 第八篇 CSS定位

    CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么.   在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...

  4. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  5. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  6. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  7. 常用的CSS定位,XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  8. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  9. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

随机推荐

  1. [ASP.NET Core 3框架揭秘] 配置[5]:配置数据与数据源的实时同步

    在<配置模型总体设计>介绍配置模型核心对象的时候,我们刻意回避了与配置同步相关的API,现在我们利用一个独立文章来专门讨论这个话题.配置的同步涉及到两个方面:第一,对原始的配置源实施监控并 ...

  2. Dynamics 365 Portal 多语言

    Dynamics 365 Portal 的多语言分两种情况: 1.通过定义两套记录来实现,如Web Link Set.Snippet Content,都是定义两套记录,分别关联不同的语言来实现 Web ...

  3. Android框架式编程之架构方案

    目前移动端应用市场已经是百花齐放,很多独角兽公司都是通过App创业发展起来的,现在App类型更加丰富,功能越来越完善,基本上涵盖了各个行业的每个角落.为了开发出更加有竞争力的App,不仅需要功能上有创 ...

  4. oracle 字符串转为数字排序

    select * from user order by  to_number(dept_id) asc

  5. sqlserver日志处理不当而造成的隐患

    sqlserver日志处理不当而造成的隐患 事故背景:一大早还在路上,群里陆续有人反馈系统一直报错 “Unknown error 258”,后来查询日志发现错误日志 第一反应是不是数据库连接不够用了? ...

  6. 大数据理论篇 - 通俗易懂,揭秘谷歌《The Dataflow Model》的核心思想(一)

    目录 前言 目标 核心的设计原则 通用的数据处理流程 切合实际的解决方案 总结 延伸阅读 最后 作者:justmine 头条号:大数据达摩院 创作不易,未经授权,禁止转载,否则保留追究法律责任的权利. ...

  7. python 打飞机项目 ( 基类封装 )

    项目代码 | plane # -*- coding:utf-8 -*- import pygame, time from Plane import Plane from HeroPlane impor ...

  8. JCC 指令

    JCC跳转指令 JCC指条件跳转指令,CC就是指条件码. JCC指令 中文含义 英文原意 检查符号位 典型C应用 JZ/JE 若为0则跳转:若相等则跳转 jump if zero;jump if eq ...

  9. Mysql 的异常:The last packet successfully received from the server was 90 milliseconds ago. The last packet sent successfully to the server was 43,603,303 milliseconds ago. is longer than the server con

    调试一个程序, 调试到一半, 下班回家, 程序卡在了某一行, 第二天早上回来一看, 发现了异常: Wed Sep :: GMT+: WARN: Establishing SSL connection ...

  10. 如果获取ruby的hash的v值?

    最近写ruby,用到hash,通过k去获取v值,有时候通过hash["k"]去获取可以获取到,有时候通过又获取不到,感觉一脸懵逼 仔细观察了下ruby的hash,有两种表现形式,所 ...