2. 程式人生 > >後端工程師必學的前端 css 知識

後端工程師必學的前端 css 知識

阿新 • • 發佈：2018-12-11

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。

有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。

Js對於後端小夥伴來說不算難點，能夠順手的使用（當然十分依賴 jQuery），涉及到 css 就會有點懵逼了。

後臺開發一般不會用到太難的前端技巧，能夠在完成正確佈局的基礎上，再稍微做一些美化，就已經夠用了。

下面的內容有一些程式碼樣例，這是一部分前置的 css 樣式。

在這裡插入圖片描述

.green {
    background-color: lightseagreen;
}
.red {
    background-color: orangered;
}
.container {
    border: 1px solid #0000f1;
}
.w100 {
    width: 100px;
    height: 100px;
}
.w50 {
    width: 50px;
    height: 50px;
}

把元素放到正確的位置上 1）文件流 瀏覽器會把 html 元素按照從上到下，從左到右依次排放。

Html 中全部元素都是盒模型，盒子會佔用一定的空間，依次排放在HTML中，形成了文件流。

某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後，在文件流中的其他元素將忽略該元素並填補其原先的空間。

1.1）float 浮動方式脫離文件流 示例：

<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

在這裡插入圖片描述

給中間的紅色塊新增浮動：

<style>
    .float {
        float: left;
    }
</style>
<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 float">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

在這裡插入圖片描述

紅色塊在原來的行內向左浮動並脫離了文件流，下面的綠色塊頂上來了。

float還有一些其他用法，但float一般不常用，這裡不多做討論。

1.2）使用定位脫離文件流 如果給元素設定了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會脫離文件文件流。

脫離前的程式碼示例：

<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 ">

    </div>
    <div class="green w100">

    </div>
    <div class="red w50 ">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

在這裡插入圖片描述

脫離後：

<style>
    .fixed {
        position: fixed;
    }
    .absolute {
        position: absolute;
    }
</style>
<div class="container">
    <div class="green w100">

    </div>
    <div class="red w50 fixed">

    </div>
    <div class="green w100">

    </div>
    <div class="red w50 absolute">

    </div>
    <div class="green w100">

    </div>
</div>

效果：

在這裡插入圖片描述

雖然兩個紅色塊還在原來的坑上，但實際上它們已經不佔文件流了，所以下面的兩個綠色塊都上來了。

1.3）display: none 設定 display 屬性為 none，脫離文件流，並不在頁面展示了。

2）display 樣式 display 樣式決定了元素的展現形式。

display 有很多取值，比如上面提到的 none 值表示不在頁面展示。

對於後端小夥伴來說，除了 none 外，只需要再瞭解三個值就足夠用了，它們分別是 block，inline-block，inline。

2.1）block 塊元素 塊元素在瀏覽器中展示時，通常會以新行來開始（和結束）。

常見的（display 預設為 block）塊元素有 <h1>...<h6>, <p>, <ul>, <table>, <div>, <pre>。

舉個栗子：

<div class="container">
    <div class="green">
        哈哈
    </div>
    <h1 class="red w100">呵呵</h1>
    <p class="green">
        嘿嘿
    </p>
</div>

效果為：

在這裡插入圖片描述

三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距，這是因為 p h1-h6 標籤預設是有 margin-top margin-bottom 的。

同時可以給塊級元素設定高寬，寬度未設定時預設是 100%。

2.2）inline 元素 行內（inline）元素會在一行內從左向右排布，如果一行排滿了，會往下一行堆疊。

常見的行內元素有 span label b i sub sup，等文字格式化標籤。

舉個栗子：

<div class="container">
    <p>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub>
        <sup class="red w100">呵呵</sup>
        <span class="green w100">哈哈</span>
        <label class="red w100">哈哈</label>
        <b class="red w100">呵呵</b>
        <i class="red w100">呵呵</i>
        <sub class="red w100">呵呵</sub><sup class="red w100">呵呵</sup>
    </p>
</div>

效果為：

在這裡插入圖片描述

