5分鐘快速回顧HTMLCSS

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