logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 明天网吧 2014-10-12

标准流/非标准流


 http://blog.csdn.net/mylovestart/article/details/8607202

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

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

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

盒子模型

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

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

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



下面举个盒子模型的案例

my.css

  1. body{  
  2.     /*指定body的宽度,样式,颜色*/  
  3.     border: 1px solid red;  
  4.     width: 800px;  
  5.     height: 1000px;  
  6.     /*0表示上下0,auto表示左右居中*/  
  7.     margin:0 auto;  
  8. }  
  9. .s1{  
  10.     width: 100px;  
  11.     height: 100px;  
  12.     border: 1px solid blue;  
  13.     margin-top: 10px;  
  14.     margin-left:10px;  
  15.     /*padding-top:100px; 
  16.     padding-left:100px;*/  
  17. }  
  18. .s1 img{  
  19.     width:80px;  
  20.     margin-top:5px;  
  21.     margin-left:5px;  
  22. }  

test.html

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

网页打开如图


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

my.css

  1. body{  
  2.     margin:0px;  
  3.     padding:0px;  
  4. }  
  5. .div1{  
  6.     width:400px;  
  7.     height: 400px;  
  8.     border: 1px solid #b4b4b4;  
  9.     margin-left:100px;  
  10.     margin-top:20px;  
  11. }  
  12. /*faceul用于控制显示图片区域的宽度和高度*/  
  13. .faceul{  
  14.     width:350px;  
  15.     height:350px;  
  16.     border: 1px solid red;  
  17.     list-style-type: none;  
  18. }  
  19. /*控制单个图片区域*/  
  20. .faceul li{  
  21.     width: 80px;  
  22.     height: 90px;  
  23.     border:1px solid blue;  
  24.     float: left;/*左浮动*/  
  25.     margin-left:15px;  
  26.     margin-top: 15px;  
  27. }  
  28. .faceul img{  
  29.     width:60px;  
  30.     margin-left:5px;  
  31.     margin-top: 5px;  
  32. }  
  33. .faceul a{  
  34.     font-size: 12px;  
  35.     margin-left:15px;  
  36. }  
  37. a:link{  
  38.     text-decoration:none;  
  39.     color:black;  
  40. }  
  41. a:hover  
  42. {  
  43.     text-decoration:underline;  
  44.     color:red;  
  45. }  

text.html

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>test.html</title>  
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  6.     <meta http-equiv="description" content="this is my page">  
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  8.     <link rel="stylesheet" href="my.css" type="text/css"></link>  
  9.   </head>  
  10.   <body>  
  11.     <div class="div1">  
  12.     <ul class="faceul">  
  13.     <li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>  
  14.     <li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>  
  15.     <li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>  
  16.     </ul>  
  17.     </div>  
  18.     </body>  
  19. </html>  

网页打开如图

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 明天网吧 > 《html》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多