一、元素型別分類
html元素可分為三大類：塊元素，內聯元素，可變元素
1.塊元素
常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset,h1,h2,h3,h4,h5,h6
a）塊狀元素會以塊的形式顯示為乙個矩形區域
b）塊狀元素預設獨佔一行，自上而下排列
c）塊狀元素可以定義自己的寬度和高度，以及盒模型中的任意padding,margin,border值
d) 塊狀元素可以作為乙個容器來包含其他的塊狀元素和內聯元素
注：預設有margin，padding的塊狀元素
body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd,td,fieldset
2.內聯元素(行內元素)
常見內聯元素：a,span,i,em,strong,b,label,img,input
a) 內聯元素預設在一行逐個進行顯示
b）內聯元素不能定義寬度和高度，它的寬高由內容決定，也以乙個矩形區域顯示
c) 內聯元素設定與高度相關的值沒有效果或顯示不準確（如margin-top,margin-bottom,padding-top,padding-bottom,border,line-height等）
d) 內聯元素可以設定與寬度相關的屬性（margin-left,margin-right,padding-left,padding-right）
內聯塊狀元素：
內斂塊狀元素：img,input,select,textarea
a)即具有內聯元素特點在一行顯示，又具有塊狀元素特點，可以定義寬和高
b)可以給內聯塊狀設定任何margin，padding,border
3.可變元素
根據上下文關係決定元素型別（可變的範圍是塊元素和內聯元素）
二、元素型別轉換
語法： display:block | inline | inline-block | list-item|none;
1.block：將元素型別轉換為塊狀元素，是大部分塊狀元素的預設display屬性值
2.inline：將元素型別轉換為內聯元素，是內聯元素的預設display屬性值
3.inline-block:將元素型別轉換為內聯塊狀元素，是內聯塊狀元素的預設display屬性值(如img，input)
注: 當元素設定了inline-block後，換行符，空格都會佔據一定的空間(寬度)
只有inline-block型別的元素支援vertical-align屬性
4.none:將元素隱藏不顯示
注：如果想讓元素再次顯示，設定元素的預設display屬性值即可
5.list-item:將元素型別轉換為列表，是li的預設display屬性值
注：當給元素設定了float屬性後，就相當於元素設定了display:block;
三、置換元素和非置換元素
1.置換元素
瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
input的type屬性決定了在瀏覽器中呈現乙個什麼樣型別的input控制項
2.非置換元素
html的大多數元素是不可替換的非置換元素，即其內容直接表現在瀏覽器
從零開始學習web前端開發
之前半個月一直在學習深度學習，但是感覺自己的能力還沒到那個程度所以就想擱置一下，從程式設計師基礎的前端開發來學。廢話不多說直接開記 我所使用的前端開發軟體就是業內很流行的vscode，作為小白的我當然也是用的這個 具體的安裝教程，外掛程式教程網上都有詳細的介紹，在此處不多講 在vscode中輸入 就...
從零開始學習前端開發 18 BFC
一 bfc的概念 bfc block formating context的縮寫，中文譯為 塊級格式化上下文 二 如何觸發bfc 1.設定float除none以外的值 left,right 2.設定overflow除visible以外的值 hidden,auto,scroll 3.設定display屬...
從零開始學習idea開發vue
使用webpack腳手架開發vue必須基於nodejs 安裝軟體安裝步驟進行，直到結束。測試nodejs是否安裝成功 node v npm config set registry 配置npm映象站 npm config list 顯示所有配置資訊 idea下建立vue工程 在idea中新建stati...