CSS那些事兒

時間 2019-11-16

標籤 css 那些事兒欄目 CSS 简体版

原文原文鏈接

多個class:

css中容許多個class：
<h1 class="green bold"> ... </h1>。css

選擇器：

Chaining Selectors：

舉例：若是同時有一個p元素和一個h1元素下都有一個class = uppercase，那麼能夠經過在類名前添加它的父類來加以區分：
注意：兩個元素之間沒有空格。(相似的，background-image: url(圖片地址)，url和後面的括號之間也不能有空格）html

h1.special {

}

嵌套元素：

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

想要設置<li> ... </li> 的css樣式，能夠經過嵌套元素的設置方法設置：api

.main-list li {

}

一次選中多個選擇器，並進行css格式化：

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

同時選中：瀏覽器

h1, 
.menu {
  font-family: Georgia;
}

經過用逗號分隔.h1和.menu，這兩個類都會被相應的css格式修飾。ide

CSS 視覺規則：

CSS declarations are structured into property and value pairs.
CSS語句都是屬性和值相對應的結構。
font-family定義了元素的字體。
font-size 控制文字顯示的大小。
font-weight 定義文字的粗細程度。
text-align屬性控制文字的對齊方式，能夠取的分別爲：left, right, center。
文字能夠有兩種顏色屬性：前景色——color和背景色——background-color。color控制文字的顏色，background-color控制文字的背景色。
CSS中能夠用opacity屬性來令某個元素透明。
CSS中也能夠經過 background-image 屬性來設置某個元素的背景爲一張圖片。函數

盒模型：

border屬性：

除了顏色、邊框樣式、邊框大小以外，還能夠調節邊框的圓角大小，單位也是px：佈局

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid rgb(22, 77, 100);
  border-radius: 100%;
}

padding屬性：

能夠分別聲明padding-top、padding-right、padding-bottom以及padding-left的值。
同時也能夠直接聲明padding: 3px 4px 5 px 6px，順序分別是上、右、下、左。
使用上面這種寫法時，全部邊的padding數值都必須寫明。
不過，若是上下、左右的padding值是相等的，也能夠寫做：
padding: 5px 10px，這表明上下的padding都是5px，而左右的padding都是10px。字體

margin屬性：

margin和padding相似，也有margin-top、margin-right、margin-bottom、margin-left。
一樣能夠寫做
margin: 10px 20px 10px 2opx;或者margin: 10px 20px;，表示上下邊距爲10px，左右邊距爲20px。
margin的疊加有一點特殊：
水平方向的疊加就是簡單的數字疊加。例如，若是左邊盒子margin-right = 10px;，而右邊盒子的margin-left = 20px;，那麼這兩個盒子放置在一塊兒時，他們交界處的margin= 10 + 20 = 30px;。
而豎直方向的狀況則有所不一樣，對於疊放的兩個盒子，若是上面盒子的margin-bottom = 30px;，而下面盒子的margin-left = 20px;，則交界處的margin值爲：30px。
利用margin實現居中對齊：
首先須要父元素有固定的width或者height。好比若是想要讓div1實現橫向居中對齊，首先應該設置其父元素div0的width= 400px，而後在css文件中設置div1的margin值爲：margin: 0 auto;ui

overflow:

被父元素包裹着的子元素可能會佔據空間過大而超過父元素的容納範圍，此時能夠經過設置overflow的值來進行調整。
overflow的值能夠爲：scroll、hide、display。url

display屬性：

能夠利用display屬性來設置HTML元素的顯示方式。
能夠設置爲：none, block, inline-block, inline。
none表示元素不顯示；
block表示顯示爲塊級元素；
inline表示顯示爲行內元素；
inline-block表示顯示爲行內塊級元素。
塊級元素和行內塊級元素能夠設置width height屬性，
而行內元素則不能。
注：一旦給元素加上absolute或float就至關於給元素加上了display:block;。

position屬性:

static
fixed
relative
absolute

