标准流,非标准流,盒子模型

MauerSu

浏览: 514577 次
性别:
来自: 北京

最近访客更多访客>>

ahua186186

stevenyj

xutao2811

zaghost

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
HTML

源：http://blog.csdn.net/mylovestart/article/details/8607202
评：
标准流/非标准流

流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式

标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现

非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列

盒子模型

在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)

注意margin是指两个元素之间的距离

CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏

下面举个盒子模型的案例

my.css

[css] view plaincopy

    body{
        /*指定body的宽度,样式,颜色*/
        border: 1px solid red;
        width: 800px;
        height: 1000px;
        /*0表示上下0,auto表示左右居中*/
        margin:0 auto;
    }
    .s1{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        margin-top: 10px;
        margin-left:10px;
        /*padding-top:100px;
        padding-left:100px;*/
    }
    .s1 img{
        width:80px;
        margin-top:5px;
        margin-left:5px;
    }

test.html
[html] view plaincopy

    <!DOCTYPE html>
    <html>
      <head>
        <title>test.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="my.css" type="text/css"></link>
      </head>
      <body>
         <div class="s1"><img src="images/1.jpg"></div>
        </body>
    </html>

网页打开如图

再写一个例子,实现多个图片的显示,图片下有链接

my.css
[css] view plaincopy

    body{
        margin:0px;
        padding:0px;
    }
    .div1{
        width:400px;
        height: 400px;
        border: 1px solid #b4b4b4;
        margin-left:100px;
        margin-top:20px;
    }
    /*faceul用于控制显示图片区域的宽度和高度*/
    .faceul{
        width:350px;
        overflow:auto    /*原文这里没有说清楚原文： height:350px; */
        border: 1px solid red;
        list-style-type: none;
    }
    /*控制单个图片区域*/
    .faceul li{
        width: 80px;
        height: 90px;
        border:1px solid blue;
        float: left;/*左浮动*/
        margin-left:15px;
        margin-top: 15px;
    }
    .faceul img{
        width:60px;
        margin-left:5px;
        margin-top: 5px;
    }
    .faceul a{
        font-size: 12px;
        margin-left:15px;
    }
    a:link{
        text-decoration:none;
        color:black;
    }
    a:hover
    {
        text-decoration:underline;
        color:red;
    }

text.html
[html] view plaincopy

    <!DOCTYPE html>
    <html>
      <head>
        <title>test.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="my.css" type="text/css"></link>
      </head>
      <body>
        <div class="div1">
        <ul class="faceul">
        <li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
        <li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
        <li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
        </ul>
        </div>
        </body>
    </html>

网页打开如图

分享到：

li浮动时ul自动适应高度方法 | DIV+CSS两种盒子模型

2013-12-22 22:26
浏览 491
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论