<幹貨>5分鐘快速回顧HTML CSS

一.html

(一)标簽類型

• 1.塊元素(獨占一行!即使通過css設定寬度width,也會占一行的位置)

  • div

    (無語義)
  • 清單

    ur/ol/li

  • 段落

    p

  • 标題

    h1-h6

  • 自定義清單

    dl/dt/dd

  • 其它常見問題
    • 塊元素的居中問題
      • 塊級元素左右居中:先設定自身width;然後,

        margin: 0 auto;

• 2.内聯元素(行内)[不支援

  width

  ,

  height

  margin

  上下,

  padding

  上下]
  • 常用内聯元素

    • span

    • 超連結标簽

      a

      • src

        可以為空,但一定要寫
  • • 子級内聯元素之間有間隙,可以把父級元素

      font-size

      設定為0,子級單獨設定

      font-size

    • 内聯元素居中:由于内聯元素自身不支援

      width

      ,使用在父級元素設定

      text-alian : center

      的解決方案
• 3.内聯塊元素(支援全部樣式的内聯元素)
  • 轉換為内聯塊
    • 設定樣式

      display: inline-block

      ;
  • • 可以把内聯塊元素看做内聯元素的進化版,
    • 通過設定

      float

      屬性也會将元素轉換為内聯塊
    • 通過定位屬性

      fix

      absolute

      都可以将元素轉換為内聯塊

(二)盒子模型

• 1.盒子圖

盒子圖

• 2.樣式重置(

  reset.css

  )

  h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{  
          /*去掉預設樣式*/  
          margin: 0;  
          padding: 0;  
      }  
      ul,ol{  
          /*去掉左邊的點或者數字*/  
          list-style: none;  
      }  
      a{  
          /*去掉下劃線*/  
          text-decoration: none;  
      }  
      em,i{  
          /*去掉斜體*/  
          font-style: normal;  
      }  
      b,strong{  
          /*去掉加粗*/  
          font-weight: normal;  
      }  
      /*清除浮動影響 和清除margintop塌陷 合在一起的寫法*/  
      .clearfix:before,.clearfix:after{  
          content: "";  
          display: table;  
      }  
      .clearfix:after{  
          clear: both;  
      }  
      .clearfix{  
          /*相容ie*/  
          zoom:1;  
      }  
             

(三)表單<form></form>

• action

  • 送出表單到對應的視圖函數

    • <form action="localhost:8000/index5" method="get"></form>

• label

  (注意拼寫)[關聯對應的id]

  • for

    ="某

    input

    的

    id

    "

    • <label for="user_name">使用者名</label>

• input

  • type

    • 文本(使用者名)

      • <input type="text" id="user_name">

    • 密碼

      • <input type="password" id="passwd" name="user_passwd">

    • 單選框(性别)[相同的name實作互斥選擇]

      <input type="radio" name="sex" value="1">男
        
        <input type="radio" name= "sex" value="0">女  
                 

    • 多選框(愛好)

      html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">學習 <input type="checkbox" name= "hobby" value="play">娛樂

    • 上傳檔案

      • <input type="file">

    • 送出

      • <input type="submit" value="注冊">

    • 重置

      • <input type="reset" value="重置">

• textarea

  (多行輸入框)

  • <textarea name="" id="" cols="30" rows="5">個人介紹</textarea>

• select

<select name="loc">  
       <option value="1">北京<option>  
       <option value="2">上海<option>  
       <option value="3">廣州<option>  
     </select>  
           

一點體會:

送出表單時,隻會識别到标簽以内的内容,是以,多選框 多選框,下拉框一定要添加value,且值必須唯一
           

(四)清單

• 1.有序<ol>

<ol>  
        <li>第一季</li>  
        <li>第二季</li>  
        <li>第三季</li>  
      </ol>  
           

• 2.無序<ul>

<ul>  
       <li>百度</li>  
       <li>騰訊</li>  
       <li>阿裡</li>  
     </ul>  
           

• 3.清除樣式

  • list-style:none;

二.css

(一)定位的所有套路:

• 1.相對定位(相對自己定位):
  • css屬性

position: relative;  
          left: 50px;  
          top: 50px;  
           

說明:

針對自身設定相對定位

有上左,上右,下左,下右,四種定位方式

元素自身未脫離文檔流,依然占據了原位置

• 2.絕對定位(相對于父元素定位)
  • 父元素設定

    • position: relative;

  • 子元素設定

    position: absolute;  
    left: 20px;  
    top: 20px;  
               

  • • 子元素會針對父元素進行定位
    • 子元素已經脫離了文檔流
    • 定位的四種方式同相對定位
    • 如果子元素找不到父元素,則會一直向上找,直到找到最外層标簽頁面
• 3.固定定位(相對于浏覽器定位)
  • 元素css設定

    position: fix;  
    right: 20px;  
    bottom:20px  
               

  • • 位置會固定住,不随滾動條滾動
    • 脫離文檔流
• 4.層級關系:
  • z-index屬性相當于Photoshop中的圖層屬性,數值越大越靠上,實際開發過程中,取值從1000開始,每次增加一百,如果意外增加了需求,預留的100個層級可插入新的需求層
• 5.一些細節:

  • absolute

    fix

    能把元素變成内聯塊

  • position

    還有一個預設值為

    static

(二)浮動注意點:

• 浮動元素有左浮動(float:left)和右浮動(float:right)兩種
• 浮動元素碰到父元素邊界或其他元素才會停下來
• 父元素必須清除浮動,才能被子元素撐開
• 相鄰浮動的塊元素可以并在一行,超出父級元素會自動換行
• 元素設定浮動後,會自動轉為"行内塊元素"(元素之間也不會有間隙)
• 浮動元素後面沒有浮動的元素會占據浮動元素的位置,沒有浮動元素内的文字會避開浮動的元素,形成文字繞圖效果
• 常見需求: 一組子元素,同時左浮動;同時右浮動;最後一個右浮動,其它左浮動

(三)引入方式

• 1.内聯式(新手模式)

  <div style="color:red;width:100px;"></div>

• 2.嵌入式(練習模式)

  <style>  
     div{  
     color:red;  
     width:100px;
     }  
   <style>
             

• 3.外鍊式(項目模式)

  • <link rel="stylesheet" href="..css/index.css">

(四)選擇器

• 層級選擇器

  div p{}

• 标簽選擇器

  p{}

• 多标簽同時選

  p,span{}

• 直接子類選擇器

  .bilibili > p{}

• 類選擇器

  .bilibili{}

• 僞類選擇器

  .bilibili:hover{}

• 選擇器權重
  • 權重10000:

    !important

  • 權重1000:内聯樣式

    style

  • 權重100:ID選擇器
  • 權重10:僞類,

    :hover

  • 權重為1:

    div.p

(五)容易忘的屬性

• 字型

  color: red;

• 清除下劃線

  text-decoration:none;

• 行高

  line-height: 24px;

• 字型類型

  font-family:"Microsoft Yahei";

  font-size: 20px;

  font-weight: bold;

• 字元間距(強迫症福音)

  letter-spacing:10px;

• 邊框

  border: 1px solid red;

(六)display選項

• 内聯元素:

  display: inline;

• 内聯塊元素

  display: inline-block;

• 塊元素

  display: block;

• 隐藏元素

  display: none;

HTML CSS導圖