css網頁佈局

最大價值：讓html做結構，與樣式相分離

選擇器 {屬性：值;屬性：值;}

p {
    color: red;
}

css的程式碼風格

• 樣式格式書寫:緊湊格式 , 展開格式（提倡，更直觀）
• 樣式的大小寫:用小寫的形式做
• 空格規範:屬性值前面，冒號後面，空一格;選擇器和大括號中間保留一個空格;css選擇器的作用：簡單來說，就是選擇標籤用的

css的三種書寫

• 內部樣式表：html的內部，style標籤內，理論上可以放在任何地方，但常用於上方(嵌入式的)，可以控制整個頁面

  優點:結構清晰

• 行內樣式表：直接砸標籤內部寫style標籤

  <p style="color:red"></p>
   
  

  用於修改簡單的樣式

• 外部樣式表：樣式和結構分離，css在html的外部

  1. 新建一個css的檔案，css檔案只有樣式，沒有標籤

  2. <link rel="sytlesheet" href="路徑"/>
     

link和@import（css2）的區別

<style>
    @import url('...');
</style>

• 寫的形式不一樣
• link是xhtml標籤，@import屬於css的範圍，只能載入css
• link應用css時，在頁面載入的時候同時載入，@import需要頁面網頁完全載入以後載入
• link支援使用javascript控制DOM去改變樣式，而@import不支援

CSS背景

• 背景圖片：優點，容易控制位置

  // 背景圖片
  backgroud-img:none/url;
  // 背景平鋪：重複圖片
  background-repeat: none/no-repeat;
  //背景圖片位置 注意：方位名詞只寫一個時，另外一個預設居中顯示；無順序的要求
  background-positon: x y;
  // 背景影象固定 負值的時候是往左和往上移動
  background-attachment: sroll/fixed;
  // 背景顏色
  background-color: red;
  // 背景縮放 可以數字固定也可以時百分比，百分比時候是根據盒子的百分比為基準
  background-size: x y;	
  background-size: contain;	// 等比例的拉伸圖片,不超過盒子
  background-size: cover;		// 等比例的拉伸圖片,會超過盒子
   
  

  背景複合寫法：background習慣性的寫 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

  多倍景：先寫的覆蓋後寫的 圖片one會堆疊再two上

  background: url('one') no-repeat left bottom,url('two') norepeat center center
  

• 背景色半透明

  background: rgba(0,0,0,0.3);
  

• 背景漸變

  background: linear-gradient(起始方向,顏色1，顏色2...);
  #起始位置：left right tip bottom ; to left bottom 左下角
  background: -webkit-linear-gradient(left,red,blue);
  background: -webkit-linear-gradient(left/top,red,blue);
  // 顏色節點均勻分佈
  background: radio-gradient(red,green,blue);
  // 顏色不均勻的徑向漸變
  background: radio-gradient(red %4,gree 10%,blue 4%);
  // 現狀為圓形的徑向漸變
  background: radio-gradient(circle,red,green,blue);
  

  注意：

  1. 背景漸變必須新增瀏覽器的私有字首
  2. 背景圖片要設定成功，必須要有高和寬

Emmont語法

快速標籤生成

• tab鍵，直接輸入標籤名

• 生成多個標籤，eg:div3(加tab鍵)

• 父子級關係>(tab)；兄弟級關係+(tab)

• 生成帶有類名或是id名的，直接寫.demo(tab) 或者#demo(tab)

  div.demo(tab)或者div#demo(tab)
  

• 若生成的類名有順序,用$自增符號，從1開始排序

  demo$*5(tab)
  

• 預設顯示幾個文字，用{}

  div{我不喜歡}(tab) 
  div{$@1996}*2 //從1998到1999
  

選擇器

• 基礎選擇器

  1. 標籤選擇器
  2. 類選擇器：最常用的
  3. ID選擇器：有唯一性，同一個id屬性只能有一個
  4. 萬用字元選擇器：*{}

• 偽類選擇器

  a:link沒訪問過的連結

  a:visited訪問過的連結

  a:hover滑鼠經過時的連結

  a:active點選沒有鬆開時

  按順序申明：link visited hover active

  目標偽類選擇器

  :target {	// 匹配頁面中所有目標元素 h1
      color: red;
  }	
  
  <a href='#anchor1'>one</a>
  <a href='#anchor2'>two</a>
  <a href='#anchor1'>one</a>
  <h1 id='anchor1'>瞄點一</h1> 
  <h1 id='anchor2'>瞄點二</h1>
  

  E:only-child {	
      // 匹配所有沒有任何兄弟元素 並且這個元素是E
      color: red;
  }
  

  E:only-of-type {}	//匹配沒有和E同種型別的元素
  // 匹配所有E元素，且這個E元素沒有任何同一型別的兄弟元素
  

  E:empty {}	// 匹配所有p標籤，且沒有任何內容和子節點
  

