定位

定位模式: static  relative  absolute fixed
边偏移 :top bottom left right 
一般的定位必须要有定位模式以及边偏移

static 静态定位 默认的定位模式 没有边偏移

    取消定位  跟浮动的float:none是一样的   取消浮动

position:relative 相对于原来的位置 原来的位置是有占位的 有边偏移 没有脱离标准流的

top :距离原来的顶部多少个px
left:距离原来的左边位置...个px

绝对定位 不占有原来的位置 脱离标准流

如果父亲没有定位 我们相当于找的是可视区域 client
如果父盒子有定位,找的是父盒子(相对于父盒子的定位)

子绝父相:

 
1.父盒子由于需要占用位置应该使用相对定位(没有脱离标准流)
2.子盒子由于要显示层级效果应该使用绝对定位(已经脱离标准流)

子盒子在父盒子居中显示

1.父盒子和子盒子都有定位
2.给子元素 left:50%;top:50%;
3.给父元素的margin-top:-子元素高度的50%(比如子元素100px高度,就给-50px)
                        -子元素宽度的50%(比如子元素100px宽度,就给-50px)

resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域 textare

css position 定位模式的更多相关文章

  1. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  2. CSS Position 定位属性

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

  3. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  4. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  5. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  7. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  8. CSS Position 定位属性介绍

    1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...

  9. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

随机推荐

  1. mac内置的FTP工具

    在 Mac OS X 系统下,有不少优秀的 FTP 工具,如 Cyberduck.Transmit,但是你是否知道除了这些第三方应用,系统已经为你准备好了一个内置的 FTP 工具?/ M: e0 J% ...

  2. RT-Thread RTOS

    RT-ThreadRTOS是一款来自中国的开源实时操作系统,由RT-Thread工作室的专业开发人员开发.维护. 起初RT-Thread是一个实时的内核(全抢占优先级调度,调度器时间复杂度O(1)), ...

  3. scores

    题意: m维偏序问题. 解法: 考虑对每一维按照每一个元素在这一维的数值分块,对于每一个块维护一个大小为 n 的bitset,表示前缀/后缀满足条件的元素集合. 对于每一个询问,我们可以枚举找到相应的 ...

  4. day1 java基础回顾-IO流

    IO流的分类 注:这几个类都是抽象类. IO解决问题: 解决设备与设备之间 的数据传输问题. 比如: 硬盘--->内存 内存----->硬盘 字节流: 输入字节流:---------| I ...

  5. php封装pdo操作数据的工具类

    <?php header("Content-Type:text/html;charset=utf-8"); class PdoMysql{ public static $co ...

  6. JAVA企业级开发-jdbc入门(09)

    一. jdbc介绍 JDBC全称为:Java DataBase Connectivity(java数据库连接). SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范,称之为JD ...

  7. ]Linq to EF 增删改查

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  8. RenderTexture

    https://docs.unity3d.com/Manual/class-RenderTexture.html Size: 图片像素尺寸,这个size可以直接在脚本里通过width和height动态 ...

  9. 洛谷P3608 [USACO17JAN]Balanced Photo平衡的照片

    P3608 [USACO17JAN]Balanced Photo平衡的照片 题目描述 Farmer John is arranging his NN cows in a line to take a ...

  10. 洛谷2105 k皇后

    P2105 K皇后 题目描述 小Z最近捡到了一个棋盘,他想在棋盘上摆放K个皇后.他想知道在他摆完这K个皇后之后,棋盘上还有多少了格子是不会被攻击到的. (Ps:一个皇后会攻击到这个皇后所在的那一行,那 ...