前端筆記之CSS（上）

mufengsm發表於2019-03-17
前端筆記CSS

 

 

 

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

基本語法

在head標籤裡面，寫入一下標籤：　　

<html>
    <head>
        <style type="text/css">
             css程式碼
        </style>
    </head>
    <body></body>
</html>

 

CSS 程式碼規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。

選擇器{屬性:屬性值;屬性:屬性值;···},我們稱這種形式叫做鍵(key)值(value)對形式。

 

 

註釋：

/*css註釋內容*/

文字屬性

文字屬性

文字屬性值

意義

color

英文,16進位制,rgb

文字顏色

text-align

left,center,right

對齊元素中的文字

text-indent

px,em

縮排元素中文字的首行

line-height

px

設定行高

font-size

px

字型大小

font-weight

100-900,bold,normal,lighter

文字的粗細

font-style

normal,italic,oblique,inherit

字型的風格。

font-family

字型

字型

文字屬性之color：

color 屬性規定文字的顏色。

①英文字母：red,green,blue,yellow,orange,pink,gray···

②16進位制：

③rgb：r-red,g-green,b-blue

16進位制和rgb我們不需要記憶會通過ps或者識色工具取色就可以了。

 

文字屬性之text-align：

text-align 屬性規定元素中的文字的水平對齊方式。

實現text-align屬性特效元素必須具備寬度。

最後一個水平對齊屬性是 justify，它會帶來自己的一些問題。慎重使用。

 

文字屬性之font-weight：

font-weight 屬性設定文字的粗細。

文字屬性之font-style：

 

 

文字屬性之font-family：

c盤->windows->fonts資料夾

 

font-family 規定元素的字型系列。

font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

有兩種型別的字型系列名稱：

指定的系列名稱：具體字型的名稱，比如："times"、"courier"、"arial"。

通常字型系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。

注意：使用某種特定的字型系列（Geneva）完全取決於使用者機器上該字型系列是否可用；這個屬性沒有指示任何字型下載。因此，強烈推薦使用一個通用字型系列名作為後路。

 

 

 

 複合屬性

可以按順序設定如下屬性：

font-style （使用斜體、傾斜或正常字型）

font-variant （設定小型大寫字母的字型顯示文字）

font-weight （設定文字的粗細）

font-size/line-height （設定字型的尺寸和行高）

font-family （規定元素的字型系列）

可以不設定其中的某個值，比如 font:100% verdana; 也是允許的。未設定的屬性會使用其預設值。

如：

body{ font: italic small-caps bold 14px/24px "microsoft yahei";}

字型：斜體 小型大寫字母 粗體 14號大小/24畫素行高 微軟雅黑

可以不需要每個都寫，但是順序還是要的

 

塊元素和行內元素

標籤 元素 標記都是一回事。

 

塊元素

行內元素

行內塊元素

標籤

div h1-h6 ul ol p

span a b i

img 

特性

①單獨佔用一整行

①不單獨佔用一整行

①不佔用一整行

預設寬度100%

②可以設定寬高

②不可以設定寬高

②可以設定寬高

 

 

相互轉換

使用以下CSS屬性可以將任意的標籤元素（塊級、行內、行內塊）轉換為任何的顯示模式。

 display:block;        轉換為塊級元素

 display:inline;       轉換為行內元素

 display:inline-block; 轉換為行內塊元素

display的特殊值

隱藏顯示元素

 display:none;->display:block/inline/inlin-block;

 

 visibility: hidden;->visible

二者區別：

1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none效能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。(後面我們闡述)

 

基礎選擇器

標籤選擇器

標籤選擇器是標籤名稱命名的，讓頁面中所有的指定標籤都具備一個樣式，不管有多少個，不管巢狀多深，一定會被選中。

標籤名{屬性名:屬性值;}

h2{color:red;}

 

<div>
    文字1
    <div>
        文字2
        <div>
            文字3
            <div>
                文字4
                <h2>h2標籤</h2>
            </div>
        </div>
        </div>
</div>

因為標籤選擇器會選中所有的標籤，實際工作中，不會單獨用標籤選擇器，因為會影響其他同名的標籤。

類選擇器（class）

使用方法：

1、用“.”來定義類選擇器

2、在需要呼叫的標籤上新增class屬性即可（class="類選擇器名稱"）

 

示例：

定義：.box{color:red;}

呼叫：<div class="box">div3</div>

一個標籤可以新增多個類選擇器，用空格隔開。

正確寫法：

 

用原子類最方便的，所謂的原子類，就是一些簡單的屬性做成一個類，然後執行選擇所需的樣式即可。

