CSS自学笔记(7):CSS定位

很多时候,我们需要对一些元素进行自定义排序、布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序、布局等操作,可以改变浏览器默认的死板的排序。

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

CSS的定位(position)属性有四种不同的定位类型,从而影响元素框的声称方式。

CSS 内边距属性

属性 描述 备注
static 元素框正常生成
  • 块级元素生成一个矩形框,作为文档流的一部分。
  • 行内元素则会创建一个或多个行框,置于其父元素中。
relative 元素框偏移某个距离 元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 元素框从文档流完全删除,并相对于其包含块定位
  • 包含块可能是文档中的另一个元素或者是初始包含块。
  • 元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
  • 元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。  

CSS的定位机制:普通流,浮动,定位

1.普通流

普通流中的元素框的位置是由(X)HTML中的位置决定的。

块级元素从上到下依次排列。

框之间的垂直距离有框的margin属性计算得到,行内元素在一行中水平布局。

2.定位

定位有相对定位绝对定位之分。

相对定位,就是要定位的元素会(相对于普通流中的位置)偏移某个距离,元素仍保持其未定位以前的形状,它原本所占用的空间继续保留。移动元素可能会覆盖其他元素。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

绝对定位,就是将要定位的元素框从普通流中完全删除,并相对与其包含块(可能是文档中另一个元素或者是初始包含块)定位。该元素原先在普通流中所占用的空间会关闭。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

注:绝对定位与普通流无关,所以它可以覆盖页面上的其他元素,这时可以通过设置z-index属性来控制这些框的堆放次序。

3.浮动

浮动,可以左右移动元素框,只得到它的边缘碰到包含框或者另一个浮动框为止。浮动的框脱离了普通流。

如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”

在CSS中,我们可以通过float属性来完成浮动效果。

浮动的效果可以用在很多元素中

div{
  float:right;
  width:120px;
  margin:0 0 15px 20px;
  padding:15px;
  border:1px solid black;
  text-align:center;
}

使段落的首字符浮动于左侧,并向这个字符添加样式

span{
  float:left;
  width:0.7em;
  font-size:400%;
  font-family:algerian,courier;
  line-height:80%;
}

也可以用浮动效果来完成一列具有超链接的菜单

ul{
  float:left;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}
a{
  float:left;
  width:7em;
  text-decoration:none;
  color:white;
  background-color:#06C;
  padding:0.2em 0.6em;
  border-right:1px solid white;
}

CSS自学笔记(7):CSS定位,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。