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. 《Java基础知识》Java instanceof 运算符

    java多态性带来一个问题,就是如何判断一个变量所实际引用对象的类型.这里java帮我们引入了 instanceof 运算符. instanceof运算符用来判断一个变量的所引用对象的实际类型,注意是 ...

  2. 人员简历管理系统-毕业设计(包括文档+源代码+答辩PPT)

    1.开发环境 开发工具:Microsoft Visual Studio 2010操作系统:Windows7(推荐)或更高版本 数据库:sql server 2000 或者更高版本Web服务器:IIS ...

  3. 小白的springboot之路(十三)、过滤器、监听器、拦截器

    0.前言 过滤器.监听器.拦截器在实际开发中经常需要用到,下面我们来介绍一下spring boot中如何使用: 一.------ 过滤器 ----- 1.作用: 过滤器是客户端与服务器资源文件之间的一 ...

  4. C#8.0中新特性之一:结构readonly成员

    结构struct成员支持readonly,用来限制被其修饰的成员不会改变结构的内部状态.加上7.2版本添加的readonly struct和ref readonly方法返回以及之前的字段声明修饰作用, ...

  5. Centos+Nginx+NetCore3.1

    Centos+Nginx+NetCore3.1部署 1 先将vs2019升级到,16.4.0版本 2.新建一.netcore3.1的web程序 3.编译后将项目上传到centos服务器 4.配置ngi ...

  6. PuppeteerSharp读取页面完整HTML(.NetCore)

    1.使用NUGET安装PuppeteerSharp 通过工具或者命令方式安装 2.初始化浏览器 await new BrowserFetcher().DownloadAsync(BrowserFetc ...

  7. 设置POP3/SMTP协议 手机绑定邮箱

    例如设置企业邮箱 一.设置POP3/SMTP协议,意思是代收邮件致本地POP3接收邮件服务器:pop.qiye.qq.comSMTP发送邮件服务器:smtp.qiye.qq.com二.设置IMAP/S ...

  8. ELK:ElasticSearch中有数据,Kibana查询不到数据

    ElasticSearch中有数据,Kibana查询不到数据 多数原因就是Linux的时区问题, 在linux输入date查看当前时间是否根本地相对应,不对应那么你就来对了, 解决方案一. 这个选择的 ...

  9. sleuth和zipkin微服务里的链路跟踪

    分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...

  10. linux下通过命令连接wifi

    故事背景:我司是做新零售的,机器支持4G.wifi.网线,可能会涉及到网络的切换和连接 项目需求:用户在web端输入wifi名称和密码,客户端可以通过服务端下发的信息进行连接 技术调研:之前提到过nm ...