CSS 雜談

CSS 雜談

文檔流 Normal Flow

  • 流動(dòng)是默認(rèn)的網(wǎng)頁布局形式。也就是說在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的
  • 流動(dòng)布局模型具有兩個(gè)比較典型的特征：
    • 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，每個(gè)元素另起一行
    • 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)自左到右水平分布顯示，寬度不夠就換行

寬高如何確定

  • 內(nèi)聯(lián)元素 inline
    • 占的寬：內(nèi)容、左右padding、左右margin
    • 占的高：line-height、font-size。如果設(shè)置了上下的填充、間距，對(duì)行內(nèi)元素的邊框、背景色會(huì)有影響，但不影響布局
    <style type="text/css">
    body {
        font-size: 0;
    }

    span {
        /* 
        內(nèi)聯(lián)元素之間的間距問題：當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時(shí)就會(huì)出現(xiàn)空隙
        解決辦法：
            1. 寫在一行，之間不要有空格之類的符號(hào)
            2. 使用 font-size。設(shè)置內(nèi)聯(lián)元素的父元素字體大小為 0，然后設(shè)置內(nèi)聯(lián)元素字體大小 
        */
        font-size: 15px;
        border: 1px solid green;
    }

    span:nth-child(1) {
        line-height: 100px;
        font-size: 30px;
        /*padding: 40px 0;*/
    }
    </style>
</head>
<body>

<span>文字文字文字文字文字文字</span>
<span>文字文字文字文字文字文字</span><br>
<span style="background-color: pink">文字文字文字文字文字文字</span>

</body>
  • 塊狀元素 block
    • 內(nèi)容寬度：父元素的內(nèi)容區(qū)域的寬度 - 自己的左右邊框 border - 自己的左右填充 padding - 自己的左右 margin；可以通過 white-space 控制是否換行
    • 內(nèi)容高度：它內(nèi)部文檔流中元素的高度的總和
    <style type="text/css">
    div {
        border: 10px solid red;
    }

    .contain {
        width: 300px;
        border-color: lightgreen;
    }

    .contain > div:nth-child(1) {
        /* 寬度 %：定義基于包含塊（父元素）寬度的百分比寬度／高度 */
        width: 100%;   
        /* 
        不要設(shè)置 width: 100%; 很容易出問題
        widtd 的默認(rèn)值為 auto，它會(huì)自動(dòng)計(jì)算的
        */
    }
    </style>
</head>
<body>

<div class="contain">
    <div>文字文字文字文字文字文字</div>
    <div>文字文字文字文字文字文字</div>
    <div>文字文字文字文字文字文字</div>
</div>

</body>
  • 內(nèi)聯(lián)塊狀元素 inline-block
    • 寬：內(nèi)容決定寬度，也可以設(shè)置 width?？梢酝ㄟ^ white-space 控制是否換行
    • 高：它內(nèi)部文檔流中元素的高度的總和。也受 line height、font size 的影響
    • 在實(shí)際工作中，使用 block 或 float（注意要清除浮動(dòng)） 或 flex，不要使用 inline-block
    <style type="text/css">
    /*
    使用 inline-block 元素的時(shí)候，常會(huì)遇到兩個(gè) bug：
    1. 兩個(gè)inline-block 元素之間如果有空格、回車、tab，那么在頁面上就有一個(gè)空隙
       解決辦法：將父元素的 font-size 設(shè)置為 0，然后在 inline-block 元素中將 font-size 設(shè)置為需要的大小 

    2. 兩個(gè)不同高度的 inline-block 元素?zé)o法對(duì)齊，或者下面無緣無故多出幾像素
       解決辦法：改變 inline-block 元素的 vertical-align，一般改為 top 或 middle
    */
    .box {
        font-size: 0;
        background-color: lightblue;
    }

    .box > img {
        vertical-align: top;
        width: 100px;              
    }
    </style>
</head>
<body>
<div class="box">
    <\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
    <\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>

