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. (译)An introduction to Kubernetes

    原文:https://www.jeremyjordan.me/kubernetes/(博客园团队推荐的) 这篇博客文章将对Kubernetes进行介绍,以便您了解该工具背后的动机,含义以及使用方式.在 ...

  2. DevExpress的GridControl的使用以及怎样添加列和绑定数据源

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  3. IDEA中使用Maven模板创建Maven WebApp项目并使用Tomact来运行项目

    首先需要正确安装Maven和Tomact,Maven安装和Tomact安装步骤,参见别的文章. 一.创建Maven工作空间 点击Finish按钮后,耐心等待.直到出现BUILD SUCCESS为止. ...

  4. 关于iOS引导页图层的相关属性类

    关键字:CABasicAnimation 参考链接:https://blog.csdn.net/Dwarven/article/details/42492199 Layer.mask属性用法: htt ...

  5. 搭建Android开发环境 以及 ionic 编译安卓app步骤

    1. 下载安装JDK 下载地址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  6. vue路由进阶

    一..全局路由前置守卫 1.首先看一下文档结构 Dashboard和Login是一级页面  home about mine是在Dashboard下的二级页面 2.router.js代码如下 impor ...

  7. 【zabbix监控】zabbix监控tomcat服务

    服务器配置(zabbix_server) 1. 安装jdk 版本需要1.7以上,我这边安装的是1.8的,可以参考我jdk安装的文章 # 上传到zabbix_server服务端.安装(jdk-8u171 ...

  8. Centos7通过yum跟源码编译安装Nginx

    源码编译安装 http://nginx.org/en/download.html 到官网下载,然后用XFTP上传到root目录 把文件解压出来 tar -zxvf nginx-1.16.0.tar.g ...

  9. alpine制作jdk、jre镜像、自定义镜像上传阿里云

    alpine制作jdk镜像 alpine Linux简介 1.Alpine Linux是一个轻型Linux发行版,它不同于通常的Linux发行版,Alpine采用了musl libc 和 BusyBo ...

  10. C++ STL容器

    不定长数组:vector vector是一个模板类,作用为创建一个不定长的数组 声明方式:vector<int>a或者vector<double>b这种类型的方式. 基本操作: ...