05_CSS入門和高級技巧(3)

時間 2019-11-20

標籤 css 入門高級技巧欄目 CSS 简体版

原文原文鏈接

上節課複習

!important不能影響就近原則，遠的標籤若是加上!important也幹不過近的標籤！css

!important不能影響繼承權重是0，經過繼承的標籤加上!important也幹不過直接選中的標籤！html

盒模型

網頁中的全部標籤都是盒子，都是矩形，都有width、height、padding、border、margin屬性的。
最重要的一個知識點，就是width和真實寬度的關係。瀏覽器

1.會看懂盒模型圖

div{
    width: 200px;
    background-color: greenyellow;
    padding: 20px;
    border:30px solid red;
}

也就說，padding、border都是外擴的。ui

2.padding內邊距

padding就是內邊距，指的是邊框內側到內容的距離。
padding的設置有不少方法
padding:50px;設置四個方向的padding都是50px;spa

四個值：
padding:10px 20px 30px 40px;等價於單獨設置了上、右、下、左的padding分別分十、20、30、40等價於3d

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

三個值：
padding:10px 20px 30px;
等價於code

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;   /*左邊的值沒有指定，因此和右邊相同*/

兩個值：
padding:10px 20px;
等價於xml

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

注意，一些元素默認帶有padding：好比ul等等，
爲了防止這些默認的padding、margin影響咱們製做頁面，咱們要在頁面開頭書寫：htm

<style type="text/css">
*{
    padding:0;
    margin:0;
}
</style>

就能把全部標籤的默認的padding、margin都去掉。
固然這麼寫有效率問題，別擔憂，項目課將告訴你最正確的清除默認padding、margin的方法。blog

3.border邊框

邊框有三要素：粗細、線型、顏色。
border:1px solid red;
px就是邊框的寬度， solid就是邊框的線型， red就是邊框的顏色。

線型：

工做中只許使用solid(實線)和dashed(虛線)，其餘的全部的線型都有兼容性問題，若是想製做其餘類型的邊框，必須切圖！

兼容性問題，IE瀏覽器中和Chrome瀏覽器中的邊框，明顯長得不同。

注意，三要素分別對應了三個小屬性：
border:10px solid red;
等價於

border-width:10px;
border-style:solid;
border-color:red;

咱們稱呼border爲「複合屬性」。

特別的，若是咱們想爲某一個邊，單獨設置三要素，那麼能夠拆分爲12個小屬性：

border:10px solid red;
等價於：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

更特別的，boder-color是能夠按照上右下左的順序書寫：
border-color:red yellow green;
上邊是紅色，左邊、右邊是黃色，下邊是綠色。

小練習1：

border:10px solid black;
border-left-color:red;

小練習2：

border:10px solid black; 
border-color:black red;

小練習3：

border:10px solid red;
border-width:20px 10px;
border-color:black red blue green;

若是某一個邊框咱們不想要，那麼就寫none
border-bottom:none;
下邊框就沒有了。

4.margin外邊距

本身這個盒子的邊框外側，到其餘盒子邊框外側的距離

margin有四個方向，分別是 margin-top、margin-right、margin-bottom、margin-left。

塌陷現象：

去掉ul的小圓點，要給ul加

ul{
     list-style:none;
}

居中策略

1.文字水平居中

若是想讓盒子中的文字水平居中，那麼要給盒子設置
text-align:center;
這個屬性繼承。
它還有兩個可能的值：

text-align:left;
text-align:right;

這個方法，只能居中文本流的東西(文字、圖片、表單元素)。必定要記住，這個屬性要設置給盒子，不能設置給這些文字、圖片、表單元素。

2.盒子水平居中

讓盒子設置：margin:0 auto;

margin: 0 auto;是給盒子用的，要加給盒子本身。它將在本身的父元素內部居中。

3.單行文本的垂直居中

line-height:盒子的高度;
行高=盒子高，此時單行文本就將在盒子中居中。注意，這個方法只能適用於單行文本，多行不適用。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            width: 400px; 
            background-color: yellow;
            border: 1px solid #ABCDEF;
            line-height: 60px;
            text-align: center;
            height: 60px;
        }
    </style>
</head>
<body>
    <p class="tip">點擊查看更多</p>
</body>
</html>