CSS那些事兒

多個class:

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

選擇器：

Chaining Selectors：

舉例：如果同時有一個p元素和一個h1元素下都有一個class = uppercase钮惠，那么可以通過在類名前添加它的父類來加以區(qū)分：
注意：兩個元素之間沒有空格蘸拔。(類似的拾稳，background-image: url(圖片地址)胖腾，url和后面的括號之間也不能有空格）

h1.special {

}

嵌套元素：

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

想要設(shè)置<li> ... </li> 的css樣式，可以通過嵌套元素的設(shè)置方法設(shè)置：

.main-list li {

}

一次選中多個選擇器媒役，并進(jìn)行css格式化：

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

同時選中：

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

通過用逗號分隔.h1和.menu，這兩個類都會被相應(yīng)的css格式修飾宪迟。

CSS 視覺規(guī)則：

CSS declarations are structured into property and value pairs.
CSS語句都是屬性和值相對應(yīng)的結(jié)構(gòu)酣衷。
font-family定義了元素的字體。
font-size 控制文字顯示的大小次泽。
font-weight 定義文字的粗細(xì)程度穿仪。
text-align屬性控制文字的對齊方式，可以取的分別為：left, right, center意荤。
文字可以有兩種顏色屬性：前景色——color和背景色——background-color啊片。color控制文字的顏色，background-color控制文字的背景色玖像。
CSS中可以用opacity屬性來令某個元素透明紫谷。
CSS中也可以通過 background-image 屬性來設(shè)置某個元素的背景為一張圖片。

盒模型：

border屬性：

除了顏色捐寥、邊框樣式笤昨、邊框大小之外，還可以調(diào)節(jié)邊框的圓角大小握恳，單位也是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數(shù)值都必須寫明壳炎。
不過，如果上下逼侦、左右的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的疊加有一點特殊：
水平方向的疊加就是簡單的數(shù)字疊加芍瑞。例如，如果左邊盒子margin-right = 10px;褐墅，而右邊盒子的margin-left = 20px;拆檬，那么這兩個盒子放置在一起時，他們交界處的margin= 10 + 20 = 30px;妥凳。
而豎直方向的情況則有所不同竟贯，對于疊放的兩個盒子，如果上面盒子的margin-bottom = 30px;逝钥，而下面盒子的margin-left = 20px;澄耍，則交界處的margin值為：30px。
利用margin實現(xiàn)居中對齊：
首先需要父元素有固定的width或者height晌缘。比如如果想要讓div1實現(xiàn)橫向居中對齊齐莲，首先應(yīng)該設(shè)置其父元素div0的width= 400px，然后在css文件中設(shè)置div1的margin值為：margin: 0 auto;

overflow:

被父元素包裹著的子元素可能會占據(jù)空間過大而超過父元素的容納范圍磷箕，此時可以通過設(shè)置overflow的值來進(jìn)行調(diào)整选酗。
overflow的值可以為：scroll、hide岳枷、display芒填。

display屬性：

可以利用display屬性來設(shè)置HTML元素的顯示方式呜叫。
可以設(shè)置為：none, block, inline-block, inline。
none表示元素不顯示殿衰；
block表示顯示為塊級元素朱庆；
inline表示顯示為行內(nèi)元素；
inline-block表示顯示為行內(nèi)塊級元素闷祥。
塊級元素和行內(nèi)塊級元素可以設(shè)置width height屬性娱颊，
而行內(nèi)元素則不能。
注：一旦給元素加上absolute或float就相當(dāng)于給元素加上了display:block;凯砍。

position屬性:

static
fixed
relative
absolute

1. static屬性：
static是html元素的默認(rèn)position值箱硕，也就是按照正常的文檔流排列。
2. fixed屬性：
fixed的效果參見各種定在網(wǎng)頁上的廣告悟衩。
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 默認(rèn)情況下：

默認(rèn)的HTML元素布局

3.2 當(dāng)設(shè)置第二塊div的position屬性為relative時：

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

可以看到與默認(rèn)情況并無區(qū)別，
這是因為沒有指定目標(biāo)HTML元素相對其default position的偏移量座泳。

只指定relative惠昔，未指定偏移量時，并無變化

3.3 指定偏移量之后：

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

相對于其default position向下向左各偏移20px

3.4 添加margin/padding值：
雖然單純地偏移并不會影響下面的第三塊div挑势，但是如果設(shè)置第二塊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;
}

添加margin/padding后可以看到div3被“擠下去”了

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

.first {
  background-color: red;
  color: white;
  height: 40px; //為方便觀察，把div1的高度設(shè)為40px饼齿；
}

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

}

