CSS布局常用属性_css布局属性有哪些-优快云博客

定位属性

盒子的定位涉及盒子的类型，盒子可分为块内元素和行内元素，在CSS中通过display属性来设置盒子的块内元素还是行内元素。作为块内元素的盒子，例如<div>，<p>，HTML规定上下排列，如果是行内元素则左右排列。

使用position属性可以精确的控制盒子的位置，语法格式如下：

position:static| relative | absolute | fixed

static:静态定位，默认的定位方式，盒子按照HTML规则定位，定义top、left、bottom、right无意义。
relative：相对定位，通过top、left、bottom、right等属性值定位元素相对其原本显示位置的偏移，占用原位置空间。
absolute：绝对定位，通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置，释放原来占用的空间。
fixed：固定定位，通过top、left、bottom、right等属性值定位盒子相对浏览器窗口的偏移位置。

1.静态定位

设置position的属性值为static，或省略。来看一个简单例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #st{
                width: 250px;
                height: 250px;
                border: medium #00c double;
            }
        </style>
    </head>
    <body>
        <div id="st">
            <div><img src="ppp.jpg" width="140" height="120px" /></div>
            <div><img src="ooo.jpg" width="140" height="120px" /></div>
        </div>
    </body>
</html>

上面一段代码就是静态定位的应用，我们对3个元素都未设置定位属性，默认就是static定位。

2.相对定位

相对定位我们可以在#st样式中添加一段代码：

position:absolute;
left:100px;top:50px;

在<style>中在添加一个样式:

#st1{
position:relative;
left:50px;top:50px;
}

在后面的<body>块中应用这两个样式，这时方框左侧留出来100px，即向右移动了100px，效果就变成了这样

3. 绝对定位

设置position属性值为absolute时就是绝对定位，用来设置盒子相对其具有position设置的父对象进行定位，绝对定位的元素浮于页面之上，不占用原页面空间，后续元素不受其影响，填充其原有位置。

<body>
        <div id="st">
            <div><img id="st1" src="ppp.jpg" width="140" height="120px" /></div>
            <div><img src="ooo.jpg" width="140" height="120px" /></div>
        </div>
    </body>

4.层叠定位属性

前面我们看见被定位的元素会有遮挡，层叠属性用来控制那个元素在最上面的属性，语法

z-indx;

取值大小表示层叠关系，越大的值越在上面。

浮动属性

浮动属性可以控制盒子的浮动，直到边界碰到父对象或另一个浮动对象，语法如下。

float：none | left | right ；

属性含义如下：

none：默认值，元素不浮动。
left：元素向父元素的左侧移动。
right：元素向父元素的右侧移动。

1.基本浮动定位

设置了向左或向右浮动的盒子，整个盒子会做相应的浮动，来看看例子更好理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        .fleft{
            float: left;
        }
        </style>
    </head>
    <body>
        <div id="st">
            <div class="fleft"><img src="132.jpg"></div>
            <div><img src="ppp.jpg" width="140" height="120px" /></div>
            <div><img src="ooo.jpg" width="140" height="120px" /></div>
        </div>
    </body>
</html>

大家可以跑一跑这个程序，改变每张图片的浮动属性，可以更好的理解浮动属性。