細心的話，你會發現上面這些元素都設定了 w100 這個類，但是高寬都沒有變化。這是因為行內元素不能設定高寬，只會根據內容的高寬自適應。

ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab（空格），這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔，所以中間沒有空格。

2.3）inline-block 行內塊 行內塊元素既可以設定高寬，又可以像行內元素一樣並排排列。

常見的行內塊元素有 img input button select等。

示例：

<p>
    <img src="init.png" class="red w100">
    <input class="green w50">
    <button class="red w100">哈哈</button>
    <select class="green w100">
        <option>1</option>
    </select>
</p>

效果為：

在這裡插入圖片描述

2.4）display小結 各個元素都有自己預設的 display 屬性，但我們可以給元素設定 display 屬性覆蓋預設的屬性。 比如給 div 設定 display: inline-block，就可以讓塊兒並排排列了。給 span 設定 display:inline-block，就可以設定高寬了。

示例：

<span style="display: block" class="red">我看起來像是p標籤了</span>

<div>
    <p style="display: inline">香蕉</p>
    <p style="display: inline">橙子</p>
    <p style="display: inline">大?</p>
</div>

效果：

在這裡插入圖片描述

3）position 樣式 position 決定了元素的定位方式。

在這裡插入圖片描述

設定定位後，可以通過設定 top right left bottom 樣式來設定元素的位置。

其中，relative 定位的 top right left bottom 值是相對於其原來位置的偏移。 absolute fixed 定位的 top right left bottom 值是距離其包含塊內邊框的距離。

程式碼示例：

<div class="container relative">
    <div class="red" style="height: 200px">
        <div class="green absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
    <div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
        <div class="red absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
</div>

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。

有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。

Js對於後端小夥伴來說不算難點，能夠順手的使用（當然十分依賴 jQuery），涉及到 css 就會有點懵逼了。

後臺開發一般不會用到太難的前端技巧，能夠在完成正確佈局的基礎上，再稍微做一些美化，就已經夠用了。

下面的內容有一些程式碼樣例，這是一部分前置的 css 樣式。

