【5/18笔记】主要关于margin负值和display:none，overflow清除浮动

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

margin负值符合W3C的标准

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

margin负值和相对定位（relative）是有区别的

relative是元素相对它本身应该待的位置移动，但是原来的位置 网页还会为元素保留 不会有别的元素填充或者流过来

但是margin负值之后，会有别的元素流过来 

margin-top 设置成负值之后，元素会向上移动 元素下面的元素会补充上来

margin-left设置成负值之后，元素会向左移动

但是margin-bottom设置成负值之后，需要注意，元素不会向下移动，但是元素下面的元素会填充上来

同理margin-left

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

margin-left和margin-right有时候还能改变宽高：

eg:

<div style="background: #c0c0c0;width: 600px;height: 50px;margin: 0 auto;">
    <p style="background: red;">没有设定宽度的子元素</p>
</div>

加上margin的负值：

<div style="background: #c0c0c0;width: 600px;height: 50px;margin: 0 auto;">
    <p style="background: red;margin-left: -100px;margin-right: -100px;">没有设定宽度的子元素</p>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

利用margin负值制作立体字

<div style="background: #c0c0c0;">
    <p style='margin-left: -5px;;font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "黑体";font-size: 50px;font-weight: bold;color: #696969;'>云端高阳，举世无双</p>
    <p style='margin-top: -115px;font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "黑体";font-size: 50px;font-weight: bold;color: #000000'>云端高阳，举世无双</p>
</div>

<div style="background: #c0c0c0;">
    <p style=';font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "黑体";font-size: 50px;font-weight: bold;color: #696969;font-style: italic'>云端高阳，举世无双</p>
    <p style='margin-top: -115px;font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "黑体";font-size: 50px;font-weight: bold;color: #000000'>云端高阳，举世无双</p>
</div>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

实现列表变成三列：

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li class="col2 top">梨</li>
    <li class="col2">西瓜</li>
    <li class="col3 top">火龙果</li>
    <li class="col3">小彤彤</li>
</ul>

<style>
    ul{list-style: none;}
    li{line-height: 30px;}
    .col2{margin-left: 100px;}
    .col3{margin-left: 200px;}
    .top{margin-top: -60px;}
</style>

如果不设置：

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li class="col2 top">梨</li>
    <li class="col2">西瓜</li>
    <li class="col3 top">火龙果</li>
    <li class="col3">小彤彤</li>
</ul>

<style>
    ul{list-style: none;}
    li{line-height: 30px;}
    .col2{margin-left: 100px;}
    .col3{margin-left: 200px;}

</style>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

绝对布局 居中：

-----------------------------------------------------------------------------------------------------------------------------------

关于overflow清除浮动  还没有理解特别透彻

留待以后补充

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

转自：http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html