• 複合選擇器

  交集選擇器

  兩個標籤挨在一起，中間不能有空格

  div.test 表示既是div而且div的類名是test

  並集選擇器：逗號隔開

常見文字屬性

font-style

• itaic：傾斜字型，有一些傾斜字型的文字是沒有斜體的，使用瀏覽器強制執行
• normal：預設正常值
• oblique： 瀏覽器會顯示傾斜的字型樣式。

font-weight

字型粗細

• 數字：100-900取值範圍
• 單詞：normal正常 bold bolder加粗 lighter變細

font-family

字型樣式

• '宋體' / '隸屬'
• '\5E7C\5706'
• LiSu 如果是英文單個 不需要引號
• Georgia 'Times New Roman' 'Times' serif '隸書' 既有英文又有中文，中文寫在後面

font-size

• samller x-samller xx-samller large larger x-large xx-large
• 數字加單位形式 13px

單位

100vw：整屏寬度

100vh：整屏高度

vmax：選vh vm中較大的一個

vmin：選vh vm中較小的一個

• 相對定位

  em:相對於當前物件內文字字型尺寸

  px:相相對於電腦螢幕的解析度，谷歌預設文字大小是16px

• 絕對定位

  in:英寸

  cm:釐米
  mm:毫米

  pt:點

font

// 空心文字 
<style>
       span {
           font-size: 40px;
           font-weight: 700;
           -webkit-text-fill-color: #f4f4f4;
           -webkit-text-stroke-color: red;
           -webkit-text-stroke-width: 1px;
       }
   </style>
   <span>空心文字</span>

font屬性對字型進行綜合的設定

font: font-style font-weight font-size/line-height font-family

注意：使用font屬性時，必須按照以上順序書寫，不能更換順序

其中不需要的屬性可以省略，但必須保留font-size和font-family

color

字型顏色

• red

• cccccc

  00ffaa 兩兩相同可以省略 #0fa

• rgb(a,b,c)

  raba 最後a表示透明度：0表示完全透明，1表示完全不透明

• hsl( )

  H 顏色名字：取0到360 0/360紅色 120綠色 240藍色

  S 純度：值越高越純 越低越灰 （0-100%）

  L 亮色：黑到白 越低越白 越高越黑 （0-100%）

text-align

文字對在標籤之中的對齊方式，，預設左對齊

• center
• left
• right
• justify:文字的兩端對齊，一般用於英文鋸齒狀

text-decoration

文字劃線

• none：沒有樣式
• underline：下劃線
• overline：上劃線
• line-throught：刪除線

<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-decoration: none;
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
    }
</style>

text-transform

轉換文字的大小寫

• capitalize：每一個單詞的首字母大小
• lovwercase：所有字母都小寫
• uppercase：所有字母都大寫
• none：預設都不改變

<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-transform: lowercase;
        text-transform: uppercase;
        text-transform: capitalize;
    }
</style>

text-indent

首行的文字縮排，em一個文字大小

text-indent: 2em;
// -200px

注意：允許負的

text-shadow

文字陰影

text-shadow: 水平方向的陰影位置 垂直的陰影位置 模糊距離 陰影顏色

text-shadow: -10px -10px 3px red,10px 10px 3px pink

注意：可以寫多組文字陰影，用逗號隔開

letter-spacing

增加或減少字元間的距離，正值增加，負值減少，用於漢字

若用於字母，則每個字母間的距離都會變大

letter-spacing: 20px;

word-spacing

用於英文的

word-spacing: 20px

line-height

行高，該上下間距，文字行和文字行之間的距離

• number：固定的數字，此數字會與當前字型尺寸相乘來設定行間距

• length：設定固定的行間距

• %：基於當前字型尺寸的百分比行間距

  注意：一般情況下，行距比字號大7 8 畫素即可

word-break

• normal:使用瀏覽器預設的換行規則

• keep-all:文字內容在同一行顯示，不換行

  注意：在半形空格和-的時候可以換行，第一次遇見空格會直接換行，接著要看是否超過顯示框，如果沒有超過就不換行

  一般不用於英文

