position:absolute display:block

positon 与 display 的相互关系

元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height。

relative : 原来是什么类型的依旧是什么类型。

absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位

<span style=”position:absolute; width:100px; height:50px;”>span</span>这是完全正确的,

<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>,这里的display:block就是多余的了。

时间: 2024-10-05 13:46:37

position:absolute display:block的相关文章

CSS中的 position::absolute和position:relative

在CSS2.0 HandBook上的解释是: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为

display:table的几个用法

DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比如以下两种情况: 一.父元素宽度固定,想让若干个子元素平分宽度 通常的做法是手动设置子元素的宽度,如果设置百分数不一定能整除,设置具体的数值又限制了父元素的宽度固定,很烦. 可以使用display:table来解决: .parent{display: table; width: 1000px;} .

css position: relative | absolute | static | fixed详解

static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位) 这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index进行层次分级. CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外边距( margin )

position:absolute width

position:absolute; left:0px; right:0px; top:0px; bottom:0px; 设置布满整个父范围,设置了absolute的元素可以通过以上4个属性来展开面,relative的不行 position:absolute;可以实现面拉伸,定位的效果 position是相对于最外层边界,这个边界不包括是除掉margin与border的部分 width是指内容区域 position:absolute; left:0px; right:0px; width:100

导航position:absolute

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航position:absolute</title> <style type="text/css">

IE6 下关于Position:absolute;属性对同级元素的影响问题

今天小码哥做一个专题页面的时候,碰到一个关于IE6下position:absolute:属性对同级元素的margin属性有影响的问题.虽然,作为前端人员,IE6下的Bug问题,始终让人头疼不已.但生活在Zhong国的码民们只能继续忍受. 言归正传,是什么问题呢? 即:假如在一个设有position:relative:相对定位属性的div盒子里,同时放另外两个div块级元素layer2,layer3.layer2设有position:absolute:属性,layer3设有margin:30px

CSS里面position:relative与position:absolute 区别

position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置.position:relative是相对定位,是相对于前面的容器定位的.这个时候不能用top left在定位.应该用margin.比如: 当1固定了位置.1的样式float:left;width:100px; height:800px;2的样式为float:left; pos

display:block

对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过.===========================多罗嗦一句:display:block:比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width.height等和长宽相关的css属性时会发现完全不生效.你可以实际写几行简单代码感受一下.===============

里面的div没有设置宽高,用padding设置的50px来撑开宽高,这个时候就需要用position:absolute或者relative来让文本去掉继承的外层的整宽度

1. <!DOCTYPE html><html><head><style>*{margin:0px;padding:0px;}#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;} #div2{padding:50px;position: absolute;border: 1px solid black;b