<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    web前端入門到實戰:HTML/CSS - 塊級非塊級 & 替換非替換

    發布時間:2020-07-14 22:40:08 來源:網絡 閱讀:133 作者:前端向南 欄目:web開發

    塊級元素

    塊級元素的特點:

    • 在瀏覽器顯示時,獨占一行,默認情況下,其寬度自動填滿其父元素寬度;

    • 可以設置width,height屬性;

    • 可以設置margin和padding屬性;

    • 對應于display:block

    塊級元素包含:

    元素 描述
    &lt;address&gt; 定義地址
    &lt;caption&gt; 定義表格標題
    &lt;dd&gt; 定義列表中定義條目
    &lt;div&gt; 定義文檔中的分區或節
    &lt;dl&gt; 定義列表
    &lt;dt&gt; 定義列表中的項目
    &lt;fieldset&gt; 定義一個框架集
    &lt;form&gt; 創建表單元素
    &lt;h2&gt; - &lt;h7&gt; 標題元素
    &lt;hr&gt; 水平線
    &lt;legend&gt; 給fieldset元素定義標題
    &lt;li&gt; 定義列表項目
    &lt;noframes&gt; 為那些不支持框架的瀏覽器顯示文本,放置于frameset標簽內
    &lt;noscript&gt; 為那些不支持腳本的瀏覽器顯示文本
    &lt;ol&gt; 有序列表
    &lt;ul&gt; 無序列表
    &lt;p&gt; 定義段落
    &lt;pre&gt; 定義預格式化文本
    &lt;table&gt; 定義表格
    &lt;tbody&gt; 定義表格主體
    &lt;td&gt; 表格中的標準單元格
    &lt;tr&gt; 表格中的行
    &lt;tfoot&gt; 表格中的頁腳
    &lt;th&gt; 定義表頭單元格
    &lt;thead&gt; 定義表格的表頭

    內聯元素

    內聯元素的特點:

    • 相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化
    • 行內元素設置width,height屬性無效
    • 行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right,其它屬性不會起邊距效果。
    • 對應于display:inline;

    內聯元素包含:

    元素 描述
    &lt;a&gt; 可定義錨以及超鏈接
    &lt;abbr&gt; 表示一個縮寫形式
    &lt;acronym&gt; 表示只取title中首字母的縮寫形式
    &lt;b&gt; 字體加粗
    &lt;bdo&gt; 可覆蓋默認的文本方向
    &lt;big&gt; 大號字體加粗
    &lt;br&gt; 換行
    &lt;cite&gt; 引用進行定義
    &lt;code&gt; 定義計算機代碼文本
    &lt;dfn&gt; 定義一個定義項目
    &lt;em&gt; 定義為強調的內容
    &lt;i&gt; 斜體文本效果
    &lt;img&gt; 向網頁中嵌入一張圖像
    &lt;input&gt; 輸入框
    &lt;kbd&gt; 定義鍵盤文本
    &lt;label&gt; 為input進行標記/標注
    &lt;q&gt; 定義短的引用
    &lt;s&gt; 表示不準確不相關,卻不應當給予刪除的內容
    &lt;samp&gt; 定義樣本文本
    &lt;select&gt; 定義單選或者多選菜單
    &lt;small&gt; 呈現小號字體效果
    &lt;span&gt; 組合文檔中的行內元素
    &lt;strong&gt; 語氣更強的強調內容
    &lt;sub&gt; 定義下標文本
    &lt;sup&gt; 定義上標文本
    &lt;textarea&gt; 多行文本輸入控件
    &lt;tt&gt; 打字機或者等寬的文本效果
    &lt;var&gt; 定義變量

    塊級元素和內聯元素比較記憶

    塊級元素 行內元素
    獨占一行,默認情況下,其寬度自動填滿其父元素寬度 相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化
    可以設置width,height屬性 行內元素設置width,height屬性無效
    可以設置margin和padding屬性 行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right,其它屬性不會起邊距效果。
    對應于display:block 對應于display:inline;

    我們在刷題的時候會遇到一個這樣的題:

    eg1: 瀏覽器天生默認inline-block元素有哪些?(擁有內在尺寸,可以設置高度,但是不會自動換行。)

    input     button     img     label    texterea
    

    eg2: 請選出所有的置換元素()

    正確答案: A B C D   你的答案: A B C D (正確)
    A. img
    B. input
    C. textarea
    D. select
    

    這就引出了我們接下來要講的替換元素和不可替換元素

    替換元素

    替換元素瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容。

    替換元素一般有內在尺寸,所以具有widthheight。

    所以替換元素也可增加行框高度,但不影響line-height,內容區高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替換元素居中,可以設置line-height = height, vertral-align = middle。

    常見的替換元素有html中的&lt;img&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;、&lt;object&gt;。

    eg1: &lt;input type="submit" name="submit" value="提交"/&gt;

    &lt;input&gt;標簽是根據type屬性來決定是顯示輸入框,還是提交按鈕等等。

    type屬性值 描述
    button 定義可點擊按鈕(多數情況下,用于通過 JavaScript 啟動腳本)。
    checkbox 定義復選框。
    file 定義輸入字段和 "瀏覽"按鈕,供文件上傳。
    hidden 定義隱藏的輸入字段。
    image 定義圖像形式的提交按鈕。
    password 定義密碼字段。該字段中的字符被掩碼。
    radio 定義單選按鈕。
    reset 定義重置按鈕。重置按鈕會清除表單中的所有數據。
    submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。
    text 定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為 20 個字符。

    eg2: &lt;img src="helloWord.jpg"/&gt;

    &lt;img&gt;元素通過src屬性的值來讀取圖片信息并顯示出來,而如果查看html代碼,卻看不到圖片的實際內容,而且&lt;img&gt;元素的內容通常會被src屬性指定的圖像替換掉;

    eg3:&lt;object&gt; 元素

    &lt;object&gt; 元素(或者稱作 HTML嵌入對象元素)表示引入一個外部資源,這個資源可能是一張圖片,一個嵌入的瀏覽上下文,亦或是一個插件所使用的資源。

    屬性 描述
    data 一個合法的 URL 作為資源的地址,,需要為 data 和 type 中至少一個設置值。
    type data 指定的資源的 MIME 類型,需要為 data 和 type 中至少一個設置值。
    usemap 指向一個 <map>元素的 hash-name;格式為 ‘#’ 加 map 元素 name 元素的值。</map>
    width 資源顯示的寬度,單位是 CSS 像素。
    height 資源顯示的高度,單位是 CSS 像素。
    name 瀏覽上下文名稱(HTML5),或者控件名稱(HTML 4)。

    也有某些元素只在一些特殊情況下表現為可替換元素,例如&lt;video&gt;、&lt;audio&gt;、 &lt;picture&gt;&lt;canvas&gt;。 通過 CSS content 屬性來插入的對象被稱作匿名可替換元素(anonymous replaced elements)。

    非替換元素

    html 的大多數元素是不可替換元素,即其內容直接表現給用戶端

    <p>不可替換元素</p>
    

    web前端開發學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (詳細的前端項目實戰教學視頻,PDF)

    • 行內非替換元素

    widthheight在行內非替換元素中無效。行內非替換元素框的寬度是它的內容渲染后(在任何子元素相對偏移之前)的寬度,它的高則是基于字體。

    &lt;a&gt;、&lt;span&gt;是行內非替換元素 ,但是浮動后的行內非替換元素可以使用width和height。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2