有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是笔者在有段时间内误解一个与本文有关的知识点源于阅读的不小心, 笔者在写本篇文章之前阅读了大量的资料,试图以一种简单易懂的方式把布局的精髓展现给读者: 盒子模型: 所谓盒子模型:把页面上的任何一个元素都看成一个盒子,到底是一个怎么样的盒子,当然这个盒子有自己独特的区别 下面就是盒子的模型图: 边框边距

规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 Margin-right:auto: 定位的盒子剧中 先左右走父元素盒子的一半50%,在向左走盒子的一半(margin-left:负值) 步骤: 设置父盒子为相对定位 / 设置盒子left 值为父盒子宽度一半 / 设置子盒子左边距为自己宽度一半   CSS标签包含规范  规范:     行内元素尽量包

CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结. 在CSS中,每一个元素都由一个矩形盒子所包含.每一个盒子都会具有一个内容区,内容区被一个内边距所包裹,内边距外是盒子的边框,并且在边框之外会有一个外边距用于与其他盒子分隔开来.这些你可以从下面这张图片看到. 定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响.定位模

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们.      一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼容性问题,它就像是re

position定位 position一共有四个可选属性:static/relative/absolute/fixed 代码: <style type="text/css"> * { margin: 0; } .d1 { position:absolute; height:400px; width:400px; background:yellow; left:80px; top:80px; } .d2 { position:absolute; height:200px; w

1.正常情况,按照顺序,最后的盒子在最上面,默认z-index为02.当使用z-index,数字越大,越优先显示在上面3.注意,只要定位的盒子才可以使用该方法 <body> <div class="box1">注意,只要定位的盒子才可以使用该方法</div> <div class="box2">当使用z-index,数字越大,越优先显示在上面</div> <div class="box3&q

在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我们如何解决这个问题,实现让固定的盒子以版心为参照,在缩放时随版心一同缩放呢? 此时,我们可以先让固定定位的盒子以网页的中心为参照,再利用 margin 移动距离,即可实现网页缩放时随版心一同缩放,这里以左边的固定定位盒子为例 <style> .fixed_box { /* 为了方便将宽高先写上 *

本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍position的四种定位方式:绝对.相对.固定.默认. 3. 总结 position:以示例的方式展示position. 1. 介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发. 元素位置

css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: fixed是固定定位,和absolute定位不同的是,设置为固定定位的元素不会随页面滚动而改变位置,所以经常用在登录框和导航中. relative,相对定位,相对元素原来的位置进行定位.脱离文档流. absolute,绝对定位,需要一个父元素作为参考,并且父元素设置不能为static.如果无父元素则

原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(

元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用css为某个元素指定float浮动或者position定位后,元素的定位将会依情况发生如下改变: 1. 指定float值left/right 行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框. 2. 指定position值relative 可以相对于

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发. 元素位置

框架中,通过链接将一个页面显示在另一个框架中:   总框架: <frameset cols="15%,*">   <frame src="xx.html">   //显示链接所指的页面在框架中[即导航框架]  <frame src="yy.html"  name="fff">     其将中一个框架命名为fff  </frameset>    导航框架所嵌入的链接:      

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css中Position定位属性与层级关系</title> <style type="text/css"> #W{ position: relati

Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixe:对象脱离正常文档流

准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relative,absolute. 第一种:static为div默认,top,left,bottom,right无用. 第二种:fixed为固定定位. 元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动.Fixed定位使元素的位置与文档流无关,因此不占据空间.Fixed定位的元素和其他元素重叠.

关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的? 在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成,有四个可选值,它们分别是:static.absolute.fixed.relative,这里向大家描述一下它的使用. absolute:生成绝对定位的元素,相对于最近一级的定位不是static的父元素来进行