成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS之表格邊框合并、兄弟標(biāo)簽外邊距合并、父子標(biāo)簽的外邊距合并

_Dreams / 2936人閱讀

摘要：本文內(nèi)容表格邊框合并兄弟標(biāo)簽外邊距合并父子標(biāo)簽的外邊距合并首發(fā)日期表格邊框合并發(fā)生情況當(dāng)設(shè)置了后，表格的相鄰邊框會(huì)合并，使得邊框變粗了。

本文內(nèi)容：

  • 表格邊框合并
  • 兄弟標(biāo)簽外邊距合并
  • 父子標(biāo)簽的外邊距合并

?

首發(fā)日期：2018-05-01

?

表格邊框合并：

?

發(fā)生情況：

當(dāng)設(shè)置了cellpadding="0" cellspacing="0"后，表格的相鄰邊框會(huì)合并，使得邊框變粗了。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
    table{
        border:1px solid red;
    }
    td{
        border:1px solid red;
    }

    style>
head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
        <tr>
            <td>4td>
            <td>5td>
            <td>6td>
        tr>
    table>
body>
html>

?

解決方案：

  • 在table標(biāo)簽中設(shè)置border-collapse:collapse 【border-collapse是邊框合并的意思?！?/li> 
DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
    table{
        border:1px solid red;
        border-collapse:collapse;
    }
    td{
        border:1px solid red;
    }

    style>
head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
        <tr>
            <td>4td>
            <td>5td>
            <td>6td>
        tr>
    table>
body>
html>

?

?

兄弟標(biāo)簽外邊距合并：

發(fā)生情況：

當(dāng)上下兩個(gè)相鄰的標(biāo)簽都設(shè)置了外邊距時(shí)，那么他們之間的間距不是外邊距之和，而是其中最大的外邊距。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        div:first-child{
            margin-bottom:15px;
            background-color: orange;
        }
        div:last-child{
            margin-top:35px;
            background-color: blue;
        }
    style>
head>
<body>
    <div>123div>
    <div>123div>
body>
html>

?

解決方案：

  • 沒(méi)方法解決，理論上應(yīng)該僅僅設(shè)置一邊的邊距。最好的解決方法就是避免。

父子標(biāo)簽的外邊距合并：

發(fā)生情況：

想使子標(biāo)簽對(duì)父標(biāo)簽有一個(gè)外邊距，但發(fā)生了外邊距合并，子標(biāo)簽的外邊距沒(méi)有作用到父標(biāo)簽，反而合并到父標(biāo)簽對(duì)于其他標(biāo)簽的外邊距中（誰(shuí)大采用誰(shuí)）。

如果父標(biāo)簽沒(méi)有設(shè)置上內(nèi)邊距以及邊框，則父標(biāo)簽和子標(biāo)簽的上外邊距會(huì)合并，合并之后的外邊距為兩者之和。

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
        }
        #son{
            margin-top:200px; /* 最終外邊距為200px */
            background-color: green;
        }
    style>
head>
<body>
    <div id="father">
        <div id="son">123div>
    div>
body>
html>

?

?

解決方案：

  • 給父元素定義上邊框或上內(nèi)邊距
  • 給父元素添加overflow:hidden

?

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        #father{
            margin-top:100px;
            background-color: blue;
            /* border:1px solid red;  方法一 */
            /* padding-top:1px;  第二種方法*/
            overflow:hidden;  /*  方法三 */
        }
        #son{
            margin-top:200px; 
            background-color: green;
        }
    style>
head>
<body>
    <div id="father">
        <div id="son">123div>
    div>
body>
html>

?

?

?

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2312.html

相關(guān)文章

  • CSS盒子模型以及外邊框合并的問(wèn)題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個(gè)盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬(wàn)物基于盒子。雖然外邊距是不可見(jiàn)的，但是我們算元素的總寬度或者總高度的時(shí)候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個(gè)盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬(wàn)物基于盒子。即使一個(gè)小小的元素p，也可以把它抽象成為一個(gè)盒子...

    zacklee 評(píng)論0 收藏0

  • CSS盒子模型以及外邊框合并的問(wèn)題

    摘要：盒子模型我們把布局里面的所有東西都可以想象成一個(gè)盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬(wàn)物基于盒子。雖然外邊距是不可見(jiàn)的，但是我們算元素的總寬度或者總高度的時(shí)候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個(gè)盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬(wàn)物基于盒子。即使一個(gè)小小的元素p，也可以把它抽象成為一個(gè)盒子...

    paulli3 評(píng)論0 收藏0

  • 挖掘margin屬性的內(nèi)涵

    摘要：合并問(wèn)題塊級(jí)元素的上邊距和下邊距有時(shí)會(huì)合并或者折疊為一個(gè)外邊距捕獲到的重要信息只發(fā)生在塊級(jí)元素，但不包括浮動(dòng)元素和絕對(duì)定位元素只發(fā)生在和當(dāng)前文檔流方向的相垂直的方向上由于默認(rèn)文檔流是水平流，因此發(fā)生合并的就是垂直方向會(huì)出現(xiàn)外邊距合并的三種基 1、margin合并問(wèn)題 塊級(jí)元素的上邊距和下邊距有時(shí)會(huì)合并或者折疊為一個(gè)外邊距 捕獲到的重要信息 只發(fā)生在塊級(jí)元素，但不包括浮動(dòng)元素和絕對(duì)定位...

    alanoddsoff 評(píng)論0 收藏0

  • HTML、CSS筆記

    摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。 盒模型 在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。 在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

    frank_fun 評(píng)論0 收藏0

  • HTML、CSS筆記

    摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。 盒模型 在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊 與 內(nèi)容邊。 在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

    Aomine 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<