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 ）

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