WEB程序设计之CSS（三）_web程序设计css-优快云博客

本文链接：https://blog.youkuaiyun.com/aidpcx/article/details/40554913

本文深入探讨了CSS中的三种定位机制：普通流、浮动和绝对定位。详细介绍了块级框的排列方式，浮动定位的实现原理，以及position属性的四种状态——static、relative、absolute和fixed。通过示例代码解析了不同定位方式的效果，并给出了实际布局的练习题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WEB程序设计之CSS（三）

CSS定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

浮动定位：可以设置元素的float属性为left或right，才设置元素浮动，使得块级元素可以并排显示。

但一定注意，设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

position属性：

static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列

relative

元素框相对于原本的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

absolute

当元素的父对象(或曾祖父，只要是父级对象)parent的position属性不是默认值的情况，此时按照这个parent来进行定位，如果没有这个对象，相对body元素定位

fixed

总是以body为定位对象的，按照浏览器的窗口进行定位

float浮动与清除请参考：

http://www.w3school.com.cn/css/css_positioning_floating.asp

示例1：

盒子定位

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;padding: 0px;
    }
    div{
    width: 100px;height: 100px;
    border: 1px solid #000;
    background: #ccc;
    }
    h1{
    border: 2px solid blue;
    }
    #d2{
    position: relative;
    /*position: absolute;*/
    left: 50px;
    top: 50px;
    /*float: right;*/
    }
    /*#d1{
     
    float: left;
    }
    #d3{
    float: right;
    }*/
    .clear{
    clear: both;
    }
    </style>
    </head>
    <body>
    <h1>
    <div id="d1">盒子1</div>
    <div id="d2">盒子2</div>
    <div id="d3">盒子3</div>
    <p class="clear"></p>
    </h1>
    </body>
    </html></span>

示例2：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;padding:0;}
    h1{
    height: 100px;
    width: 600px;
    background: #ddd;
    border: 1px solid #000;
    font-size: 16px;
    position: relative;
    margin: 0 auto;
    }
    .date{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    right: 0px;
    bottom: 0px;
    }
    </style>
    </head>
    <body>
    <h1>XX理工大学<span class="date">2013年11月28日 星期四<span></h1>
    </body>
    </html></span>

示例3：

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;padding:0;}
    ul{
    margin: 50px;
    padding-left: 50px;
    border-bottom:2px solid #2788da;
    height: 26px;	
    list-style:none;	
    }
    a.home{
    background: #2788da;
    color: #fff;
    }
    ul li{
    float: left;	
    }
    ul li a{
    width: 97px;
    height: 26px;
    line-height: 26px;
    background: #ececec;
    display: block;
    color: #000;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.8em;
    margin-left:2px;
    }
    a:hover{
    background: #bbb;
    color: #fff;
    }
    a.home:hover{
    background: #2788da;;
     
    }
    .english{
    letter-spacing: normal;
    }
    .clear{
    clear: both;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#" class="home">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">参考</a></li>
    <li><a href="#" class="english">Blog</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">联系</a></li>
    </ul>
    </body>
    </html></span>

示例4：

布局

代码如下：

<span style="font-family:SimSun;font-size:18px;">    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;
    padding: 0px;
    }
    h2{
    font-size: 14px;
    padding: 50px;
    }
    .container{
    width: 960px;
    margin: 0 auto;
    border: 1px solid #ddd;
    }
    .header{
    background-color: #ADB96E;
    }
    .sidebar1{
    width: 180px;
    float: left;
    background-color: #EADCAE;
    }
    .content{
    width: 780px;
    float: left;
    }
    .footer{
    clear: both;
    background-color: #CCC49F;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="header">
    <h2>头部</h2>
    <!-- end .header --></div>
    <div class="sidebar1">
    <h2>侧边栏</h2>
    <!-- end .sidebar1 --></div>
    <div class="content">
    <h2>内容区</h2>
    <!-- end .content --></div>
    <div class="footer">
    <h2>页脚</h2>
    <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html></span>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

css作业练习：

做出如图所示的盒子

参考代码：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0px;padding: 0px;
    }
    body{
    background: #4FB3E7;
    }
    #header{
    width: 95%;
    margin: 50px auto;
    }
    #header h1{
    background-color: #AAD9F7;
    border: 8px solid #FFFFFF;
    color: #336FAB;
    font-size: 48px;
    font-family: 宋体;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 6px;
    padding: 10px 35px 10px 10px;
    text-align: right;
    }
    </style>
    </head>
     
    <body>
    <div id="header">
    <h1>某某某的简历</h1>
    </div>
    </body>
    </html>