.green { background-color: lightseagreen; } .red { background-color: orangered; } .container { border: 1px solid #0000f1; } .w100 { width: 100px; height: 100px; } .w50 { width: 50px; height: 50px; } 把元素放到正確的位置上 1）文件流 瀏覽器會把 html 元素按照從上到下，從左到右依次排放。

Html 中全部元素都是盒模型，盒子會佔用一定的空間，依次排放在HTML中，形成了文件流。

某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後，在文件流中的其他元素將忽略該元素並填補其原先的空間。

1.1）float 浮動方式脫離文件流 示例：

</div>
<div class="red w50">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

給中間的紅色塊新增浮動：

</div>
<div class="red w50 float">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

紅色塊在原來的行內向左浮動並脫離了文件流，下面的綠色塊頂上來了。

float還有一些其他用法，但float一般不常用，這裡不多做討論。

1.2）使用定位脫離文件流 如果給元素設定了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會脫離文件文件流。

脫離前的程式碼示例：

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

脫離後：

</div>
<div class="red w50 fixed">

</div>
<div class="green w100">

</div>
<div class="red w50 absolute">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

雖然兩個紅色塊還在原來的坑上，但實際上它們已經不佔文件流了，所以下面的兩個綠色塊都上來了。

1.3）display: none 設定 display 屬性為 none，脫離文件流，並不在頁面展示了。

2）display 樣式 display 樣式決定了元素的展現形式。

display 有很多取值，比如上面提到的 none 值表示不在頁面展示。

對於後端小夥伴來說，除了 none 外，只需要再瞭解三個值就足夠用了，它們分別是 block，inline-block，inline。

2.1）block 塊元素 塊元素在瀏覽器中展示時，通常會以新行來開始（和結束）。

常見的（display 預設為 block）塊元素有

…

,

,

    , , , 
    。

舉個栗子：

哈哈

呵呵

嘿嘿

效果為：

clipboard.png

三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距，這是因為 p h1-h6 標籤預設是有 margin-top margin-bottom 的。

同時可以給塊級元素設定高寬，寬度未設定時預設是 100%。

2.2）inline 元素 行內（inline）元素會在一行內從左向右排布，如果一行排滿了，會往下一行堆疊。

常見的行內元素有 span label b i sub sup，等文字格式化標籤。

舉個栗子：

哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵呵呵

效果為：

clipboard.png

細心的話，你會發現上面這些元素都設定了 w100 這個類，但是高寬都沒有變化。這是因為行內元素不能設定高寬，只會根據內容的高寬自適應。

ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab（空格），這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔，所以中間沒有空格。

2.3）inline-block 行內塊 行內塊元素既可以設定高寬，又可以像行內元素一樣並排排列。

常見的行內塊元素有 img input button select等。

示例：

哈哈 1

效果為：

clipboard.png

2.4）display小結 各個元素都有自己預設的 display 屬性，但我們可以給元素設定 display 屬性覆蓋預設的屬性。 比如給 div 設定 display: inline-block，就可以讓塊兒並排排列了。給 span 設定 display:inline-block，就可以設定高寬了。

示例：

我看起來像是p標籤了

香蕉

橙子

大?

效果：

clipboard.png

3）position 樣式 position 決定了元素的定位方式。

position 描述 static 預設值，元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。 absolute 元素框從文件流完全刪除，並相對於其包含塊（離它最近的已經定位–非static定位的祖先元素）定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框 fixed 元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。（網站的“聯絡客服”按鈕一般是 fixed 定位） 設定定位後，可以通過設定 top right left bottom 樣式來設定元素的位置。

其中，relative 定位的 top right left bottom 值是相對於其原來位置的偏移。 absolute fixed 定位的 top right left bottom 值是距離其包含塊內邊框的距離。

程式碼示例：

<div class="container relative">
    <div class="red" style="height: 200px">
        <div class="green absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
    <div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
        <div class="red absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
</div>

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。

有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。

Js對於後端小夥伴來說不算難點，能夠順手的使用（當然十分依賴 jQuery），涉及到 css 就會有點懵逼了。

後臺開發一般不會用到太難的前端技巧，能夠在完成正確佈局的基礎上，再稍微做一些美化，就已經夠用了。

下面的內容有一些程式碼樣例，這是一部分前置的 css 樣式。

.green { background-color: lightseagreen; } .red { background-color: orangered; } .container { border: 1px solid #0000f1; } .w100 { width: 100px; height: 100px; } .w50 { width: 50px; height: 50px; } 把元素放到正確的位置上 1）文件流 瀏覽器會把 html 元素按照從上到下，從左到右依次排放。

Html 中全部元素都是盒模型，盒子會佔用一定的空間，依次排放在HTML中，形成了文件流。

某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後，在文件流中的其他元素將忽略該元素並填補其原先的空間。

1.1）float 浮動方式脫離文件流 示例：

</div>
<div class="red w50">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

給中間的紅色塊新增浮動：

</div>
<div class="red w50 float">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

紅色塊在原來的行內向左浮動並脫離了文件流，下面的綠色塊頂上來了。

float還有一些其他用法，但float一般不常用，這裡不多做討論。

1.2）使用定位脫離文件流 如果給元素設定了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會脫離文件文件流。

脫離前的程式碼示例：

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

脫離後：

</div>
<div class="red w50 fixed">

</div>
<div class="green w100">

</div>
<div class="red w50 absolute">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

雖然兩個紅色塊還在原來的坑上，但實際上它們已經不佔文件流了，所以下面的兩個綠色塊都上來了。

1.3）display: none 設定 display 屬性為 none，脫離文件流，並不在頁面展示了。

2）display 樣式 display 樣式決定了元素的展現形式。

display 有很多取值，比如上面提到的 none 值表示不在頁面展示。

對於後端小夥伴來說，除了 none 外，只需要再瞭解三個值就足夠用了，它們分別是 block，inline-block，inline。

2.1）block 塊元素 塊元素在瀏覽器中展示時，通常會以新行來開始（和結束）。

常見的（display 預設為 block）塊元素有

…

,

,

    , , , 
    。

舉個栗子：

哈哈

呵呵

嘿嘿

效果為：

clipboard.png

三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距，這是因為 p h1-h6 標籤預設是有 margin-top margin-bottom 的。

同時可以給塊級元素設定高寬，寬度未設定時預設是 100%。

2.2）inline 元素 行內（inline）元素會在一行內從左向右排布，如果一行排滿了，會往下一行堆疊。

常見的行內元素有 span label b i sub sup，等文字格式化標籤。

舉個栗子：

哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵呵呵

效果為：

clipboard.png

細心的話，你會發現上面這些元素都設定了 w100 這個類，但是高寬都沒有變化。這是因為行內元素不能設定高寬，只會根據內容的高寬自適應。

ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab（空格），這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔，所以中間沒有空格。

2.3）inline-block 行內塊 行內塊元素既可以設定高寬，又可以像行內元素一樣並排排列。

常見的行內塊元素有 img input button select等。

示例：

哈哈 1

效果為：

clipboard.png

2.4）display小結 各個元素都有自己預設的 display 屬性，但我們可以給元素設定 display 屬性覆蓋預設的屬性。 比如給 div 設定 display: inline-block，就可以讓塊兒並排排列了。給 span 設定 display:inline-block，就可以設定高寬了。

示例：

我看起來像是p標籤了

香蕉

橙子

大?

效果：

clipboard.png

3）position 樣式 position 決定了元素的定位方式。

position 描述 static 預設值，元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。 absolute 元素框從文件流完全刪除，並相對於其包含塊（離它最近的已經定位–非static定位的祖先元素）定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框 fixed 元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。（網站的“聯絡客服”按鈕一般是 fixed 定位） 設定定位後，可以通過設定 top right left bottom 樣式來設定元素的位置。

其中，relative 定位的 top right left bottom 值是相對於其原來位置的偏移。 absolute fixed 定位的 top right left bottom 值是距離其包含塊內邊框的距離。

程式碼示例：

<div class="container relative">
    <div class="red" style="height: 200px">
        <div class="green absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
    <div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
        <div class="red absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
</div>

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。

有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。

Js對於後端小夥伴來說不算難點，能夠順手的使用（當然十分依賴 jQuery），涉及到 css 就會有點懵逼了。

後臺開發一般不會用到太難的前端技巧，能夠在完成正確佈局的基礎上，再稍微做一些美化，就已經夠用了。

下面的內容有一些程式碼樣例，這是一部分前置的 css 樣式。

.green { background-color: lightseagreen; } .red { background-color: orangered; } .container { border: 1px solid #0000f1; } .w100 { width: 100px; height: 100px; } .w50 { width: 50px; height: 50px; } 把元素放到正確的位置上 1）文件流 瀏覽器會把 html 元素按照從上到下，從左到右依次排放。

Html 中全部元素都是盒模型，盒子會佔用一定的空間，依次排放在HTML中，形成了文件流。

某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後，在文件流中的其他元素將忽略該元素並填補其原先的空間。

1.1）float 浮動方式脫離文件流 示例：

</div>
<div class="red w50">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

給中間的紅色塊新增浮動：

</div>
<div class="red w50 float">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

紅色塊在原來的行內向左浮動並脫離了文件流，下面的綠色塊頂上來了。

float還有一些其他用法，但float一般不常用，這裡不多做討論。

1.2）使用定位脫離文件流 如果給元素設定了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會脫離文件文件流。

脫離前的程式碼示例：

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
<div class="red w50 ">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

脫離後：

</div>
<div class="red w50 fixed">

</div>
<div class="green w100">

</div>
<div class="red w50 absolute">

</div>
<div class="green w100">

</div>
效果：

clipboard.png

雖然兩個紅色塊還在原來的坑上，但實際上它們已經不佔文件流了，所以下面的兩個綠色塊都上來了。

1.3）display: none 設定 display 屬性為 none，脫離文件流，並不在頁面展示了。

2）display 樣式 display 樣式決定了元素的展現形式。

display 有很多取值，比如上面提到的 none 值表示不在頁面展示。

對於後端小夥伴來說，除了 none 外，只需要再瞭解三個值就足夠用了，它們分別是 block，inline-block，inline。

2.1）block 塊元素 塊元素在瀏覽器中展示時，通常會以新行來開始（和結束）。

常見的（display 預設為 block）塊元素有

…

,

,

    , , , 
    。

舉個栗子：

哈哈

呵呵

嘿嘿

效果為：

clipboard.png

三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距，這是因為 p h1-h6 標籤預設是有 margin-top margin-bottom 的。

同時可以給塊級元素設定高寬，寬度未設定時預設是 100%。

2.2）inline 元素 行內（inline）元素會在一行內從左向右排布，如果一行排滿了，會往下一行堆疊。

常見的行內元素有 span label b i sub sup，等文字格式化標籤。

舉個栗子：

哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵 呵呵 哈哈 呵呵 呵呵 呵呵呵呵

效果為：

clipboard.png

細心的話，你會發現上面這些元素都設定了 w100 這個類，但是高寬都沒有變化。這是因為行內元素不能設定高寬，只會根據內容的高寬自適應。

ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab（空格），這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔，所以中間沒有空格。

2.3）inline-block 行內塊 行內塊元素既可以設定高寬，又可以像行內元素一樣並排排列。

常見的行內塊元素有 img input button select等。

示例：

哈哈 1

效果為：

clipboard.png

2.4）display小結 各個元素都有自己預設的 display 屬性，但我們可以給元素設定 display 屬性覆蓋預設的屬性。 比如給 div 設定 display: inline-block，就可以讓塊兒並排排列了。給 span 設定 display:inline-block，就可以設定高寬了。

示例：

我看起來像是p標籤了

香蕉

橙子

大?

效果：

clipboard.png

3）position 樣式 position 決定了元素的定位方式。

position 描述 static 預設值，元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。 relative 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。 absolute 元素框從文件流完全刪除，並相對於其包含塊（離它最近的已經定位–非static定位的祖先元素）定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框 fixed 元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。（網站的“聯絡客服”按鈕一般是 fixed 定位） 設定定位後，可以通過設定 top right left bottom 樣式來設定元素的位置。

其中，relative 定位的 top right left bottom 值是相對於其原來位置的偏移。 absolute fixed 定位的 top right left bottom 值是距離其包含塊內邊框的距離。

程式碼示例：

<div class="container relative">
    <div class="red" style="height: 200px">
        <div class="green absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
    <div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
        <div class="red absolute w100" style="right: 10px; bottom: 20px">
        </div>
    </div>
</div>

效果： 在這裡插入圖片描述

把頁面調整的好看一些

使用 calc 與百分比自適應寬度 在做後臺頁面時，經常會有這樣的場景：左側選單寬度不變，右側面板跟隨瀏覽器寬度變化。

解決方案：父元素寬度 100%，左側選單寬度固定，右側面板寬度為 calc(100% - (兩個塊的內外邊距邊框之和+左側寬度))

示例：

<div class="container relative" style="width: 100%">
    <div style="display: inline-block; width: 100px; height: 200px" class="red">

    </div>
    <div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">

    </div>
</div>

效果：

在這裡插入圖片描述

vertical-align:top 行內塊常用的上下對齊 在寫表單或者某些特殊佈局時，多個並列的行內塊可能高度不一，通常來說，把他們頂部對齊是比較好看的。

示例：

<div class="container relative" style="width: 100%">
    <div style="display: inline-block; width: 100px; height: 100px; vertical-align: top" class="red">

    </div>
    <div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">

    </div>

效果：

在這裡插入圖片描述

box-shadow 讓塊變得更有立體感 在使用面板、按鈕、輸入框等可互動內容或大塊內容時，設定適當的盒陰影效果能夠增加頁面立體感。

<style>
.panel {
    width: 180px;
    height: 100px;
    box-shadow: 0px 0px 8px red;
}
</style>
<div class="container relative" style="width: 100%; border: none; padding: 10px">

    <div class="panel" style="padding: 10px">
        <h3>內容介紹</h3>
    </div>

</div>

效果：

在這裡插入圖片描述

transition 增加使用者體驗 transition 能夠讓不同狀態之前的樣式變化有個漸變的過程。也是常用的優化手段。

常與 hover 同時使用。

示例：

<style>
.button{
    background-color: red;
    color: white;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;

    transition: background-color .3s;
}

.button:hover {
    background-color: darkolivegreen;
}
</style>
<div class="container relative" style="width: 100%">
    <button class="button">點我</button>
</div>

效果

在這裡插入圖片描述

在這裡插入圖片描述

border-radius 的高階用法 border-radius 除了可以設定簡單的圓角外，還可以單獨為不同的角設定不同的弧度；所有角設定 50% 還能實現橢圓（或者圓形）。

示例：

<h6 class="inline">小圓點</h6>
<div class="inline" style="width: 6px; height: 6px; border-radius: 50%; background-color: red">
</div>

<div class="red" style="border-top-left-radius: 50px; border-bottom-right-radius: 50px; width: 100px; height: 50px">
</div>

效果：

在這裡插入圖片描述

最後

文章分享就到這裡了，更多幹貨可以關注一下博主。

自己是一個五年的全棧工程師，這裡推薦一下我的前端學習交流群：731771211 ，裡面都是學習前端的，群裡會不定期更新最新的教程和學習方法，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的web前端黨歡迎加入。

點選：前端

相關推薦

後端工程師必學的前端 css 知識

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。 有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。 Js對於後端小夥伴來

後端工程師必知必會的前端 css 知識

後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。 有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。 Js對於後端小夥伴來說不

開發輔助 | 前端開發工程師必懂的 UI 知識

顏色 前端 com 視網膜 尺寸 手機應用 HR 上啟 高度 移動 UI 設計的世界 ... 1、屏幕尺寸 屏幕大小，指屏幕對角線的長度，而不是屏幕的寬度或高度； 單位為英寸 如 iPhone 7 屏幕尺寸為 4.7 英寸；三星 S6 屏幕尺寸為 5.1

JAVA全棧工程師必學具備怎樣的知識體系？

Java是超高人氣程式語言，擁有跨平臺、面向物件、泛型程式設計等特性。在TIOBE程式語言排行榜中，連續奪得第一寶座，而且國內各大知名網際網路公司，後端開發首選語言：非Java莫屬。 今天是針對各類目有更詳細的經驗分享。 常用的東西要熟練，不常用的要知道。 其實並不用為

全棧工程師開發手冊（原創）（全棧工程師，前端工程師，後端工程師，架構師，爬蟲工程師，資料分析師，大資料工程師，資料探勘工程師，機器學習工程師，欒鵬全棧）

matlab2c資料分析 原創開發matlab2c動態連結庫，使用c++實現matlab函式，包含matlab中函式的使用，c++的實現原始碼，函式的呼叫示例。對於資料分析，機器學習有很大幫助

關於後端程式設計師學習前端知識？求回答

個人覺得jquery和js是比較強大和用途廣泛的，本人大二的時候學過js沒有深入的學習，大三選方向學了java，如今在公司實習，沒有專門的前端人員，需要自己寫頁面，以前覺得學java後端學號就行了，實習的才發現錯了，後端是你的資本，前端是你的亮點，前端知識也要理解會用，但是

後端碼農談前端（CSS篇）第五課：CSS樣式

一、背景： CSS 允許應用純色作為背景，也允許使用背景影象建立相當複雜的效果。 1、背景色 可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。 例如： p {background-color: gray;} 2、背景影象 要把影象放入背景，需要使用 bac

後端碼農談前端（CSS篇）第六課：盒子模型

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。 提示：背景應用於由內容和內邊距、邊框組成的區域。 一、CSS 內邊距屬性 屬性 描述 padding 簡寫屬性。作用是在一個宣告中

後端碼農談前端（CSS篇）第七課：定位與浮動

一、定位： 1、定位的理解 （1）相對定位 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。 如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 3

前端必學核心技術知識

各核心技術知識圖譜大曝光，知識庫精華資源強力推薦 知識圖譜由前端技術專家、CSDN部落格專家侯志強（@yisuowushinian）繪製，全棧工程師、架構師、Android和HTML5專家張西濤（@offbye）、HTML5研發工程師谷震平（@guzhenpin

前端工程師，如何更順暢的和後端工程師合作

給你個好建議 我在專案中的經驗 前後端完全解耦 後端只管提供資料 前端管資料的實現 大家先一起開個會 吃個飯 或者打個dota 搞完之後 兩邊都確定一下資料的格式 寫一個紙面上的文件 要哪些欄位 基本的資料結構 最好是用json ，比如確定下來一個這樣的結構 {"name":"viking","age":"2

除了時間戳，後端返回時間，前端的處理

後端 時間 res result () bsp 前端 string 如果 如果後端獲取的時間是data.results[i].time； var aa=new Date(data.results[i].time);var dd=aa.toLocaleString(); 用E

Java 後端工程師實習總結

規範 nbsp 直接 並發 mys 變化 技巧 ted list 2017-9-16 8 月份開始到現在，進行了一個多月的實習，崗位是 Java Web 後端開發。這過程學到的知識著實比自學要來得多，而且也讓我意識到需要學習的知識也更加多。在這裏我會在比較大的方面總結這次實

後端工程師的技術

數據庫 協議 dock docker 網絡編程 掌握 開發 滿足 http 1 後端開發語言 ————> python/lua/php/java/go/ruby....（編程語言是表達思想的工具） 2 運維————> shell腳本，docker 3 安全 ——

前端css知識總結整理

選擇器優先級 tex footer 默認 順序 展現 http 後代選擇器 計算 1.設置css樣式的三種方式？ 外部樣式表，引入一個外部css文件 內部樣式表，將css代碼放在<head>標簽內部 內聯樣式

今日頭條2017後端工程師實習生筆試題 - 題解

進制 true 字符串 從右到左 試題 imp 最終 create head 今日頭條2017後端工程師實習生筆試題 最大映射 題意 給n（不超過50）個字符串，每個字符串（長度不超過12）由A-J的大寫字符組成。要求將每個字符映射為0-9，使得每個字符串可以看作一個整數（

HTTP協議原理+實踐 Web開發工程師必學

長連接 一個 連接 限制 發展 1-1 產生 tag Nginx部署 第1章 課程導學對課程整體進行介紹，並且說明HTTP協議的重要性，以及學習的必要性。1-1 導學1-2 內容介紹 第2章 HTTP協議基礎及發展歷史本章主要介紹什麽是HTTP協議，HTTP協議的發展歷史，

asp.net MVC從後端傳遞資料到前端的幾種資料形式:ViewBag,ViewData,Model

參考:https://blog.csdn.net/xiaouncle/article/details/77825389 在以上文章的基礎上做點相關補充。 1.ViewBag是一個動態欄位，而ViewData是一個字典 首先看後臺程式碼： public ActionResult T

雙11來臨，Java後端工程師書單推薦

《Effective Java 中文版》 豆瓣評分：9.1【1235 人評價】 推薦理由：本書介紹了在Java程式設計中78條極具實用價值的經驗規則，這些經驗規則涵蓋了大多數開發人員每天所面臨的問題的解決方案。 友情提示：同推薦《重構 : 改善既有程式碼的設計》、《程式碼整潔之道》、《程

WYHL 2018.11.12 後端工程師面試總結

一、WYHL公司面試總結   過程： BOSS上投遞了簡歷，後來hr聯絡後簡短了解後。技術官電話面瞭解了下   一個周後，hr聯絡到公司面試。 時間2018.11.12 早上10：00 (因為公交遲到了幾分鐘) 以後注意出發時間 第一個面試官大概是海歸吧！形象氣質風