前端筆記之CSS（上）語法&文本屬性&塊/行內元素&選擇器&盒模型

時間  2019-11-08
標籤 前端 筆記 css 語法 文本 屬性 元素 選擇器 模型 欄目 CSS 简体版
原文   原文鏈接

 

 

 

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

基本語法

在head標籤裏面，寫入一下標籤：　　html

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

 

CSS 代碼規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。程序員

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

 

 

註釋：

/*css註釋內容*/

文本屬性

文本屬性瀏覽器

文本屬性值ide

意義工具

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>

注意：行內式沒有實現結構和樣式分離，不推薦使用，通常後臺程序員比較習慣使用這種方式。

 

外鏈式：

一、新建一個.css擴展名的文件，直接在文件內部寫CSS（注意：不要寫上<style>標籤）

二、在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。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程