<style type="text/css">
    .box{color:red;}
    .font{font-size:30px;}
    .b{font-weight:bold;}
    .bgp{background: pink;}
    .hong{color:red;}
    .f12{font-size:12px;}
    .f13{font-size:13px;}
    .f14{font-size:14px;}
    .f16{font-size:16px;}
    .f20{font-size:20px;}
    .fb{font-weight:bold;}
    .fn{font-weight:normal;}
    .t2{text-indent:2em;}
    .lh150{line-height:150%;}
    .lh180{line-height:180%;}
    .lh200{line-height:200%;}
    .unl{text-decoration:underline;}
    .no_unl{text-decoration:none;}
</style>

各取所需：

 <div class="bgp hong da lh150">div1</div>

 

類選擇器是工作中最常用的，原因：

 1、頁面上可以有無數個標籤，用一樣的類樣式

 2、一個標籤可以同時使用多個類樣式

 

 id選擇器:

要求以“#”開頭，後面緊跟id選擇器的名字，名稱自定義，要遵循命名規範

 #id名稱{color:red;}

 

例項：

 定義：#box{}

 呼叫：<div id="box">div1</div>

id選擇器好比人的身份證，同一個id名，只能使用一次，不能重複。

實際工作中寫CSS，id選擇器是個不太常用的選擇器，因為：

 1、id太珍貴，一次只能給一個元素新增樣式

 2、寫樣式的時候，大部分可以用類選擇器，極少用id，而且id選擇器權重太高

 3、JavaScript通過id來獲取元素

總結：id選擇器其實是留給JS用的。

萬用字元選擇器（*）

“*”指的是所有。

作用：選中網頁所有的標籤。

經驗：由於萬用字元選擇器可以選中所有標籤，權重最低，工作中不使用，一般用來做測試，寫demo。

 *{color:red;}  代表當前網頁中所有標籤都變紅

 

優先順序關係

權重： id選擇器>class選擇器>標籤選擇器>萬用字元選擇器 　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            color:red;
        }
        h1{
            color: green;
        }
        #h1{
            color: orange;
        }
        .h1{
            color: blue;
        }
        /* 
        
        id選擇器>class選擇器>標籤選擇器>萬用字元選擇器
        
         */
    </style>
</head>
<body>
    <h1 id="h1" class="h1">基本選擇器的優先順序關係</h1>
</body>
</html>

高階（複合）選擇器

描述：前面學習的都是基礎選擇器，複合選擇器就是將基礎選擇器綜合在一起使用。

並集選擇器：

作用：將頁面中相同樣式放到一起寫CSS屬性，集體宣告樣式，簡化程式碼。

逗號“，”表示合併關係

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1,h2,h3,.box,p,span,li{
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <h1>文字1</h1>
    <h2>文字2</h2>
    <h3>文字3</h3>
    <div class="box">div標籤</div>
    <p>p標籤</p>
    <span>span標籤</span>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

交集選擇器：

有些教材稱為“指定選擇器”

即滿足條件1，也要滿足條件2

兩種或以上選擇器同時存在一個標籤上。

寫法：選擇器之間直接連線，沒有任何符號

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        p.red{color:red;}
        #box.box{
            color:blue;
        }
    </style>
</head>
<body>
    <p class="red">p1</p>
    <p class="red">p2</p>
    <p>p3</p>
    <div class="red">div1</div>
    <div class="box" id="box">div2</div>
    <div class="box">div3</div>
    <div class="box" id="box">div4</div>
</body>
</html>

交集選擇器使用的是基礎選擇器，可以是都是類選擇器，也可以是標籤和類混寫，也可以是id。

 

後代選擇器：

有些教材稱為“包含選擇器”，“派生選擇器”

描述：後代選擇器用來選擇元素的後代，用“空格”隔開。當標籤發生巢狀時，就存在後代關係。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       div p{color:red;}
       .box1 p{color:blue;font-weight:bold;}
       .bigBox ul li a{color:red;}
      .father .son{color:red;}
    </style>
</head>
<body>
    <p>外面的p標籤</p>
    <div class="box1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </div>

    <div class="box2">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </div>

    <div class="bigBox">
        <ul>
            <li><a href="##">li01</a></li>
            <li><a href="##">li02</a></li>
            <li><a href="##">li03</a></li>
            <li><a href="##">li04</a></li>
        </ul>
    </div>

    <div class="father">
        <a href="##" class="son">文字1</a>
    </div>
    <div class="father">
        <a href="##">文字2</a>
    </div>
</body>
</html>

注意：後代選擇器，選擇的是後代的元素，不一定是兒子，還是孫子、曾孫子、重孫子...都行。但是記住，最終選擇上的是最後的那個後代元素。

 

