绝对定位

1 、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3、 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

div、h1 或 p 元素常常被称为块级元素。 这意味着这些元素显示为一块内容，即“块框”。 与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您 可以使用 display 属性 改变生成的框的类型 。 这意味着，通过 将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样 。 还可以通过 把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间 。 CSS 定位机制 CSS 有三种基本的定位机制： 普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。 但是，垂直内边距、边框和外边距不影响行内框的高度。 由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 CSS position 属性 这个属性 定义建立元素布局所用的定位机制 。 任何元素都可以定位， 不过绝对或固定元素会生成一个块级框

一、方案一（已知子元素的宽高） 1.子元素开启绝对定位，父元素开启相对定位 2.子元素设置left、right、top、bottom属性都为0，margin为auto 或者 （注意2、3步二选一） 3.子元素left设为50%，top设为50%，margin-left设为 -子元素的width/2px，margin-top设为 -子元素的height/2px 二、方案二（未知子元素宽高） 1.子元素开启绝对定位，父元素开启相对定位（这一步和方案一相同） 2.子元素left设为50%，top设为50%，transform设为translate(-50%,-50%) 特别说明：子元素开启了绝对定位，随之父元素也要开启非static定位（relative相对定位或者是absolute绝对定位都可以，根据需求），才能使子元素的绝对定位是相对于其父元素进行定位。 end，每种方案实现原理都不尽相同，望辩证待之。 来源： https://www.cnblogs.com/chasesunforever/p/12103152.html

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到top, bottom, left, right影响。 Fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： 实例 p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 Relative 定位 相对定位元素的定位是相对其正常位置。 实例 h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } 尝试一下 » 可以移动的相对定位元素的内容和相互重叠的元素

CSS 绝对定位 CSS 相对定位 CSS 浮动 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样： #box_relative { position: absolute; left: 30px; top: 20px; } 来源： CSDN 作者： LingYingZou 链接： https://blog.csdn.net/LingYingZou/article/details/103712793

定位 定位有三种： 1.相对定位 2.绝对定位 3.固定定位 相对定位 相对定位:相对于自己原来的位置定位 现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right 特性： 1.不脱标 2.形影分离 3.原位置保留 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果 用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。 参考点： 自己原来的位置做参考点。 绝对定位 特性： 1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。 参考点： 一、单独一个绝对定位的盒子 1.使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。 二、以父辈盒子作为参考点 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点 3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

(特别鸣谢郭欣新同学提供书籍：《精通CSS+div网页样式与布局》) 一、css语法构成:选择器、声明（属性：值） 　　1、选择器：标记选择器(h1)、类别选择器(h1.className)、ID选择器(h1#idName)，选择器的优先级由低到高为标记、类别、ID。 　　2、声明：键值对，键对应属性名称、值对应属性值。 二、css继承：子标签无条件得到父标签的css值，如果css属性相同，则子标签css属性覆盖父标签css属性。 三、引入css方式：内联式、链接式、导入式。建议使用链接式，避免使用内联式。 　　1、内联式：将css声明写在html标签的style属性里。 　　2、链接式：在html页面<head>中写入<link rel='stylesheet' type='text/css' href="test.css"> 　　3、导入式：在html页面<head>中写入<style>@import url(test.css)</style> 四、css属性之字体篇 　　1、font-family:字体集。font-family:黑体,宋体; 　　2、font-size:字体大小。font-size:16pt; 字体单位（inch、cm、mm、pt、pc），pc = 12pt，常用pt。 　　3、color:字体颜色。color:#FFFFFF; 颜色统一用RGB格式

在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工作，absolute还需要left，top，right，bottom四个属性的配合，通常，我们会根据阅读顺序(从左到右，从上到下)的需要，设置absolute元素的left和top值，来达到元素定位的效果，那么，如果仅设置一个方向上的值，会发生什么呢？这里我们不深入探讨这种情形，你只需要知道元素在被设置的方向上保持“绝对定位”的特性，而在另一个（水平或垂直）方向上保持相对定位特性即可。 本节要深入探讨的是absolute的流体特性。说到流体特性，我们应该能很快想到 之类的普通块级元素，实际上，绝对定位元素也具有类似的流体特性，而且在某些情况下比普通块级元素更强大！当然，absolute要实现自身的流体特性是有条件的，给元素直接设置 style="position:absolute;margin:auto;" 外边距的auto属性是不会有任何计算值的。那么，absolute元素才能拥有流体特性呢

position:relative 日常应用的时候一般是设置给 position:absolute; 的父层的, 父层 position:relative; 子层 position:absolute ;的话, 就是依照父层的边界进行定位的, 不然 position:absolute 会逐层向上寻找设置了 position:relative 的元素边界, 直到 body 元素… 比如要实现商品细节图展示的效果，可以使用如下的方法，这个例子很好的解释了position方法的使用。 这个页面中，右侧大的图片所在的 div class="big "需要设置 absolute 的绝对定位，那它的父元素 .box 就必须设置 relative 相对定位。 左侧小图中的红色方块需要随着鼠标移动，因此也需要设置absolute的绝对定位。那么它的父元素 .small 就必须设置 relative 相对定位。 右侧div中的大图片需要随鼠标移动，因此它也需要设置 absolute 绝对定位，而它的父元素 .big 已经是 absolute 绝对定位了，因此大图片的定位是相对 .big 来的。 大图片的坐标（0,0）的位置在右侧div的左上角的位置。 图中红色方块的移动方向和大图片的移动方向是相反并且成比例的。大图片的移动距离是方块移动距离的倍数。 < style type = " text/css