【css中的层模型】

层模型的三种形式:绝对定位,相对定位,固定定位

一、绝对定位:(position:absolute)

绝对定位就是将元素从文档中拖出来,然后使用left,right,bottom,top属性相对于其最接近的一个具有定位属性的父包含块进行定位,若不存在包含块,就像对于body元素定位,也就是浏览器窗口。

二、相对定位:(position:relative)

通过left,right,bottom,top属性来确定元素在正常文档流中的偏移位置,偏移后以前的位置保持不变

三、固定定位:(position:fixed)

相对于浏览器窗口定位,本身是固定的,不会受文档流动的影响。

时间: 2024-08-25 17:28:19

【css中的层模型】的相关文章

  Css中的盒模型及盒模型宽度计算

CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素(element box),可以形象地将其看作是一个盒子.CSS围绕这些盒子产生了一种"盒子模型"概念. 盒模型,实际上就是把某些标签元素看成为一个箱子.箱子与其他箱子之间的距离,是箱子的最外围,它不是一条边线而是添加在边框外面的空间.这个外边距使元素盒子之间不必紧凑地连接在一起,是CSS布局的一个重要手段.用margin(外边距)属性来表示,margin-top,margin-right,ma

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边

CSS中的盒模型

网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 原理 先说说我们在网页:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子

CSS中的盒子模型详解

很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和padding的属性都为0px: 本例子采用行内CSS样式! 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

HTML+CSS 中的盒子模型

下图是根据效果图,画的盒子模型. 每一个矩形都是一个div,先把边框显示出来,再往div里面塞内容,再灵活使用html+css,就可以完成下面的效果图的网页布局. (1)盒子模型图. (2)效果图

css中的盒子模型

1.定义:一个盒子由外到内可以分成四个部分:margin(外边距).border(边框).padding(内边距).content(内容): 2.浏览器兼容问题: 根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的.不幸的是, IE5.X 和 6 在怪异模式中使用自己的非标准模型.这些浏览器的 width 属性不是内容的宽度,而是内容.内边距和边框的宽度的总和. 解决方法:虽然有方法解决这个问题.但是目前最好的解决

CSS中box-sizing属性的理解与部分用法

今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分为两派,一派是W3C的标准模型,一派是IE的传统模型.那它们之间有什么不同的呢?首先需要明确它们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系:而不同的地方就在于两者的计算方法不一至:(下面引用一些公式向大家展示一下两者的

CSS层模型中的绝对定位 相对定位 固定定位

1.绝对定位:元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的恶意个具有定位属性的父包含块进行绝对定位.如果不存在这么一个元素,则相对于body元素而言,也就是说相对浏览器而言. 2.相对定位:元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档

CSS:3种基本的布局模型、层模型的三种形式

CSS包含3种基本的布局模型: 用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer) 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%. 第二点,在流动模型下,内联元素都会在所处的