1. static屬性：
static是html元素的默認position值，也就是按照正常的文檔流排列。
2. fixed屬性：
fixed的效果參見各類定在網頁上的廣告。
3. relative屬性：
relative的元素是相對於本身的default position來定位的。

<div class="first">第一塊</div>
<div class="second">第二塊</div>
<div class="third">第三塊</div>

<!--css文件-->
.first {
  background-color: red;
  color: white;
}

.second {
  background-color: green;
  color: white;
}

.third {
  background-color: blue;
  color: white;
}

3.1 默認狀況下：

3.2 當設置第二塊div的position屬性爲relative時：

.second {
  background-color: green;
  position: relative; //relative定位
  color: white;
}

能夠看到與默認狀況並沒有區別，
這是由於沒有指定目標HTML元素相對其default position的偏移量。

3.3 指定偏移量以後：

.second {
  background-color: green;
  position: relative;
  color: white;
  left: 20px;
  top: 20px;
}

3.4 添加margin/padding值：
雖然單純地偏移並不會影響下面的第三塊div，可是若是設置第二塊div的padding或margin值，仍是會影響到第三塊div在文檔中的位置。

.second {
  background-color: green;
  position: relative;
  color: white;
  margin-bottom: 40px; //增長底部40px的margin，觀察div3的位置變化
  padding-bottom: 10px; //增長底部10px的padding，觀察div3的位置變化
  left: 20px;
  top: 20px;
}

4. absolute定位：
4.1 只設置position：absolute而不設置偏移量：

.first {
  background-color: red;
  color: white;
  height: 40px; //爲方便觀察，把div1的高度設爲40px；
}

.second {
  background-color: green;
  color: white;
  position: absolute; //設置div2的position: absolute;

}

.third {
  background-color: blue;
  color: white;
  height: 40px;  //爲方便觀察，把div3的高度設爲40px；
}

結果：

4.2 設置偏移量：
4.2.1只設置left偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px; // 只設置left偏移40px
}

