補漏-1

時間 2019-11-09

標籤補漏简体版

原文原文鏈接

HTML5文檔類型聲明？

<!DOCTYPE html>，注意歎號和後面不留空格。

必須寫文檔類型聲明，不寫的話每每會讓瀏覽器工做在混雜模式。

兼容性：全兼容（包括IE6）。

內聯樣式和外聯樣式？

用style屬性寫在標籤內的是內聯樣式，好比：

<h1 style="color:#F00">猜猜是什麼顏色？</h1>

外聯樣式用link標籤引入，好比：

<link rel="stylesheet" type="text/css" href="css/base.css">

內聯樣式的優先級較高。

使用外聯樣式的優勢是表現與結構分離，便於維護，代碼重用。

那內聯樣式的使用情景是什麼呢？當特殊的樣式須要應用到個別元素時，就可使用內聯樣式。

選擇器優先級？

優先級逐級增長的選擇器列表：

通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
僞類
ID 選擇器
內聯樣式
!important

讓一段文本垂直居中的辦法？

若是父元素高度不肯定，能夠給父容器設置相同的上下內邊距。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            border: 1px solid #000;
            padding: 50px 0;
        }
    </style>
</head>
<body>
    <div>
        <p>
            父級高度不肯定
            多行文本垂直居中
        </p>
    </div>
</body>
</html>

 
    若是父級元素高度肯定的話，使用vertical-align:middle;，由於只有元素爲th或td的時候才能使用，因此才能對塊級元素使用display:tabel-cell，注意不兼容IE6和IE7。 
   

 
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            border: 1px solid #000;
            height: 300px;
            display: table;
            width: 200px;
        }
        p{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <p>
            父級高度不肯定
            多行文本垂直居中
        </p>
    </div>
</body>
</html> 
    