居中（水平、垂直）

文檔流中的元素

水平居中

  • 內(nèi)聯(lián)元素：在父元素身上加 text-align: center;

  • 塊級(jí)元素：

    • 固定寬度的div
      • margin-left: auto;
      • margin-right: auto;
    • 不固定寬度的 div
      • margin: 0 100px;
    <style type="text/css">
    .box {
        text-align: center;
        background-color: lightblue;
    }

    .box > div {
        /* 通過設(shè)置 margin 來居中 */
        margin: 0 100px;
        border: 1px solid red;
    }
    </style>
</head>
<body>

<div class="box">
    <span style="border: 1px solid black;">行內(nèi)元素行內(nèi)元素行內(nèi)元素</span>
    <div>塊狀元素塊狀元素塊狀元素</div>
</div>

</body>

垂直居中

  • 內(nèi)聯(lián)元素：
    • 在父元素上加 line-height（自己身上加也可以）
    • 在父元素上加 padding: 100px 0;
    • 或兩者同時(shí)使用
  • 塊級(jí)元素
    • 在父元素上加 padding: 100px 0; 
    <style type="text/css">
    .box {
        padding: 100px 0;
        background-color: lightblue;
        /*line-height: 300px;*/

    }

    .box > span {
        line-height: 300px;
    }
    </style>
</head>
<body>

<div class="box">
    <!-- <span style="border: 1px solid black;">行內(nèi)元素行內(nèi)元素行內(nèi)元素</span> -->
    <div style="border: 1px solid red;">塊狀元素塊狀元素塊狀元素</div>
</div>

</body>

不在文檔流中的元素

  • 浮動(dòng)元素居中 float
    • 浮動(dòng)元素脫離普通流，然后按照指定方向，向左或者向右移動(dòng)，碰到父級(jí)邊界或者另外一個(gè)浮動(dòng)元素停止
    • 讓浮動(dòng)元素居中這個(gè)需求就不太合理
  • 絕對(duì)定位
    • top: 50%; left: 50%; margin-left: - 寬度的一半; margin-top: - 高度的一半
    • top: 50%; left: 50%; transform: translate(-50%,-50%) （CSS 3 屬性）
    • 兼容性最好的垂直居中：table
    <style type="text/css">
    .parent {
        position: relative;
        height: 300px;
        border: 1px solid red;
    }

    .parent > .child {
        position: absolute;
        width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid lightgreen;
    }

    table,
    .table
    {
        width: 500px;
        height: 300px;
        margin-top: 30px;
        border: 1px solid red;
    }

    table .child,
    .table .child
    {
        width: 200px; 
        margin: 0 auto; 
        border: 1px solid lightgreen;
    }

    .table {
        display: table;
    }

    .tr {
        display: table-row;
    }

    .td {
        display: table-cell;
        vertical-align: middle;
    }
    </style>
</head>
<body>

<div class="parent">
    <div class="child">
        文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字
    </div>
</div>

<table>
    <tr>
        <td>
           <div class="child">
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
            </div> 
        </td>
    </tr>
</table>

<div class="table">
    <div class="tr">
        <div class="td">
            <div class="child">
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字
            </div>
        </div>
    </div>
</div>

</body>

布局（一欄、兩欄、三欄）

IE: float
非IE： flex

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評(píng)論 1贊 92
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 1,127評(píng)論 0贊 1
  • Html 標(biāo)簽 斜體 粗體 單獨(dú)的樣式 引用文本 長(zhǎng)文本引用 換行 空格 分割線 地址信息 單行代碼 多行代碼 無...
    SunnySky_閱讀 619評(píng)論 0贊 5
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。下面我們來看一個(gè)例...
    張文靖同學(xué)閱讀 1,377評(píng)論 0贊 3
  • 本文主要是起筆記的作用，內(nèi)容來自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,750評(píng)論 0贊 30

友情鏈接更多精彩內(nèi)容