position
常用的值有none、inline、block、inline-block
none
1.表示该元素不会显示,并且该元素的空间也不存在,可理解为已删除;
2.visibility:hidden只是将元素隐藏,但不会改变页面布局,但也不会触发该元素已经绑定的事件;
3.opacity:0,将元素隐藏,不会改变页面布局,但会触发该元素绑定的事件。
inline
1.内联元素,与其他元素在一行;
2.不可设置宽高;
3.margin-top与margin-bottom无效,但margin-left与margin-right有效;
4.padding-left与padding-right同样有效,但是padding-top与padding-bottom不会影响元素高度,会影响背景高度;
5.常见的有<a>、<span>、<i>、<em>、<strong>。
block
块级元素,常见的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>
inline-block
1.行内块元素,即是内联元素,又可设置宽高以及行高及顶和底边距;
2.常见的有<img>、<input>display
常用的值有static、relative、absolute、fixed。
static
默认值,元素出现在正常的文档流中,不会受left、top、right、bottom的影响。
relative
相对定位,相对自身位置定位,可通过设置left、top、right、bottom的值来设置位置;
并且它原本所占的空间不变,即不会影响其他元素布局;
经常被用来作绝对元素的容器块。
absolute
绝对定位,相对于最近的除static定位以外的元素定位,若没有,则相对于html定位;
脱离了文档流,不占据文档空间;
若设置absolute,但没有设置top、left等值,其位置不变;
若设置absolute,会影响未定义宽度的块级元素,使其变为包裹元素内容的宽度。
fixed
固定定位 相对于浏览器窗口定位,脱离文档流,不会随页面滚动而变化。
position和display的取值及用法
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...