css布局

最新推荐文章于 2025-06-09 22:31:27 发布

weixin_30807779

最新推荐文章于 2025-06-09 22:31:27 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhongqiwei/p/5779243.html

本文详细介绍了CSS中的display属性及其不同值的影响，包括block、none、inline-block等，并解释了float属性的作用及position属性的不同值如absolute、fixed的区别。

display(元素显示模式)

display:block

元素默认显示模式，在不设置任何display属性情况下元素被作为一个块对象占据整行，其他元素不能与它在同一行显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
                display: block;
            }
            .div2 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: yellow;
            }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

display:none(隐藏对象)

设置这个属性的元素在浏览器中被隐藏，其他元素可取代它原本的位置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
                display: none;
            }

            .div3{
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: red;
            }
            .div2 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: yellow;
            }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div3"></div>
    <div class="div2"></div>
</body>
</html>

display:inline-block

与block相反，它允许其他元素在同一行显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
                display: inline-block;
            }
            .div2 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: yellow;
                display: inline-block;
            }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

float(元素浮动)

当元素向左或向右浮动时，元素的显示属性也变化成相当于一个行内元素，个人认为相当于个一个表格的多个同个tr里的td，

在html代码中元素的浮动从上至下依次进行，谁在上谁就先浮动

被设置了float属性的元素会脱离文档流的显示规则，它只能浮动在左边或右边，如果在同一行内浮动的空间不足

则自动转向下一行

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                float: right;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
                
            }
            .div2 {
                float: right;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: yellow;
                
            }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

position(元素定位)

positon:static (默认值，无定位)

positon:absolute(绝对定位)通过脱离文档流来控制定位，以body为父元素来进行定位时：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                position: absolute;
                top: 300px;
                left: 400px;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
                
            }
            .div2 {
                float: right;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: yellow;
                
            }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

position:fixed(固定定位)

固定定位的元素是相对于浏览器来设置的，它在浏览器窗口中的位置始终不变，即使页面被滚动条下拉，

元素也会一直在原来相对的位置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            .div1 {
                position: fixed;
                top: 300px;
                right: 0px;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background: blue;
            }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>