您的位置：首页 > Web前端 > CSS

css布局相关知识

2014-07-23 08:47 561 查看

布局的方式：浮动、定位、margin。

       浮动：改变元素在文档流中的实际物理位置，来达到浮动的效果。

    <!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style type="text/css">

      .divcss5{float: left; width:400px;padding:10px;border:1px solid #F00}

      .divcss5_left{ float: left; width:150px;border:1px solid #00F;height:50px}

      .divcss5_right{float: left; width:150px;border:1px solid #00F;height:50px}

      .clear{

       clear: both;

      }

      .div{

         width: 450px;

         height: 200px;

         border: 1px solid red;

      }

   </style>

</head>

<body>

   <div class="div">

   <div class="divcss5">

   <div class="divcss5_left">布局靠左浮动</div>

   <div class="divcss5_right">布局靠右浮动</div>

   <div class="clear">AAA</div>

   </div>

   </div>

</body>

</html>

定位：

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>定位</title>

   <style type="text/css">

   .d{

      border: 1px solid red;

      width: 400px;

      height: 300px;

      position: relative;

      top: 99px;

      left: 500px;

   }

   .d1{

      position: relative;/*相对定位会按照元素的原始位置对该元素进行移动*/

      border: 1px solid blue;

      width: 150px;

      height: 100px;

      top: 10px;/*相对于原始位置向下移动10个像素*/

      left: 20px;/*相对于原始位置向右移动10个像素*/

   }

   /*绝对定位使元素脱离文档流，因此不占据空间

       。普通文档流中元素的布局就当绝对定位的元素不存在时一样。

       因为绝对定位的框与文档流无关，

       所以它们可以覆盖页面上的其他元素。*/

   .d2{

      position: absolute;

      left: 40px;

      top: 50px;

      border: 1px solid red;

      width: 100px;

      height: 90px;

   }

   </style>

</head>

<body>

   <div class="d">

      <div class="d1">相对定位</div>

      <div class="d2">绝对定位</div>



   </div>

</body>

</html>

盒模型：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>盒模型</title>

<style type="text/css">

.pbm{

width: 300px;

height: 300px;

border: 10px solid red;/*在原有的边框外增加边框的宽度,所以border会增加

    布局的宽高。

*/

padding: 10px;/*上、右、下、左的顺序分别设置各边的内边距,

                百分数值是相对于其父元素的 width 计算的

                 内边距（padding）会增加内容所在布局的宽高。*/

        margin: 10px;/*外边距是相对于父元素的左上角做相对的移动*/

}

   </style>

</head>

<body>

<div class="pbm">

  ppppp

</div>

</body>

</html>

margin双边距合并问题：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

   /*

   在一个问题就是垂直双编剧的合并问题。

   当两个垂直的双边距相遇时，它们将形成一个边距，

   合并后的边距等于发生合并的边距的较大值

   */

    .box{width:200px;height:120px;

    margin:0 auto;background:#FFC;

          }

    .d1,.d2{

    height:40px;width:100%;

    }

    .d1{

    background:#f00;

    margin-bottom:20px;

    }

    .d2{

    background:#0033CC;

    margin-top:10px;

    }

    </style>

</head>

<body>

    <div class="top" style="height:100px;width:100%;">AAAA</div>

    <div class="box">

      <div class="d1">D1</div>

      <div class="d2">D2</div>

    </div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 布局 css 文档移动注释

相关文章推荐

新的分享

章节导航