• break-all：針對英文，所有單詞遇到邊界一律拆分

white-space

• pre：保留文字原本的樣式，超過父元素不換行
• nowrap：文字不換行，文字再一排(一行)顯示
• pre-wrap：能解析空格，超出部分自動換行
• pre-line：不解析空格，超過部分自動換行

層疊性 優先順序 繼承性

層疊性是瀏覽器處理衝突的能力，如果一個css屬性通過兩個選擇器設定到同一個元素上，那麼這個時候的屬性就會被另外一個屬性層疊掉

優先順序

!important>行內樣式>id選擇器>類/偽類選擇器>標籤選擇器>繼承或者*

權重疊加：計算權重,權重會疊加，但不會有進位

• 行內樣式 1 0 0 0
• id選擇器 0 1 0 0
• 類選擇器 0 0 1 0
• 元素選擇器和偽元素選擇器 0 0 0 1
• 萬用字元，子選擇器，兄弟選擇器 * > + ~等 0 0 0 0
• 繼承的樣式沒有權重 !important的權重最高

繼承性

文字字型的屬性：font-size font-family color text-align

注意

• a標籤裡面的文字顏色是不能繼承父親的設定的

  <style>
          div {
              color: pink;
          }
      </style>
      <div>
          <a href="#">dsagoji</a>
      </div>
  

繼承的是離它最近的祖先元素

	<style>
        #test {
            color: red;
        }
        .father2 {
            color: black;
        }
    </style>

    <div id='test'>
        <div class="father">
            father	// 繼承id　的紅色
            <div class="son">son</div>	// 繼承id的 black
        </div>
        <div class="fater2">
            father2		// 類＞id　black
            <div class="son2">
                son2
            </div>
        </div>
    </div>

盒子模型

盒子模型：marge padding content border

ie盒模型 : 最大的不同在於padding不會撐大盒子

margin

border

border:border-width border-style(solid dashed dotted) border-color

border複合寫法：

border:1px solid red	// 邊框寬度 邊框樣式 邊框顏色
border-style: solid dotted dashed double; 	// 實線 電線 虛線 雙線
border-color: red;
border-width: 2px 3px 1px 	// 上2 右3 下1 左和右一樣3

border分別設定

border-right-style: dotted;
border-top-color: red;
border-left-width: 3px;

(沒有嚴格的順序要求，一般按照這樣格式)

  border-collapse: collapse;(表格的細線邊框)

注意：邊框會影響盒子的實際大小

border-radius邊框圓角

border-radius: 4px 8px 12px 16px 	// 左上 右上 右下 坐下
border-radius: 4px 8px; 	// 如果沒有某個值就從對角取值
border-top-left-radius: 5px; // 坐上角

​ 複合寫法eg:

​ padding: 5px 代表上下左右都是5px

​ padding: 5px 10px 上下5，左右10

​ padding: 5px 10px 15px 上5px 左右10px 下20px

​ padding: 5px 10px 15px 20px 從上開始順時針

​ marge與padding類似

padding不會撐破盒子

• 如果沒盒子本身沒有指定高度或者寬度時，不會撐大盒子

浮動的盒子不會有外邊距合併的問題

陰影盒子和文字陰影

box-shadow:h-shadow v-shadow blur spread color inser;	// 水平方向(必填) 垂直方向(必填) 模糊距離 陰影大小 內部陰影

h-shadow,v-shadow:設定陰影的位置

spread:向外延展的尺寸距離，設定陰影的大小

注意

1. inser不寫時候預設是outside，但不可以寫，不然陰影無效
2. 盒子陰影不佔空間，不會影響其他盒子的排列

文字陰影：text-shadow:h-shadow v-shadow blur color;

浮動

float: left;
float: right;

CSS浮動特性

標準流：從上往下 從左往右

​ 塊級元素一般在父元素從上到下排列

​ 行內元素一般在父元素從左到右排列

• 會脫離標準流的控制（俗稱脫標），不在保留原來的位置

• 不管原先是什麼元素，加了浮動後具有行內塊元素的特點

  如果是塊級元素，想要有高度，必須手動新增，它預設的100%新增浮動後會消失

