03-13 块标签浮动 网页布局 绝对定位 相对定位 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
   #fd{ width:100px;
        height:100px;
        float:left;
        background:#039}
  #fd{ width:100px;
    height:100px;
    float:left;
    background:#039}
</style>
</head>

<body>
    <div id="fd"></div>
    <div id="fd1"></div>
</body>
浮动例子 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <style>
      #li{ background:#CCC;
           width:100%;
           height:100px;/*高*/
           line-height:100px;/*行高*/
          }
   </style>
</head>

<body>
  <div id="li">小可爱</div>
</body>
</html>
行高

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <style>
 *{ margin:0 auto;}
 /*a大div  宽  高 相对定位*/
#a{ width:500px;
      height:200px;
      border: 1px solid #000;
      position:relative;
     }
/*b方块 宽  高 相对定位*/
#b{ width:120px;
    height:60px;
    border:1px solid #00C;
    position:absolute;
    top:130px;
    left:370px;}
/*c方块 宽  高 相对定位*/
#c{ width:120px;
    height:60px;
    border:1px solid #00C;
    position:absolute;
    top:230px;
    left:315px;
    z-index:10;
    background:#000}
/*x方块 宽  高 相对定位*/
#x{ width:120px;
    height:60px;
    border:1px solid #00C;
    position:absolute;
    top:8px;
    left:257px;}
/*y方块 宽  高 相对定位*/
#y{ width:120px;
    height:60px;
    border:1px solid #00C;
    position:absolute;
    bottom:20px;
    right:-200px;}
/*z大方块 宽  高 相对定位*/
#z{   width:500px;
      height:200px;
      border: 1px solid #000;
      position:relative;}
 </style>
</head>

<body>
<!--a大div-->
  <div id="a">
  <!--b方块-->
    <div id="b"></div>
   <!--c方块-->
    <div id="c"></div>
  </div>
 <!--z大div-->
  <div id="z">
   <!--x方块-->
     <div id="x"></div>
    <!--y方块-->
     <div id="y"></div>
  </div>

</body>
定位

 

 

Float：浮动

  1.clear：both    要浮动的标签用div包起来，给div设宽高，设行高垂直居中

Line-heiht：行高

  1.行高  默认垂直居中

  2.最好对一行使用，如果换行了  标签高度就变了

浏览器兼容性

  1.将最外层的标签设置高宽，里面用百分比。

盒子模型

  1.从内道外，内容、填充物、边框、和别的物品的距离

  2.内容：html、内边距：padding 、边框：border、外边框：magin

自适应：box-sizing：border-box

  指定宽高、自适应边框、内边距、内容

  overflow : hidden   隐藏超出的内容

  dispaly : block     inline    inline - block   转换元素 ； 比如行内元素转块状元素

  1.dispaly：bock  转换为块标签

  2.dispaly：liline   转换为行标签、

  3.dispaly：liline-block 转换为行内块标签

  布局顺序

  先大色块再小色块再填写内容、（ 高宽要设定 ）、

  定位

  1.position  正确格式     position：定位    （加   top、left、right、buttom）

  2. fixed  绝对定位（相对窗口定位） 自身位置没有了（流氓广告）、

  3.absolute   绝对定位 （相对body）

       他会相对于最近的有position属性的父标签定位   最上层就是body

  4. relative   相对定位   有自身位置，用来微调

  cursor   变小手

  1.cursor： pointer 

  div 分层

  z-index（1-10 ）

 

 

 

 

 

 

   

 

 

   

posted on 2018-03-13 21:51  王保利d窝  阅读(164)  评论(0)  编辑  收藏  举报

导航