.third {
  background-color: blue;
  color: white;
  height: 40px;  //為方便觀察饲漾，把div3的高度設(shè)為40px；
}

結(jié)果：

div2此時的父元素是body元素缕溉，body元素默認(rèn)是relative布局的考传。當(dāng)只設(shè)置position: absolute而不指定偏移量的時候，div2會依照default position來定位其布局证鸥，但不會占用HTML文檔的文檔流空間僚楞，所以可以看到div3從下面上來了。

4.2 設(shè)置偏移量：
4.2.1只設(shè)置left偏移量：

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

結(jié)果：

[可以看到枉层，div2向右偏移了40px泉褐，這樣似乎和relative定位并無不同，但區(qū)別在設(shè)置top偏移量之后就一目了然了]

4.2.2同時設(shè)置left偏移量和top偏移量：

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

結(jié)果：

同時設(shè)置left偏移40px和top10px鸟蜡，可以看到top指示的向下偏移是以body元素為參照的膜赃。這正是因為body元素是div2的第一個relative布局的父元素。

事實上揉忘，absolute屬性就是要配合relative屬性使用才能更好發(fā)揮作用的：
例如跳座，想要在div3的任意位置顯示一個“發(fā)送”按鈕：

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

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

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

未設(shè)置發(fā)送按鈕的偏移量之前發(fā)送按鈕所處的位置

設(shè)置“發(fā)送按鈕”的偏移量：

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

結(jié)果：

可以看到端铛，“發(fā)送按鈕”相對于div3的左上角向右偏移了80px，向下偏移了20px

float：

通過float屬性疲眷，可以使HTML元素脫離正常的文檔流禾蚕，豎直方向上將不再占用文檔的空間，不過水平方向上不變狂丝。
比如可以利用這一特性换淆，讓序列橫向排列:
HTML文件：

<div class="backPanel">
  <li>
    <ul class="floated">語文</ul>
    <ul class="floated">英語</ul>
    <ul class="floated">數(shù)學(xué)</ul>
  </li>
</div>

CSS文件：

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

默認(rèn)情況下的結(jié)果：

未浮動的無序列表元素是豎向排列的

利用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; //以上稍微調(diào)整了一下ul元素的樣式
  float: left; // 設(shè)置ul元素向左浮動
}

結(jié)果：

可以看到，設(shè)置float之后美侦，ul元素不再占用豎直方向上的空間，所以包著他們的父div也就包不住它們了

此時只需要設(shè)置一下backPanel的height即可：

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

float屬性的應(yīng)用

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">數(shù)學(xué)</ul>
  </li>

li {
  list-style: none;
}

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

比如現(xiàn)在ul元素都沒有父元素包裹了，上面只有一個<p> </p>元素耻煤，float之后的ul元素并不會“飛到”文檔頂端去：

ul元素沒有脫離文檔流具壮，只是其高度會塌陷

顏色值(color)：

css中的color從類型上可以分為color (前景色)和background-color：

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

效果：

白色為前景色，黑色為背景色

css中的color從表現(xiàn)方式上可以分為三種：

十六進(jìn)制表示法哈蝇；
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;
}

結(jié)果：

各種顏色表示法舉例

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

排版：

設(shè)置字體：

font-family: 字體名稱;

設(shè)置字體權(quán)重：

font-weight: bold | normal;
也可以用數(shù)值來表示性芬，數(shù)值的范圍為[100, 900]且必須是100的整數(shù)倍。

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;
}

400: normal, 700: bold, 300: light

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.

設(shè)置字體風(fēng)格：

font-style: italic; ——斜體剧防；

設(shè)置文字大小寫：

text-transform: uppercase | lowercase;

設(shè)置文字對齊方式：

text-align: left | right | center;

設(shè)置行高：

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.

image.png

舉例：

p {
  line-height: 1.4;
}

后備字體(fallback fonts):

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

以上CSS語句的意思是：

對網(wǎng)頁上所有的<h1>元素優(yōu)先使用 Garamond 字體植锉；
如果Garamond 字體不存在，那么就用 Times 字體峭拘；
如果以上兩種字體在目標(biāo)客戶端上都沒有俊庇，那么就使用該客戶端上存在的任意一種襯線字體(serif)。

注：
相對應(yīng)地鸡挠，也存在非襯線字體：sans-serif fonts;

CSS 網(wǎng)格(grid)：

創(chuàng)建網(wǎng)格：

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

定義網(wǎng)格列`grid-template-columns：px | %;`

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

grid-template-columns: 100px 200px;的意思是：將此網(wǎng)格分為兩列辉饱。
其中，第一列的width = 100px拣展，第二列的width = 200px鞋囊。
寬度的單位也可以不是px，可以用百分?jǐn)?shù)表示：

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

