细说:position      位置

  1.只要使用定位,必须要有一个相对的参照物。relative

  2.具体定位的那个1元素需要加position:absolute;绝对的

绝对的:就是具体到某一个地方了,特别详尽的意思。

注意:

使用绝对定位的时候,浏览器会逐层向上级元素找position属性,如果父级没有就会继续向上级查找position,一直找到position为止,如果找不到就以body为相对位置。

position:relative;

left:100px;

top:100px;

position:absolute;

left:100px;

top:100px;

position:relative;如果设置值了,相对原来的位置进行调整

二者的区别

  1.absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占着原来的位置。

  2.relative存在“形影分离”,所以一般情况下不建议添加值了,一般给子元素当参照位置,或是元素的微调。

  3.absolute会有一种“压盖”效果。

   Z-index层次关系,可以改变元素的层叠位置,所有的标签默认是0, z-index的值越大,该元素就越在上方。

备注:

以后我们做定位的时候,尽量保持“子绝父相”。

fixed  固定定位

Position:fixed;

脱离标准流的属性有哪些:float  position:absolute  position:fixed.

Position:static;静态

页面布局

  结构层:搭我们的页面框架。

  布局层:针对框架内部结构进行排版。

不需要使用浮动解决的问题尽量不用。

  使用浮动之后会使该元素脱标,并且该元素的margin。

div 盒子模型:

  就是一个容器,可以装任何标签。

  1.盒子实际占用空间

  2.盒子的实际宽度和高度

  3.如何理解盒子模型

  细节性问题

    块级元素的宽如果没有设置宽度,就是父级的宽,如果没有设置高度根据内容而定。

结构选择器

  div:nth-of-type(1)

单位问题 width

  1.100px

  2.百分比,给一个元素设置的宽是50%,那么这个50%是相对他的父级。

from

action提交的地址

https://www.baidu.com

methods 提交方式      post   和       get

  get是在http 的url上提交不加密         post加密在http中的一个body对象上提交的。

http是一种协议,就是客户端和服务端链接的一种协议。超文本传输协议

下拉列表

  1. background-position  雪碧图

我们的html和css中有三个属性可以向服务器发送请求,src href url。

  1. Overflow

(1) 值Hidden 超出就隐藏

(2) 值Scroll  出现滚动条

Visibility:hidden;  可见的 (消失但是占用位置)

Display:none;消失但不占用位置

细说一下position(定位),以及其他的小知识的更多相关文章

  1. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

  2. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  3. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  4. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  5. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  6. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  7. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  8. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  9. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

随机推荐

  1. 终端下将 man 命令的结果输出到文件保存

    终端下将 man 命令的结果输出到文件保存 在linux或mac下,当我们使用man命令查看某一个命令的详细帮助说明信息时: 可能终端的显示效果不是那么方便: 那么我们可以将man命令的结果输出到tx ...

  2. 一步步教你轻松学支持向量机SVM算法之案例篇2

    一步步教你轻松学支持向量机SVM算法之案例篇2 (白宁超 2018年10月22日10:09:07) 摘要:支持向量机即SVM(Support Vector Machine) ,是一种监督学习算法,属于 ...

  3. InfluxDB添加新服务

    操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 这里以添加 syncd 服务为例记录下InfluxDB添加新服务 ...

  4. mac ssh 连接超时

    打开终端,进入,/etc/ssh.sudo vi ssh_config 最后一行添加 ServerAliveInterval30 然后保存就可以了

  5. mac 10.12 sierra 机械键盘+ratm可编程鼠标记录

      系统:mac 10.12 sierra 键盘:机械键盘 鼠标:mad catz ratm 在mac 10.11/10.12 之前: 机械键盘:一般的机械键盘在mac上使用, alt 和 win 键 ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. 解决CEF中显示Flash动画弹出安全警告问题

    一. 1.Xilium.CefGlue. CefApp (CefApp.cs文件)类on_before_command_line_processing方法内设置flash路径.版本号等. m_comm ...

  8. celery --分布式任务队列

    一.介绍 celery是一个基于python开发的分布式异步消息任务队列,用于处理大量消息,同时为操作提供维护此类系统所需的工具. 它是一个任务队列,专注于实时处理,同时还支持任务调度.如果你的业务场 ...

  9. python – 基于pandas中的列中的值从DataFrame中选择行

    如何从基于pandas中某些列的值的DataFrame中选择行?在SQL中我将使用: select * from table where colume_name = some_value. 我试图看看 ...

  10. IOS-企业开发人员账号&邓白氏码申请记录

    Apple开发人员账号分三种,个人.公司,还有企业.个人和公司都称为标准账号. 另一种是教育机构的账号. 账号介绍 个人和公司的就不说了.如今仅仅说企业账号 首先是申请企业账号的地址: https:/ ...