• 所有浮動的盒子在一行顯示，並且頂端對其（不管低端），若是裝不下，會另起一行顯示

  浮動的元素不會撐開父元素

	<style>
 .father1 {
            width: 220px;
            height: 200px;
            box-sizing: border-box;
            border: 2px solid red;
        }
        .father1 div[class^='son'] {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <div class="angle"></div>
    <div class="father1">Lorem ipsum dolor sit t magni nesciunt eaque amet saepe exercitationem? Voluptatum aute
        m aut sint distinctio itaque corrupti tenetur ad blanditiis?
        <img src="images/睜眼.png" alt="">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

• 浮動的元素不會遮住文字和圖片

  清除浮動

• 同層級

  clear: left;
  // ----------------
  clear: right;
  // ----------------
  clear: both;
  

• 父子級

  1. 給父元素加heitht(不推薦)

  2. BFC佈局

     overflow: hidden;
     // -----------------------
     display: inline-block
     

  3. 給父元素的浮動後邊加一個空的塊級標籤，設定清除浮動

     clear: both;
     // ---------------------
     E::after {
         content: '';
         display: block;
         clear: both;
     }
     // -----------------------------
     //IE6,7專用
     *zoom: 1;
     

CSS消除樣式

清除內外邊距css樣式
		 * {
			 marge:0; 
			 padding:0;
		 }
		 注意：行內元素為了相容性儘量只設置左右的內外邊距，設定之後可能也並不會起作用

ul li {
	list-style: none;
}

定位

定位：將盒子定在某一個位置，定位也是在擺放盒子，按照定位的方式移動盒子

定位：定位模式+邊偏移

定位模式是用來指定一個元素在文件中的定位方式，邊偏移則決定了該元素的最終位置

定位模式

• static:靜態定位

• relative:相對定位

  相對定位是元素在移動位置的時候，相對於它原來的位置來說的（自戀型）

  positon: relative
  

  注意

  1. 它是相對與自己原來的位置移動的（移動位置的時候參照點是原來的位置）

  2. 原來在標誌流中的位置繼續佔有，後面的盒子仍然以標準流的方式對待它（不脫標，繼續保留原來的位置）

     相當於塊級元素還是可以繼承父元素的寬度的

• absolute:絕對定位

  絕對定位是元素在移動位置的時候，相對於它祖先元素來說的

  position absolute;
  

  1. 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位

  2. 如果祖級元素有定位，則以最近一級的有定位的祖先元素為參照點移動位置

  3. 決定對位不佔有原來的位置（脫標）

     不能繼承父元素的寬度，需要手動區設定

• fixed:固定定位

  不寫偏移量的時候 相對於body定位的（預設狀態）

  寫偏移量的時候才是相對與瀏覽器定位

  使用場景：可以在瀏覽器頁面滾動時元素位置不會改變

// 定位設定居中
	<style>
        .father2 {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            background-color: purple;
        }
        .father2 .son {
            position: absolute;
            width: 20px;	 /* 如果高度或則寬度沒有寫，則會拉伸到父元素的高或寬 auto表示平分剩餘空間*/
            height: 20px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
        }
    </style>
    <div class="father2">
        <div class="son"></div>
    </div>

隱藏

(面試題)

盒子隱藏

• display: none;
  

  隱藏 不會持續佔據空間 會隱藏子元素 子元素不能通過設定diaplay: block進行反隱藏

• visibility: hidden/visibale;
  

  隱藏 會持續佔據空間 會隱藏子元素 子元素能通過設定visibility: visible進行反隱藏

• opacity: 0/1;
  

  0完全透明 1完全不透明，子元素不能透過子元素 opacity: 0.8進行反隱藏

• position: absolute;
  

  設定偏移量移出視線範圍

• 設定寬高 背景透明 不會隱藏子元素 transparent rgba

文字隱藏

• text-indent: 負值;
  

  文字放入盒子 盒子設定隱藏

• font-size: 0
  

overflow

overflow: hidden/scroll;
overflow-x: hidden; <-- y軸上會有滾動條 -->
overflow-y: hidden;

• auto：內容被修建，瀏覽器會顯示滾動條
• inherit：規定應該從父元素繼承overflow屬性的值

text-overflow

• clip：修剪文字
• ellipsis：顯示省略符號來代替被修剪的文字

文字省略...

width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

注意：要加高度

多行文字顯示省略號，有較大的相容性問題，適用於webkit瀏覽器或移動端

-webkit-line-clam:限制一個塊元素顯示的文字行數

diaplay: -webkit-box 必須結合屬性，將物件作為彈性盒子

-webkit-box-orient 必須結合屬性，設定或檢索伸縮盒物件的子元素排列方式

width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;