上面grid的寬度是1000px瞎惫，所以第一列的寬度是1000 * 20% = 200px溜腐；同理译株，第二列的寬度是500px。
也可以混用px和%：

.grid {
  border: 1px solid black; //給grid一個邊框以更好地表現(xiàn) 其中的元素會超出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的界限夯缺。

示例

定義網(wǎng)格行`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;
}

結(jié)果：

grid-template-rows: 25% 25% 25% 25%;表示把grid分成4行，每一行占其height的25%甘耿。

一句話定義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毁葱；第二垫言、三列類似。
}

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

結(jié)果：

grid-template: 200px 300px / 20% 10% 70%; 一句話定義grid的行和列

fraction (fr):

通過單位fr倾剿，我們可以將行和列定義為對grid的length和width的劃分——作用類似于%筷频，但是用%是有超出父容器邊界的風(fēng)險的，而用fr則不用擔(dān)心前痘，因為瀏覽器會自動對grid進(jìn)行劃分截驮。

<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的作用
}

可以看到第一行的行高是第二、三行的行高之和(1 : 1)际度；第二列的列寬是第一列或者第三列的列寬的3倍 (1 : 3)葵袭。

這樣做的優(yōu)點就是相對于%不用進(jìn)行繁瑣的計算，且可以確保grid中的item不會超出邊界乖菱。
即使是橫向只用fr定義了3行坡锡，而實際的數(shù)據(jù)有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;
  
}

一圖勝千言鹉勒。可以看到第1行的height依然是第二吵取、三行之和禽额，不過瀏覽器自動為多出來的行留出了空間，并在保持第一行和第二、三行的比例不變的情況下脯倒，壓縮了它們的height实辑。

repeat()函數(shù)：

如果行高或列寬相等革屠，可以用repeat()函數(shù)來簡化語句：

.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; 
}

結(jié)果：

grid-template-columns: repeat(4, 1fr); —— 豎直方向等寬的4列 grid-template-rows: repeat(3, 1fr); —— 水平方向等高的3行

注：
repeat()后面的fr并不是只能有一個：



## minmax函數(shù)：
假設(shè)有3列狠裹，第一列和第三列的列寬都是100px，當(dāng)瀏覽器的寬度變化時漓穿，想要讓中間的那一列的列寬在100px~500px之間變化悠反，則可以設(shè)置：

.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)的樣式重復(fù)4次。 
  grid-template-columns: repeat(3, 1fr 2fr);
}

結(jié)果：

repeat()函數(shù)的第二個參數(shù)是可以接收多個值的

設(shè)置行間距斋否、列間距梨水，同時設(shè)置行、列間距：

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

行間距同理：
grid-row-gap: 10px;
同時設(shè)置行茵臭、列間距：
grid-gap: 20px 10px; —— 一句話疫诽，分別設(shè)置行間距為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;社证，則相當(dāng)于grid-gap: 10px 10px;。

以上都是針對grid本身的评凝，以下語法則是針對grid的item的：

設(shè)置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; //設(shè)置這個item的起始行是第5行
  grid-row-end: 7; //設(shè)置這個item在跨第5追葡、6行，不跨第7行——終止于第7行之前
}

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

簡寫形式：

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

同理奕短，

設(shè)置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;
}

當(dāng)然日杈，span也可以用在grid-row-start之后遣铝，瀏覽器會自動為我們計算出結(jié)果：

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

結(jié)果：

span的用法：B item占三行，并且是從第3行末尾往前數(shù)

對于grid-column莉擒，span的用法是完全相同的酿炸，不再贅述。

網(wǎng)格區(qū)域(grid area)：

可以用一句話聲明一個item占grid的多少行涨冀、列填硕，并限定它在grid中的具體位置。

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

結(jié)果：

2表示從第2行開始鹿鳖，3表示從第3列開始扁眯，span 2表示從跨兩行壮莹， span 4表示跨4列

CSS網(wǎng)格進(jìn)階屬性：

Grid Template Areas:

利用這個屬性，可以先做出一個模板恋拍，然后讓各個元素分別去“認(rèn)領(lǐng)”他們所占的行和列垛孔。

<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-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是四行兩列的，當(dāng)header 和 header并列時施敢，表示header占兩列周荐，此時header將占據(jù)整行，即使存在grid gap僵娃，依然不會將兩個header分隔開概作。虛線只是為了便于理解，實際并不存在默怨。

justify-items：

設(shè)置grid元素在每個格子中水平方向上的對齊方式讯榕。
justify-items屬性可以接收的值為：

start
end
end
strench

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

align-items:

設(shè)置grid元素在每個格子中豎直方向上的對齊方式：
同樣可以接收以下值：

start
end
end
strench

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

justify-content：

設(shè)置整個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;
}

設(shè)置整個grid在其父容器中霎槐，水平方向上的對齊方式

align-content：

同理，利用align-content屬性可以設(shè)置整個grid在其父容器中梦谜，豎直方向上的對齊方式丘跌。
原理均與justify-content屬性相似，不再贅述唁桩。

Justify Self and Align Self:

利用justify-self闭树、align-self屬性，可以分別設(shè)置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)

最后編輯于：2019.07.13 07:40:49

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末单山，一起剝皮案震驚了整個濱河市碍现，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌饥侵，老刑警劉巖鸵赫，帶你破解...
沈念sama閱讀 219,039評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異躏升，居然都是意外死亡辩棒，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,426評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來一睁，“玉大人钻弄，你說我怎么就攤上這事≌哂酰” “怎么了窘俺？”我有些...
開封第一講書人閱讀 165,417評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長复凳。經(jīng)常有香客問我瘤泪，道長，這世上最難降的妖魔是什么育八？我笑而不...
開封第一講書人閱讀 58,868評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任对途，我火速辦了婚禮，結(jié)果婚禮上髓棋，老公的妹妹穿的比我還像新娘实檀。我一直安慰自己，他們只是感情好按声，可當(dāng)我...
茶點故事閱讀 67,892評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布膳犹。她就那樣靜靜地躺著，像睡著了一般签则。火紅的嫁衣襯著肌膚如雪须床。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,692評論 1贊 305
城市分裂傳說
那天怀愧，我揣著相機(jī)與錄音侨颈，去河邊找鬼余赢。笑死芯义，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的妻柒。我是一名探鬼主播扛拨，決...
沈念sama閱讀 40,416評論 3贊 419
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼举塔！你這毒婦竟也來了绑警？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,326評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤央渣，失蹤者是張志新（化名）和其女友劉穎计盒，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芽丹，經(jīng)...
沈念sama閱讀 45,782評論 1贊 316
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡北启，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,957評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咕村。...
茶點故事閱讀 40,102評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡场钉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出懈涛，到底是詐尸還是另有隱情逛万，我是刑警寧澤，帶...
沈念sama閱讀 35,790評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布批钠，位于F島的核電站宇植，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏埋心。R本人自食惡果不足惜当纱，卻給世界環(huán)境...
茶點故事閱讀 41,442評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望踩窖。院中可真熱鬧坡氯，春花似錦、人聲如沸洋腮。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,996評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽啥供。三九已至悯恍，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間伙狐，已是汗流浹背涮毫。一陣腳步聲響...
開封第一講書人閱讀 33,113評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留贷屎，地道東北人罢防。一個月前我還...
沈念sama閱讀 48,332評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像唉侄，于是被迫代替她去往敵國和親咒吐。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,044評論 2贊 355

CSS那些事兒

多個class:

選擇器：

Chaining Selectors：

嵌套元素：

一次選中多個選擇器媒役，并進(jìn)行css格式化：

CSS 視覺規(guī)則：

盒模型：

border屬性：

padding屬性：

margin屬性：

overflow:

display屬性：

position屬性:

float：

顏色值(color)：

排版：

設(shè)置字體：

設(shè)置字體權(quán)重：

設(shè)置字體風(fēng)格：

設(shè)置文字大小寫：

設(shè)置文字對齊方式：

設(shè)置行高：

后備字體(fallback fonts):

CSS 網(wǎng)格(grid)：

創(chuàng)建網(wǎng)格：

定義網(wǎng)格列grid-template-columns：px | %;

定義網(wǎng)格行grid-template-rows: px | %;

一句話定義grid的行和列：

fraction (fr):

repeat()函數(shù)：

設(shè)置行間距斋否、列間距梨水，同時設(shè)置行、列間距：

以上都是針對grid本身的评凝，以下語法則是針對grid的item的：

設(shè)置item跨行 grid-row-start: 5; grid-row-end: 7;:

設(shè)置item跨列：

利用span屬性來避免“誤差”：

網(wǎng)格區(qū)域(grid area)：

CSS網(wǎng)格進(jìn)階屬性：

Grid Template Areas:

justify-items：

align-items:

justify-content：

align-content：

Justify Self and Align Self:

推薦閱讀更多精彩內(nèi)容

定義網(wǎng)格列`grid-template-columns：px | %;`

定義網(wǎng)格行`grid-template-rows: px | %;`

設(shè)置item跨行 `grid-row-start: 5; grid-row-end: 7;`:

利用`span`屬性來避免“誤差”：