結果：
![[能夠看到，div2向右偏移了40px，這樣彷佛和relative定位並沒有不一樣，但區別在設置top偏移量以後就一目瞭然了]
](https://upload-images.jianshu...
4.2.2同時設置left偏移量和top偏移量：

.second {
  background-color: green;
  color: white;
  position: absolute;
  left: 40px;
  top: 10px; //同時設置left偏移量和top偏移量
}

結果：

事實上，absolute屬性就是要配合relative屬性使用才能更好發揮做用的：
例如，想要在div3的任意位置顯示一個「發送」按鈕：

<div class="first">第一塊</div>
<div class="second">第二塊</div>
<div class="third">
第三塊
<input type="button" class="send-button" value= "發送">
</div>

.third {
  background-color: blue;
  color: white;
  height: 40px;
  position: relative; //relative定位
}

.send-button {
  position: absolute; //absolute定位
}

設置「發送按鈕」的偏移量：

.send-button {
  position: absolute;
  top: 20px;
  left: 80px;
}

結果：

float：

經過float屬性，可使HTML元素脫離正常的文檔流，豎直方向上將再也不佔用文檔的空間，不過水平方向上不變。
好比能夠利用這一特性，讓序列橫向排列:
HTML文件：

<div class="backPanel">
  <li>
    <ul class="floated">語文</ul>
    <ul class="floated">英語</ul>
    <ul class="floated">數學</ul>
  </li>
</div>

CSS文件：

.backPanel {
  background-color: gray;
  padding: 10px;
}

默認狀況下的結果：

利用float屬性來ul元素橫向排列：

.backPanel {
  background-color: gray;
  padding: 10px;
}

li {
  list-style: none; //去掉了無序列表的小黑點
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center; 
  background-color: white; //以上稍微調整了一下ul元素的樣式
  float: left; // 設置ul元素向左浮動
}

結果：

此時只須要設置一下backPanel的height便可：

.backPanel {
  background-color: gray;
  padding: 10px;
  height: 80px; //看起來是包住了，實際上是鋪在下面了
}

float屬性雖然在豎直方向上不佔空間了，但不會脫離文檔流：

<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

  <li>
    <ul class="floated">語文</ul>
    <ul class="floated">英語</ul>
    <ul class="floated">數學</ul>
  </li>

li {
  list-style: none;
}

.floated {
  width: 29%;
  padding: 1%;
  margin: 1%;
  text-align: center;
  background-color: black;
  color: white;
  float: left;
}

好比如今ul元素都沒有父元素包裹了，上面只有一個<p> </p>元素，float以後的ul元素並不會「飛到」文檔頂端去：

顏色值(color)：

css中的color從類型上能夠分爲color (前景色)和background-color：

<h1>H1</h1>
h1 {
  color: white; //前景色
  background-color: black;  //背景色
}

效果：

css中的color從表現方式上能夠分爲三種：

十六進制表示法；
rgb表示法（還能夠拓展爲rgba表示法，a表示alpha，指的是opacity——不透明度）；
hsl表示法（還能夠拓展爲hsla表示法，a同上）。

舉例：

<div class="hex">hex</div>
<div class="rgb">rgb</div>
<div class="rgba">rgba</div>
<div class="hsl">hsl</div>
<div class="hsla">hsla</div>

.hex {
  background-color: #FFAA00;
  height: 80px;
  width: 80px;
}

.rgb{
  background-color: rgb(222, 22, 2);
  height: 80px;
  width: 80px;
}

.rgba {
  background-color: rgba(222, 22, 2, 0.2);
  height: 80px;
  width: 80px;
}

.hsl {
  background-color: hsl(180, 60%, 90%); //注意百分號
  height: 80px;
  width: 80px;
}

.hsla {
  background-color: hsla(180, 60%, 90%, 0.4); 
  height: 80px;
  width: 80px;
}

結果：

附上各類能叫得名字來的顏色值：有名字的顏色值。

排版：

設置字體：

font-family: 字體名稱;

設置字體權重：

font-weight: bold | normal;
也能夠用數值來表示，數值的範圍爲[100, 900]且必須是100的整數倍。

400 is the default font-weight of most text.
700 signifies a bold font-weight.
300 signifies a light font-weight.

舉例：

<span class="default">中</span>
<span class="bold">中</span>
<span class="light">中</span>

.default {
  font-weight: 400;
}

.bold{
  font-weight: 700;
}

.light{
    font-weight:300;
}

It's important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.

設置字體風格：

font-style: italic; ——斜體；

設置文字大小寫：

text-transform: uppercase | lowercase;

設置文字對齊方式：

text-align: left | right | center;

設置行高：

Another property that we can set for text is line-height. This property modifies the leading of text.
The diagram beneath helps illustrate exactly what the terms "leading" and "line height" mean.

舉例：

p {
  line-height: 1.4;
}

後備字體(fallback fonts):

h1 {
  font-family: "Garamond", "Times", serif;
}

以上CSS語句的意思是：

對網頁上全部的<h1>元素優先使用 Garamond 字體；
若是Garamond 字體不存在，那麼就用 Times 字體；
若是以上兩種字體在目標客戶端上都沒有，那麼就使用該客戶端上存在的任意一種襯線字體(serif)。

注：
相對應地，也存在非襯線字體：sans-serif fonts;

CSS 網格(grid)：

建立網格：

.grid {
  width: 1080px;
  height: 500px;
  display: grid;
}

定義網格列`grid-template-columns：px | %;`

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
}

grid-template-columns: 100px 200px;的意思是：將此網格分爲兩列。
其中，第一列的width = 100px，第二列的width = 200px。
寬度的單位也能夠不是px，能夠用百分數表示：

.grid {
  display: grid;
  width: 1000px;
  grid-template-columns: 20% 50%;
}

上面grid的寬度是1000px，因此第一列的寬度是1000 * 20% = 200px；同理，第二列的寬度是500px。
也能夠混用px和%：

