【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