塊元素和行內元素

阿新 • • 發佈：2021-05-04

列表

什麼是列表
- 列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快地獲得相應的資訊
列表的分類
- 無序列表
- 有序列表
- 定義列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表學習</title>
</head>
<body>
<!--有序列表-->
<ol>
    < 
li>Java</li>
    <li>Python</li>
    <li>C++</li>
</ol>
<hr>

<!--無序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
</ul>

<!--自定義列表
dl:標籤
dt:列表名稱
dd:列表內容
-->
<dl>
    <dt>學科</ 
dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <dt>位置</dt>
    <dd>河南</dd>
    <dd>西安</dd>
    <dd>廣東</dd>
</dl>
</body>
</html>

表格

為什麼使用表格
- 簡單通用
- 結構穩定
基本結構
- 單元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html> 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格學習</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <!--conlspan 跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>
</body>
</html>

在這裡插入圖片描述

視訊和音訊

視訊元素：video
音訊元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體元素學習</title>
</head>
<body>
<!--  音訊和視訊  -->
<!--
src :資源路徑
controls ：控制條
outoplay ：自動播放
-->
<video src="../resource/video/cry.mp4" controls autoplay></video>

<audio src="../resource/audio/cry.mp3" controls autoplay></audio>
</body>
</html>

塊元素和行內元素

列表什麼是列表列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快地獲得相應的資訊列表的分類

關於塊級元素和行內元素的總結（面試常考）

目錄一、前言二、塊級元素 1、塊級元素的定義 2、塊級元素的特點 3、常見的塊級元素

塊級元素和行內元素不設寬高下設定padding的總結

今天在總結前面學過的CSS時，發現筆記上記了一句“如果盒子沒有設定高和寬，那麼padding不會撐大盒子”，然後就去探究了一下，結果發現好像沒有那麼簡單，結論寫到註釋了，只是淺淺的研究了一下，剛入門CSS，純新手。

複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

這篇筆記主要講了CSS快捷鍵的使用方法，複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

(八).元素浮動，行內塊和行內元素在佈局上的特點，頁面佈局的些許事項

1 浮動 1.1 浮動的簡介 1. 浮動最初實現文字環繞效果 2. 現在浮動是主流的頁面佈局方式之一

前端html標籤：塊級元素，行內元素，空元素

前端是一個很容易入門，但卻很難走進去的一個行業。看似簡單，但一旦深入，就“不可自拔”。說到，前端，肯定少不了要認識他的組成元素，那這就涉及到塊級元素，行內元素以及一些空元素。

2.塊級元素與行內元素的特點

技術標籤：html+csshtmlcsscss3html5 a labelbr進行換行。單獨的br標籤容易被誤以為塊集元素。實際上是行內元素

CSS 的元素顯示模式（塊級元素、行內元素、行內塊元素）

元素顯示模式就是元素（標籤）以什麼方式進行顯示，比如<div>自己佔一行，比如一行可以放多個<span>。

HTML_5——塊級元素與行內元素

1、塊級元素塊級元素佔據其父元素（容器）的整個空間，因此建立了一個“塊”

常見的塊級元素和內聯(行內)元素

文件流（normal flow）網頁是一個多層的結構，一層摞著一層，通過 CSS 可以分別為每一層設定樣式，作為使用者只能看到最頂上的一層，這些層中，最底下的一層稱為文件流。文件流是網頁的基礎，指的是元素排版佈局

行內元素和與行內塊元素的margin-top問題

技術標籤：htmlcss 行內元素和與行內塊元素的margin-top問題內聯(行級)元素不能設定寬高，但padding屬性可以設定，需要注意的是行級元素不能設定margin-top和margin-bottom屬性，但可以設定margin-left和margi

html中的行內元素和塊級元素的總結

技術標籤：htmlhtml 塊級元素和行內元素元素分類特點(區別)塊級元素元素(標籤)執行在頁面時，會自動換行，呈豎排顯示行內元素元素(標籤)執行在頁面時，不自動換行，呈橫排顯示

行內元素和塊級元素的區別和轉換

行內元素和塊級元素什麼區別，然後怎麼相互轉換塊級元素 1.總是從新的一行開始，即各個塊級元素獨佔一行，預設垂直向下排列；

img標籤到底是行內元素還是塊級元素

面試官問你<img>是什麼元素時你怎麼回答寫這篇文章源自我之前的一次面試，題目便是問img標籤屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素，面試官追問為什麼能夠設定 <img /> 標籤

對行內元素設定padding和margin不起作用

技術標籤：csshtmlcss 前言看了表嚴肅表哥的電商網站專案，自己動手親自實現了一遍，前前後後遇到了幾個問題，特此總結一下。

行內元素與塊級元素

技術標籤：HTMLhtml5 一、行內元素行內元素只佔據其內容本身所佔據的空間二、塊級元素

行元素、行內塊級元素塊元素元素顯隱、塊之間的間距取消

/* 行元素、行內塊級元素塊元素元素顯隱、塊之間的間距取消 A 塊級元素特點

行內元素、塊元素及css三特性

行內元素特點: 1、和其他元素都在一行上 2、元素的高度、寬度、行高及頂部和底部邊距不可設定;

塊級元素行內元素行內塊元素

一、塊級元素：在瀏覽器顯示時，通常會以新行來開始（和結束） <p>, <table><div>,<ul>,<ol>,<li>,<h1>-<h6>

CSS基礎行內元素/行內塊元素設定垂直對齊方式及常見使用案例

vertical-align 屬性值效果 baseline 基線對齊 top 頂部對齊 middle 中心對齊 bottom 底部對齊使用案例1：百度搜索框左邊和右邊底部沒有對齊