绝对定位

一.position属性定位网页元素 1.static ：默认值，没有定位。按照标准文档流的方式提现出来 2.relative：相对定位，相对于自身元素原来的位置进行定位 <style type="text/css"> .div01{ position: relative; top: -20px; left: 20px; } </style> 注意：当top的值为正值时向下移动 当为负值时向上移动 当left的值为正值时向右移动 当为负值时向左移动 相对定位的规律： 1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 3.设置相对定位的盒子原来的位置会被保留下来 3.absolute:绝对定位 绝对定位的规律： 1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 4.元素位置发生偏移后，它原来的位置不会被保留下来 <style type="text/css"> .father{ position: relative; } .div02{ position: absolute; left: 20px; } <

一.position属性定位网页元素 1.static ：默认值，没有定位。按照标准文档流的方式提现出来 2.relative：相对定位，相对于自身元素原来的位置进行定位 <style type="text/css"> .div01{ position: relative; top: -20px; left: 20px; } </style> 注意：当top的值为正值时向下移动 当为负值时向上移动 当left的值为正值时向右移动 当为负值时向左移动 相对定位的规律： 1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 3.设置相对定位的盒子原来的位置会被保留下来 3.absolute:绝对定位 绝对定位的规律： 1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响 4.元素位置发生偏移后，它原来的位置不会被保留下来 <style type="text/css"> .father{ position: relative; } .div02{ position: absolute; left: 20px; } <

Static定位 HTML元素的默认，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到top/bottom/left/right影响 Fixed定位 元素的位置 相对于浏览器窗口 是固定位置。 即使窗口是滚动的也不会移动 也就是说Fixed的元素位置是相对于浏览器窗口的 注意： Fixed定位在IE7/IE8下需要描述！DOCTYPE才能支持。 Fixed定位使元素的位置与文档流无关，因此 不占据文档流空间 。 Fixed定位的元素和其他元素重叠。 Relative定位 相对定位元素的定位是相对其正常位置。如： HTML: <div class="panel">1</div> <div class="panel">2</div> <div class="panel">3</div> <div class="panel pl">4</div> <div class="panel">5</div> CSS: .panel{ height:50px; border:1px dashed red; width:200px; background-color:#ccc; } .pl{ position:relative; left:100px;//相对原来位置往右偏100px top:30px;//相对原来位置往下偏30px background-color:#808080; }

有些css属性虽然经常再用，但是基本概念久而久之却忘了。。。这篇博客就是一个笔记，时常回来看看，争取做到概念与运用都很熟练。 1、固定定位(fixed | absolute) 这两种定位方式都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。不同的是 fixed 是根据浏览器窗口的左上角为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。而 absolute 参照的位置是离当前元素最近的定位方式为 fixed、absolute、relative 的祖先元素的左上角。 2、浮动：(float:left | right) CSS中的定位机制有：普通流，浮动，绝对定位(暂时不讨论) (1)普通流：很多人和文章称之为文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流(normal flow)。现实中大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。 (2)浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（"高度塌陷

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。 1、flex 大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。 <div class="wrapper flex-center"> <p>horizontal and vertical</p> </div> .wrapper { width: 300px; height: 300px; border: 1px solid #ccc; } .flex-center { display: flex; justify-content: center; align-items: center; } 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 利用到了 2 个关键属性：justify-content 和 align-items，都设置为 center，即可实现居中。

CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。 2.CSS的优势 内容和表现分离 网页结构表现统一，可以实现复用 外 样式十分的丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录！ 3.CSS的发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式：把CSS样式嵌入到html标签当中，类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式，缺点：不利于样式重用 2.内部样式：在head标签中使用style标签引入css <style> h1 { color : green ; } <

知识导航： 何为定位 定位的分类及其特点 定位应用 定位是否也改变显示模式 1. 何为定位 分别看下面的效果图： 图一 图二 像图一左下角的 可以随着页面的滚动 ，但 自身位置可以保持在浏览器可视位置相对不变 的小导航栏；图二 压在轮播图上边 的几个小圆点。这两种效果使我们前几篇所用技术无法办到的。 也许你会想浮动也可以使盒子脱标，压在其标准流盒子的上方。但这里我很遗憾的告诉你， 浮动的盒子是无法压住图片和文字的 。 定位的重要性油然而生。 详解： 定位也是用来布局的，他有两部分组成。 定位模式、边偏移 先说边偏移： 简单来说我们定位的盒子，是通过边偏移来移动位置的。定位的盒子有了边偏移才有了价值 边偏移属性 示例 描述 top top: 80px 顶端 偏移量，定义元素相对于其父元素 上边线的距离 。 bottom bottom: 80px 底部 偏移量，定义元素相对于其父元素 下边线的距离 。 left left: 80px 左侧 偏移量，定义元素相对于其父元素 左边线的距离 。 right right: 80px 右侧 偏移量，定义元素相对于其父元素 右边线的距离 定位模式 在 CSS 中，通过 position 属性定义元素的 定位模式 ，语法如下： 选择器 { position: 属性值; } 值 语义 static 静态 定位 relative 相对 定位

1.table布局 优点：表格中的内容可以自动居中，也加入了 display：table;dispaly:table-cell 来支持 teble 布局（让标签元素以表格单元格的形式呈现，使元素类似于td标签） 缺点： table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)。 2.流动布局（Flow 默认的） 对于块级元素来说，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 （每一个便签都显示着自己本来默认的那个宽高） 在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 3.float浮动布局 首先，什么是浮动？ 浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。 那么它有什么特点呢 对自身的影响 float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高 浮动元素的位置尽量靠上 尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求

准备前的知识： 定位只对块级起作用。如div,p等元素是块级元素，如果是内联元素则可以先变成块级元素，display:block即可。 开始讲解: 定位共四种：static,fixed,relative,absolute. 第一种:static为div默认，top,left,bottom,right无用。 第二种:fixed为固定定位。 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动. Fixed定位使元素的位置与文档流无关，因此不占据空间 。Fixed定位的元素和其他元素重叠。 第三种：relative为相对定位 相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的 内容和相互重叠的元素，它原本所占的空间不会改变 。 第四种：absolute为绝对定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: absolute 定位使元素的位置与文档流无关，因此不占据空间 。 absolute 定位的元素和其他元素重叠。 总结： 序列 position定位属性 是否占空间 是否与元素重叠 1 fixed 不占　　 重叠 2 relative 占　　 可以控制top,left与其他元素重叠 3 absolute 不占 重叠 常用技巧： relative与absolute配合使用:

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于 CSS3 新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。 代码如下： 文档代码： [html] view plain copy <!DOCTYPE html > < html > < head > < meta charset= "UTF-8" > < title >layout_box </ title > < link rel= "stylesheet" type= "text/css" href= "../css/layout_box.css" > </ head > < body > < h3 >实现三列宽度自适应布局 </ h3 > < div id = "left" >我是左边 </ div > < div id = "right" >我是右边 </ div > < div