CSS定位--思鹏代码库

2015/4/17 10:20:32 人评论 次浏览 分类:基础语法

定位的基本思想

CSS(Cascading Style Sheets) 定位 (Positioning) 属性允许你对元素进行定位

它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。


一切皆为框

<1> 块级元素: div、h1或p元素 即:显示为一块内容称之为 “块框“ ;

<2> 行内元素: span,strong,a等元素 即:内容显示在行中称 "行内框";

<3> 使用display属性改变成框的类型

即:display:block; 让行内元素设置为块级元素,display:none; 没有框

相对定位(relative)



概念:如果对一个元素进行相对定位,它将出现在它所在的位置上。通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动

.adv_relative {

position: relative;

left: 30px;

top: 20px;

}


绝对定位(absolute)


概念:元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,它的位置相对于最初的包含块。

adv_absolute {

position: absolute;

left: 30px;

top: 20px;

}

浮动


概念:float 属性定义元素在哪个方向浮动,在 CSS 中,任何元素都可以浮动;

浮动参数列表

描述
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动,并会显示在文本中出现的位置



清除浮动


<div style="clear: both;"></div>

注意:浮动的清除原则为,哪里浮动哪里清除!




共有访客发表了评论 网友评论

验证码: 看不清楚?