CSS引入方式

內嵌式：

內嵌式優點：載入速度快，因為不用再多一個HTTP請求，結構和樣式半分離。

將CSS嵌入到HTML頁面head標籤對中：

  <style type="text/css">

        

  </style>

 

行內式：

寫法：在標籤身上新增style屬性

 <div style="color:red;font-size:30px;">div1</div>

注意：行內式沒有實現結構和樣式分離，不推薦使用，一般後臺程式設計師比較習慣使用這種方式。

 

外鏈式：

1、新建一個.css副檔名的檔案，直接在檔案內部寫CSS（注意：不要寫上<style>標籤）

2、在head標籤對中，寫link標籤，將外部CSS檔案引入

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

 

屬性解釋：

 rel="stylesheet"  宣告樣式表

總結：外鏈式實現了結構與樣式分離（符合W3C標準）工作中最常用。因為同一個CSS檔案，可以給多個HTML頁面使用。

 

匯入式：

將一個獨立的CSS檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS，<style>標籤頁是在<head>標籤中，使用語法：

 

 <style type="text/css">

     @import "css/a.css"; /*注意css檔案的路徑*/

 </style>

 

匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。

 

引入方式總結

 

 

CSS屬性

字型

font-style:

font-style 屬性可定義字型的風格。該屬性設定使用斜體、傾斜或正常字型。斜體字型通常定義為字型系列中的一個單獨的字型。

 

