css布局相关知识

来源：互联网发布：机器人编程培训机构编辑：程序博客网时间：2024/05/01 22:11

布局的方式：浮动、定位、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>

0 0