CSS設置技巧

時間 2019-11-19

標籤 css 設置技巧欄目 CSS 简体版

原文原文鏈接

1、單位和值

　　1.1 顏色值

　　在網頁中的顏色設置是很是重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有不少種：css

　　一、英文命令顏色html

　　前面幾個小節中常常用到的就是這種設置方法：瀏覽器

p{color:red;}

　　二、RGB顏色字體

　　這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。spa

　　p{color:rgb(133,45,200);}

　　每一項的值能夠是 0~255 之間的整數，也能夠是 0%~100% 的百分數。如：設計

　　p{color:rgb(20%,33%,25%);}

　　三、十六進制顏色code

　　這種顏色設置方法是如今比較廣泛使用的方法，其原理其實也是 RGB 設置，可是其每一項的值由 0-255 變成了十六進制 00-ff。htm

p{color:#00ffff;}

　　配色表：blog

　　1.2 長度值

　　長度單位總結一下，目前比較經常使用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。圖片

　　一、像素

　　像素爲何是相對單位呢？由於像素指的是顯示器上的小點（CSS規範中假設「90像素=1英寸」）。實際狀況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）做爲單位。

　　二、em

　　就是本元素給定字體的 font-size 值，若是元素的 font-size 爲 14px ，那麼 1em = 14px；若是 font-size 爲 18px，那麼 1em = 18px。以下代碼：

p{font-size:12px;text-indent:2em;}

　　上面代碼就是能夠實現段落首行縮進 24px（也就是兩個字體大小的距離）。

　　下面注意一個特殊狀況：

　　但當給 font-size 設置單位爲 em 時，此時計算的標準以 p 的父元素的 font-size 爲基礎。以下代碼：

html:

<p>以這個<span>例子</span>爲例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

　　結果 span 中的字體「例子」字體大小就爲 11.2px（14 * 0.8 = 11.2px）。

　　三、百分比

p{font-size:12px;line-height:130%}

　　設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）。

2、樣式設置技巧

　　2.1 水平居中-行內元素

　　咱們在實際工做中常會遇到須要設置水平居中的場景，好比爲了美觀，文章的標題通常都是水平居中顯示的。

　　這裏咱們又得分兩種狀況：行內元素仍是塊狀元素，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。今天咱們先來了解一　　下行內元素怎麼進行水平居中？

　　若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。(父元素和子元素：以下面的html代碼中，div是「我想要在父容器中水平居中顯示」這個文本的父元素。反之這個文本是div的子元素 )以下代碼：

html代碼：

<body>
  <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body> css代碼： <style> .txtCenter{ text-align:center;
  }
</style>

　　2.2 定寬塊狀居中

　　當被設置元素爲塊狀元素時用 text-align：center 就不起做用了，這時也分兩種狀況：定寬塊狀元素和不定寬塊狀元素。

　　這一小節咱們先來說一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width爲固定值。)

　　知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。咱們來看個例子就是設置 div 這個塊狀元素水平居中：

html代碼：

<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
css代碼：

<style>
div{
    border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}

</style>

也能夠寫成：

margin-left:auto;
margin-right:auto;

注意：元素的「上下 margin」是能夠隨意設置的。

　　2.3 不定寬

　　在實際工做中咱們會遇到須要爲「不定寬度的塊狀元素」設置居中，好比網頁上的分頁導航，由於分頁的數量是不肯定的，因此咱們不能經過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

　　不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：

加入 table 標籤
設置 display: inline 方法：與第一種相似，顯示類型設爲行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

　　這一小節咱們來說一下第一種方法：

　　爲何選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），所以能夠看作一個定寬度塊元素，而後再利用定寬度塊狀居中的margin的方法，使其水平居中。

　　第一步：爲須要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。

　　第二步：爲這個 table 設置「左右 margin 居中」（這個和定寬塊狀元素的方法同樣）。

　　舉例以下：

　　html代碼：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
css代碼：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

　　除了上一節講到的插入table標籤，可使不定寬塊狀元素水平居中以外，本節介紹第2種實現這種效果的方法，改變元素的display類型爲行內元素，利用其屬性直接設置。

第二種方法：改變塊級元素的 display 爲 inline 類型（設置爲行內元素顯示），而後使用 text-align:center 來實現居中效果。以下例子：

html代碼：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
css代碼：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

　　這種方法相比第一種方法的優點是不用增長無語義標籤，但也存在着一些問題：它將塊狀元素的 display 類型改成 inline，變成了行內元素，因此少了一些功能，好比設定長度值。

　　除了前兩節講到的插入table標籤，以及改變元素的display類型，可使不定寬塊狀元素水平居中以外，本節介紹第3種實現這種效果的方法，設置浮動和相對定位來實現。

方法三：經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

咱們能夠這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分爲兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。

代碼以下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
css代碼：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

　　這三種方法使用得都很是普遍，各有優缺點，具體選用哪一種方法，能夠視具體狀況而定。

　　http://www.imooc.com/learn/9