p{
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

font-weight:

font-weight 屬性設定文字的粗細。該屬性用於設定顯示元素的文字中所用的字型加粗。數字值 400 相當於 關鍵字 normal，700 等價於 bold。

 

p{ 
    font-weight: 100;/*lighter*/
    font-weight: 400;/*normal*/
    font-weight: 700;/*bold*/
 }

font-size:

font-size 屬性可設定字型的尺寸。該屬性設定元素的字型大小。注意，實際上它設定的是字型中字元框的高度；實際的字元字形可能比這些框高或矮（通常會矮）。

 

我們通常使用如下程式碼：

 p{

     font-size: 15px;

 }

 

注意：在PC端預設字型大小是16px,最小字型大小是12px.

 

 font-family:

font-family 屬性是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

註釋：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。

 

font-family: 我想要的1,我想要的2,我想要的3,···保底字型。

那麼我們電腦中的字型在哪裡？

C:\Windows\Fonts

 

 

注意：①我們多寫幾個字型 作為備用字型②注意版權問題(微軟雅黑收費了)③我們建議把中文字型改寫為unicode編碼

 

 

複合屬性font：

上述單一屬性我們可以通過font這個複合屬性一起寫出來：

語法：

  font-style，font-variant ， font-weight，font-size/line-height，font-family

上述屬性值不一定都要寫，但是如何你要寫必須按照上述的順序。

 

p{
    font:12px arial;
}
p{
    font:italic small-caps bold 12px arial;
}
p{
    font:oblique small-caps 900 12px/14px arial;
}
p{
    font:menu;
}

文字

color：

color 屬性可設定文字的顏色。這個屬性設定了一個元素的顏色。要設定一個元素的顏色，最容易的方法是使用 color 屬性。

 

·顏色名稱

紅色：red、橙色：orange、黃色：yellow、綠色；green、青色：cyan、藍色：blue、紫色：purple、白色：white、黑色：black、粉色：pink、金色：gold、淺藍色：lightblue、黃綠色：yellowgreen、天藍色：skyblue

 

16進位制

 

 #000000   黑色

 #ffffff   白色

 #ff0000   紅色

 #00ff00   綠色

 #0000ff   藍色

 ------------------------------------------------------------------------------------

 //只有三個顏色都可以簡寫才能簡寫

 #000000→#000

 #ff2245→不存在的

 #f1f1f1→不存在的

 #dd22cc→#d2c

 

 

rgb->red-green-blue

 

每個的取值是0-255之間

 rgb(0-255,0-255,0-255)

·透明顏色

 p{

     color: transparent;

 }

 

透明色的意思就是無論背景色是什麼顏色，我都會對映背景色。

·rgba->red-green-blue-alpha

 rgba(紅0-255,綠0-255,藍0-255,透明度0-1)

 

透明度0：代表全透明

透明度1：代表不透明

 

行高：

line-height 屬性設定行間的距離(不允許使用負值)。

說明：

該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

p{ 
    line-height:1.4;
}
p{ 
    line-height:140%;
}

小技巧：當文字只有一行時，行高等價於高度時那麼文字垂直居中。

 

text-align：

text-align 屬性對齊元素中的文字(行內和行內塊)。該屬性通過指定行框與哪個點對其，從而設定塊級元素內文字的水平對齊方式。通過允許使用者代理調整行內容中字母和字之間的間隔，可以支援值 justify；不同使用者代理可能會得到不同的結果。

 

text-indent：

text-indent 屬性縮排元素中的首行文字。

註釋：允許使用負值。如果使用負值，那麼首行會被縮排到左邊。

 

 

屬性

描述

px

 

em

em參照標準 字型大小

 

 

 

列表

list-style-image：

list-style-image 屬性使用一幅影象來替換列表項的標記。請始終規定一個 "list-style-type" 屬性以防影象不可用。

這個屬性指定作為一個有序或無序列表項標誌的影象。影象相對於列表項內容的放置位置通常使用 list-style-position 屬性控制。

 

 

li{
    border: 1px solid #000;
    /*替換點點點*/
    list-style-image: url("img/sun.png");
}

 

 list-style-position：

list-style-position 放置列表中的列表項標記。該屬性用於宣告列表標誌相對於列表項內容的位置。外部 (outside) 標誌會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在列表項內容最前面的行內元素一樣。

li{
    width: 100px;
    border: 1px solid #000;
    /*替換點點點*/
    list-style-image: url("img/sun.png");
    /*規定點點點的位置(內/外)*/
    list-style-position: inside;
}

list-style-type：

list-style-type 屬性設定列表項標記的型別。該屬性用於宣告列表標誌相對於列表項內容的位置。外部 (outside) 標誌會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在列表項內容最前面的行內元素一樣。

 

 

 

複合屬性list-style：

list-style 屬性是用於在一個宣告中設定一個列表的所有屬性的簡寫屬性。該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。

語法：list-style-image | list-style-position | list-style-type

 

 

表格

border-collapse：

border-collapse 屬性設定表格的邊框是否被合併為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示。

 

 table{

     border-collapse: collapse;

 }

 

下圖：左側為預設表格樣式，右側為修改後的表格樣式

背景

 background-color：

background-color 屬性設定元素的背景顏色。background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴充套件到元素邊框的外邊界。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。(後半句話結合一會我們們學的盒子模型來看)

background-color的取值和我們們的color取值一模一樣。

 

background-image：

background-image 屬性把影象設定為背景。

提示：請設定一種可用的背景顏色，這樣的話，假如背景影象不可用，頁面也可獲得良好的視覺效果。

初始背景影象（原影象）根據 background-position 屬性的值放置。

 

 background-repeat：

background-repeat 屬性設定是否及如何重複背景影象。background-repeat 屬性定義了影象的平鋪模式。影象可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。 預設影象是沿著x,y平鋪的。

 

div{
    width: 800px;
    height: 400px;
    border: 1px solid red;

    background-image: url('img/亞運會.jpg');/*背景圖500*312*/
    /* background-repeat: no-repeat; */  /*不平埔*/
    /* background-repeat: repeat-x; */  /*x方向*/
    /* background-repeat: repeat-y; */  /*y方向*/
    background-repeat: repeat;  /*預設值：x,y同時平鋪*/
}

 background-position：

background-position 屬性設定背景影象的起始位置。

 

我們的座標原點在哪裡：左上角。在數學中我們們這是第四象限，但是我們這裡都是正數。


 

 

我們的寫法有3三種：①方位名詞②px③%(%參考的是當前盒子的寬和高)

 

背景定位的應用：

比如我們通常處理banner(可以作為網站頁面的橫幅廣告，也可以作為遊行活動時用的旗幟，還可以是報紙雜誌上的大標題。Banner 主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。)區域。那麼這個設計圖設計多大呢？如果設計圖過大那麼在小解析度的螢幕上就會顯示不完整，如果設計過小，那麼在大分比率的螢幕上兩側留白過多，那麼非常不好看。

 

我們的解決方案是：設計一張可以使用於主流螢幕的banner圖，利用背景定位將他放在區域中間，兩邊可能會留白，將兩側區域填充主題背景色，這樣就不會顯得特別突兀了。

 

div{
            width: 900px;
            height: 400px;
            border: 1px solid red;
            /* 背景圖 */
            background-image: url('img/wechat.jpg');
            /* 平鋪狀態 */
            background-repeat: no-repeat;
            /* 背景定位-背景圖片 */
            background-position: 50% 50%;
            background-color: #36a63a;
}

 

如上圖紅色區域才是真正的背景圖。

 

雪碧圖技術

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

 

前提：

 

 ①小

 ②風格統一

 ③比經常變動,因為你經常變動不易於維護

 

 

優點：

 1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；

 2、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。

 3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。

 4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

 

background-attachment：

background-attachment 屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。

 

 Background-attachment:fixed; 頁面滾動的時候圖片不動

 

 

複合屬性background：

background 是用於在一個宣告中設定所有背景屬性的一個簡寫屬性。

 

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。

 background-color || background-image || background-repeat || background-attachment || background-position

 

 

 

偽類

偽類是一個狀態，a標籤超連結有4個偽類狀態：

 

偽類

作用

a:link

未訪問時的狀態（預設狀態）

a:visited

訪問後的狀態（點選後）

a:hover

滑鼠懸停時的狀態

a:active

點選中的狀態

 

注意：同時設定超連結的4個狀態，一定要按照順序寫l-v-h-a

盒子模型

 

 

網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。

 

任何元素(塊元素 行內元素 行內塊元素)你都可以看作是一個盒子

 

由圖可知一個盒子再頁面中真實佔據的位置=widht+height+padding+border+margin

 

外邊距margin：

它值得是該盒子與兄弟盒子之間的距離

基本用法

順時針：鐘錶轉動的方向就是順時針

 

語法

描述

意義

margin：50px;  

margin: 上右下左;

四個方向都是50px;

margin: 10px 50px;

margin: 上下  左右;

上下10px  左右50px

margin: 10px 30px 50px;

margin: 上  左右  下;

上10px  左右30px  下50px

margin: 10px 30px 50px 70px;

margin: 上  右  下  左;

上10px  右30px  下50px  左70px

 

 

.box1{
    background-color: red;
    /*margin: 10px;*/
    /*margin: 10px 50px;*/
    /*margin: 10px 30px 50px;*/
    margin: 10px 30px 50px 70px;
                
}

基本語法

意義

marign-top

上邊距

margin-right

右邊距

margin-bottom

下邊距

margin-left

左邊距

 

 

margin特殊技巧1：

特殊技巧就是margin可以寫負數。當margin的值為負數時,意味著該盒子往反方向走。

 

margin特殊技巧2：

水平居中一個塊級元素？

思路：假設電腦螢幕為1366px,你的盒子大小為200px,那麼你可以寫成margin-left:583px;(或者margin: 0 583px),但是每一個瀏覽器視窗尺寸大小不一樣,所以我們不能寫成絕對的一個數值,所以使用auto代替。

 

div{
    width: 200px;
    height: 100px;
    background-color: red;
    /*(body-div)/2*/
    /*左外邊距是583px*/
    /*margin-left: 583px;*/
    /*下面這種寫法等價於上面的寫法*/
    /*margin: 0 583px;*/
                
    /*auto就是說左右兩邊可以自適應*/
    margin: 0 auto;
}

 

 

邊框border

基本語法

語法：div{border: 邊框粗細border-width  邊框樣式border-style  邊框顏色border-color}

 

屬性值

可能的值

描述

border-width

num(px)

邊框粗細

border-style

none solid dashed

邊框樣式

border-color

red  rgb(255,255,0)  #0ff0ff

邊框顏色

 

border-style取值如下：

 

還可以寫成以下方式：

border-width: 40px;

border-style: solid none dashed double

border-color: red green orange blue;

 

border-top: 50px solid blue;

border-bottom: 10px dashed green;

 

border-top-width: 20px;

div{
    /*裡面有3個屬性值*/
    border: 10px solid yellow;
}

三角形的製作：

原理：把盒子的寬和高縮小至0 你會發現一個神奇的現象 然後把你不需要的那3個三角顏色設定為透明色transparent。

----------------->

div{
    width: 0px;
    height: 0px;
    margin: 50px auto;
                
    /*border: 50px solid orange;*/
    border-top: 100px solid orange;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
}

 

內邊距padding

別稱：內填充、內填白 

語法

描述

意義

padding：50px;  

padding: 上右下左;

四個方向都是50px;

padding: 10px 50px;

padding: 上下  左右;

上下10px  左右50px

padding: 10px 30px 50px;

padding: 上  左右  下;

上10px  左右30px  下50px

padding:10px30px 50px 70px;

padding: 上 右  下  左;

上10px  右30px  下50px  左70px

 

 

盒子大小

因為padding和border會改變盒子真實大小，所以我們計算時會將程式碼中的寬和高-border-padding(當前前提是取決於你對設計圖的測量方法)

 

盒子大小=width./height+padding+border

 

 

ps:以後會持續更新，沒有提到的可以在評論區留言我會補充，已經規劃好知識點的順序了，等正片走完之後，有想學習新技術或者有技術上的一些問題也可以留言我的郵箱scarf666@163.com。

 

 

相關文章