首页 > 代码库 > CSS自学笔记（7）:CSS定位

CSS自学笔记（7）:CSS定位

2024-07-14 17:15:21   224人阅读

很多时候，我们需要对一些元素进行自定义排序、布局等，这是就需要用到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;}

浮动































        

            
                
                  
                
                

                    联系

                    我们