.grid {
  border: 1px solid black; //給grid一個邊框以更好地表現 其中的元素會超出grid的界限
  display: grid;
  width: 100px;
  grid-template-columns: 20px 40% 60px; // 也能夠混用`px`和`%`
}

.item {
  background-color: gray;
}

這3列中，第一列width爲20px，第二列爲100 * 40% = 40px，第三列width爲60px。
注意：也就是說，總寬度20 + 40 + 60 = 120px，超過了100px，元素會超出grid的界限。

定義網格行`grid-template-rows: px | %;`

與定義grid columns是相似的:

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>

.grid {
  border: 1px solid black;
  display: grid;
  width: 1000x;
  height: 400px;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

結果：
![grid-template-rows: 25% 25% 25% 25%;表示把grid分紅4行，每一行佔其height的25%。
](https://upload-images.jianshu...

一句話定義grid的行和列：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
</div>

.grid {
  display: grid;
  width: 600px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;  //斜槓前面定義「行」， 後面定義「列」
//200px 300px兩行，一行高200px，第二行高300px；
//20% 10% 70% 表示3列，第一列寬500 * 20% = 50px；第2、三列相似。
}

.item {
  background-color: gray;
  margin: 2px;
  text-align: center;
}

結果：

fraction (fr):

經過單位fr，咱們能夠將行和列定義爲對grid的length和width的劃分——做用相似於%，可是用%是有超出父容器邊界的風險的，而用fr則不用擔憂，由於瀏覽器會自動對grid進行劃分。

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; //fr的做用
}

這樣作的優勢就是相對於%不用進行繁瑣的計算，且能夠確保grid中的item不會超出邊界。
即便是橫向只用fr定義了3行，而實際的數據有5行，也依然不會形成item出界。
下面作一個對比：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">J</div>
  <div class="item">K</div>
  <div class="item">L</div>
  <div class="item">M</div>
  <div class="item">N</div>
  <div class="item">O</div>
  <div class="item">P</div>
  <div class="item">Q</div>
</div>

<div class="next-grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.next-grid {
  float: left;
  display: grid;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

.item {
  background-color: gray;
  text-align: center;
  
}

repeat()函數：

若是行高或列寬相等，能夠用repeat()函數來簡化語句：

.grid {
  display: grid;
   float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-columns: repeat(4, 1fr); //豎直方向等寬的4列
  grid-template-rows: repeat(3, 1fr); //水平方向等高的3行

}

.item {
  background-color: gray;
  text-align: center; 
}

結果：
![grid-template-columns: repeat(4, 1fr); —— 豎直方向等寬的4列
grid-template-rows: repeat(3, 1fr); —— 水平方向等高的3行](https://upload-images.jianshu...
注：
repeat()後面的fr並非只能有一個：

## minmax函數：
假設有3列，第一列和第三列的列寬都是100px，當瀏覽器的寬度變化時，想要讓中間的那一列的列寬在100px~500px之間變化，則能夠設置：

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

.grid {
  display: grid;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  width: 500px;
  height: 400px;
  grid-gap: 20px 5px;
  grid-template-rows: repeat(4, 1fr 2fr);  //一共8行，(1fr + 2fr)的樣式重複4次。 
  grid-template-columns: repeat(3, 1fr 2fr);
}

結果：

設置行間距、列間距，同時設置行、列間距：

.grid {
  display: grid; 
  width: 320px; 
  grid-template-columns: repeat(3, 1fr);  //等寬的3列
  grid-column-gap: 10px; //列間距
}

行間距同理：
grid-row-gap: 10px;
同時設置行、列間距：
grid-gap: 20px 10px; —— 一句話，分別設置行間距爲20px，列間距爲10px。
注：

It is important to note that grid-gap does not add space at the beginning or end of the grid.

這一簡寫形式並不須要/，若是隻提供了一個值，好比：grid-gap: 10px;，則至關於grid-gap: 10px 10px;。

以上都是針對grid自己的，如下語法則是針對grid的item的：

設置item跨行 `grid-row-start: 5; grid-row-end: 7;`:

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template: repeat(4, 1fr 2fr) / repeat(4, 3fr 2fr);
  grid-gap: 5px;
}

.a {
  grid-row-start: 5; //設置這個item的起始行是第5行
  grid-row-end: 7; //設置這個item在跨第五、6行，不跨第7行——終止於第7行以前
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

簡寫形式：

.a {
  grid-row: 5 / 7;
}

同理，

設置item跨列：

.item {
  grid-column-start: 4;
  grid-column-end: 6;
}

一樣，也能夠寫做：

.item {
  grid-column: 4 /6;
}

利用`span`屬性來避免「偏差」：

span能夠明確地指出但願行或列跨越的距離：
好比，若是想要row從第4行開始，佔兩行，就能夠直接寫做：

.item {
  grid-row: 4 / span 6;
}

不用grid-row的簡寫形式，也能夠寫做：

.item {
  grid-row-start: 4;
  grid-row-end: span 2;
}

固然，span也能夠用在grid-row-start以後，瀏覽器會自動爲咱們計算出結果：

.b {
  grid-row-start: span 3;
  grid-row-end: 3;
}

結果：

對於grid-column，span的用法是徹底相同的，再也不贅述。

網格區域(grid area)：

能夠用一句話聲明一個item佔grid的多少行、列，並限定它在grid中的具體位置。

.b {
  grid-area: 2 / 3 / span 2 / span 4;
}

結果：

CSS網格進階屬性：

Grid Template Areas:

利用這個屬性，能夠先作出一個模板，而後讓各個元素分別去「認領」他們所佔的行和列。

<div class="container">
  <header>Welcome!</header>
  <nav>Links!</nav>
  <section class="info">Info!</section>
  <section class="services">Services!</section>
  <footer>Contact us!</footer>
</div>

好比container下面有5個板塊:

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav" 
                       "info services"
                       "footer footer";
  grid-template-rows: 300px 120px 800px 120px;
  grid-template-columns: 1fr 3fr; 
}

先用 grid-template-areas屬性「打好格子",而後各部分元素再利用grid-area屬性將本身「代入」打好的格子中：

header {
  grid-area: head;
} 

nav {
  grid-area: nav;
} 

.info {
  grid-area: info;
} 

.services {
  grid-area: services;
}

footer {
  grid-area: footer;
}

注：
圖中的grid是四行兩列的，當header 和 header並列時，表示header佔兩列，此時header將佔據整行，即便存在grid gap，依然不會將兩個header分隔開。虛線只是爲了便於理解，實際並不存在。

justify-items：

設置grid元素在每一個格子中水平方向上的對齊方式。
justify-items屬性能夠接收的值爲：

start
end
end
strench

注：這個屬性是container中的，而不是每一個item的。

align-items:

設置grid元素在每一個格子中豎直方向上的對齊方式：
一樣能夠接收如下值：

start
end
end
strench

注：這個屬性是container中的，而不是每一個item的。

justify-content：

設置整個grid在其父容器中，水平方向上的對齊方式：
能夠取的值爲：

屬性取值	效果
start	aligns the grid to the left side of the grid container
end	aligns the grid to the right side of the grid container
center	centers the grid horizontally in the grid container
stretch	stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around	includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between	includes an equal amount of space between grid items and no space at either end
space-evenly	places an even amount of space between grid items and at either end

main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

align-content：

同理，利用align-content屬性能夠設置整個grid在其父容器中，豎直方向上的對齊方式。
原理均與justify-content屬性類似，再也不贅述。

Justify Self and Align Self:

利用justify-self、align-self屬性，能夠分別設置grid的每一個格子中，具體某個item在水平、豎直方向上的對齊方式。

屬性能夠取的四種值	效果
start	positions grid items on the left side/top of the grid area
end	positions grid items on the right side/bottom of the grid area
center	positions grid items on the center of the grid area
stretch	positions grid items to fill the grid area (default)