html入門 如何 區別行級元素 和 塊級元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块级元素和行级元素區分對比</title>
</head>
<body>
<!--
作者：offline
时间：2018-05-07
描述：最重要的區別->块级元素獨占一行 行级元素在同一行(空間足夠的情況下)
用途:例如我們分別需要在<img>上下左右分別設置文字圍繞 理解了块级元素,行级元素就非常容易了
-->
<!--
作者：offline
时间：2018-05-07
描述：<a> <lable> <span>等行级元素 設置{style=“width:100px;height:100px”}這種樣式是無效的
少數比較特別的行级元素（input img）直接設置{style=“width:100px;height:100px”}有效
行级元素需要變成 块级元素{display:block 或者 display:inline-block} 設置
{style=“width:100px;height:100px”}才有效
最好的解決方案：行级元素設置width height無效 加上 {display:block 或者 display:inline-block}
就有效了
-->
<!--
作者：offline
时间：2018-05-07
描述：通過width測試樣式是否有效 不管該標簽有沒有width等類似屬性 建議都通過style設置樣式
如果需要行级元素 衹需要將块级元素 {display:inline;或者 display:inline-block}
如果需要的块级元素 將块级元素{display:block} 块级元素變成块级元素
-->
<div style="background-color:lightgrey;width:200px;" width="100px">33</div>
<!--
作者：offline
时间：2018-05-07
描述：第二个width(写在style外面的)无效 原因是div没有width属性 第一个width通过style有效 虽然div
长度只有200px 但是还是独占一行 ->块级元素 长度设置并不影响独占一行
-->
<div style="100px">444</div>
<!--
作者：offline
时间：2018-05-07
描述：块级元素兩个相同元素写在一起会在两行 一个元素占一行
這個div標簽和上面一個div標簽在各在一行
-->
<input type="text" width="500px"/>
<!--
作者：offline
时间：2018-05-07
描述：行级元素两个相同元素写在一起会在一行(行空间足够的情况下) width属性无效 input是行级元素
直接通过width无效 需要通过style样式才有用
-->
<input type="text" style="width:300px"/>
<!--
作者：offline
时间：2018-05-07
描述：在style裏面設置width设置有效
這個input標簽和上面一個input標簽在同一行
-->
<p style="width:200px;background-color:lightgrey" >333</p>
<!--
作者：offline
时间：2018-05-07
描述：块级元素兩个相同元素写在一起会在两行 一个元素占一行
p標簽默認有margin->外邊距 所以p標簽間隙都比較大 因此默認樣式下這個p標簽和下面p標簽間隔比較大
-->
<p width="700px">222</p>
<!--
作者：offline
时间：2018-05-07
描述：這個p標簽的width屬性設置無效 p沒有這個屬性 需要通過style樣式設置width
這個p標簽和上面一個p標簽在各在一行
-->
<lable>555</lable>
<!--
作者：offline
时间：2018-05-07
描述：
-->
<lable>333</lable>
<!--
作者：offline
时间：2018-05-07
描述：行级元素
這個lable標簽和上面一個lable標簽在同一行
-->
<button>7777</button>
<!--
作者：offline
时间：2018-05-07
描述：行级元素 inline-block(形式的 Firefox盒子模式顯示) -->
<button>666</button>
<!--
作者：offline
时间：2018-05-07
描述：行级元素
這個button標簽和上面一個button標簽在同一行
-->
<h5>444</h5>
<!--
作者：offline
时间：2018-05-07
描述：块级元素
-->
<h5>333</h5>
<!--
作者：offline
时间：2018-05-07
描述：块级元素兩个相同元素写在一起会在两行 一个元素占一行
h(1,2,3...)標簽默認有margin->外邊距 所以h(1,2,3...)標簽間隙都比較大
因此默認樣式下這個h(1,2,3...)標簽和上面h(1,2,3...)標簽間隔比較大
-->
<a>7777</a>
<!--
作者：offline
时间：2018-05-07
描述：
-->
<a>2222</a>
<!--
作者：offline
时间：2018-05-07
描述：行级元素
這個a標簽和上面一個a標簽在同一行
-->
<span>4444</span>
<!--
作者：offline
时间：2018-05-07
描述：行级元素 -->
<span>3333</span>
<!--
作者：offline
时间：2018-05-07
描述：行级元素
這個span標簽和上面一個span標簽在同一行
--> <img alt="img1111" src="file:///C:/Users/asdf/Desktop/1.png" style="width:300px">
<!--
作者：offline
时间：2018-05-07
描述：竟然是行级元素
-->
<img alt="img2222" src="file:///C:/Users/asdf/Desktop/1.png">
<!--
作者：offline
时间：2018-05-07
描述：行级元素
這個img標簽和上面一個img標簽在同一行 (行空间足够的情况下)
-->
<ul>
<!--
作者：offline
时间：2018-05-07
描述：块级元素
-->
<li height="200px">qqqq</li>
<!--
作者：offline
时间：2018-05-07
描述：list-item元素 。。。。。跟块级元素好像沒什麽不一樣 也認爲是块级元素吧
直接設置height屬性無效
-->
<li style="width:200px;background-color:lightblue；height:100px">wwww</li>
<!--
作者：offline
时间：2018-05-07
描述：块级元素 通過style樣式設置有效
這個li標簽和上面一個li標簽在各在一行
-->
</ul>
<ul>
<!--
作者：offline
时间：2018-05-07
描述：块级元素
這個ul標簽和上面一個ul標簽在各在一行
-->
<li>eee</li>
<li>rrrr</li>
</ul> <!--
作者：offline
时间：2018-05-07
描述：其它標簽用類似方法測試是行级元素還是块级元素
-->
</body>
</html>
html入門 如何 區別行級元素 和 塊級元素的更多相关文章
- 依賴注入入門——Unity（二）
參考博客文章http://www.cnblogs.com/kebixisimba/category/130432.html http://www.cnblogs.com/qqlin/tag/Unity ...
- GOOGLE搜索從入門到精通V4.0
1,前言2,摘要3,如何使用本文4,Google簡介5,搜索入門6,初階搜索 6.1,搜索結果要求包含兩個及兩個以上關鍵字 6.2,搜索結果要求不包含某些特定資訊 6.3,搜索結果至少包含多個關鍵字中 ...
- CMOS和TTL的區別
TTL電路是晶體管-晶體管邏輯電路的英文縮寫(Transister-Transister-Logic ),是數字集成電路的一大門類.它采用雙極型工藝制造,具有高速度低功耗和品種多等特點. CMOS是: ...
- 淺析LED、LED背光、OLED的技術原理與區別
眼下很多廠商在推廣自己產品的時候都偷換了概念.明明是LED背光顯示器卻要簡稱為LED顯示器.事實上LED顯示器和目前的LED背光顯示器有著本質的區別.當然容易讓大家混淆的還有個技術非常先進的OLED. ...
- Windows PowerShell 入門（7）－関数編2
この連載では.Microsoftが提供している新しいシェル.Windows Power Shellの使い方を解説します.前回に引き続きPowerShellにおける関数の取り扱いとして.変数と関数のスコ ...
- Windows PowerShell 入門（3）－スクリプト編
これまでの記事 Windows PowerShell 入門(1)-基本操作編 Windows PowerShell 入門(2)-基本操作編 2 対象読者 Windows PowerShellでコマンド ...
- Windows PowerShell 入門（2）－基本操作編 2
前回に引き続きMicrosoftが提供している新しいシェル.Windows Power Shellの基本操作方法を学びます.基本操作編第2弾の今回は.パイプの使用方法を中心としたコマンドレットの操作方 ...
- Delphi APP 開發入門（五）GPS 定位功能
Delphi APP 開發入門(五)GPS 定位功能 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數 ...
- Delphi APP 開發入門（十）REST Client 開發
Delphi APP 開發入門(十)REST Client 開發 分享: Share on facebookShare on twitterShare on google_plusone_share ...
- Delphi APP 開發入門（九）拍照與分享
Delphi APP 開發入門(九)拍照與分享 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:30 ...
随机推荐
- 自动化测试方案对比：Katalon vs Python
公司要用katalon做自动化,我提议用更加主流的python的方案,即pytest+selenium.下面是做一个大概的对比,以引导团队尽可能的选择可靠的方案. 接下来我直接把我当时讲的ppt贴上来 ...
- JZOJ 4250.路径
\(\text{Solution}\) \(30\) 分暴搜合法路径 另 \(30\) 分状压 设 \(f_{i,j,k}\) 表示当前到第 \(i\) 个点,走过的点状态为 \(j\),走过的路径长 ...
- php .inc 文件
inc 文件顾名思义是include file的意思.即PHP的包含文件,这里用后缀来表示文件的作用, inc文件一般加载一些设置 举个例子 <? php//这里是数据库连接的配置信息db. ...
- Os-hackNos
Os-hackNos 目录 Os-hackNos 1 环境配置 1.1 靶场环境 1.2 靶机未获取到IP时配置 2 信息收集 2.1 端口扫描 2.2 目录扫描 3 对Drupal 7.57版本安全 ...
- aspnetcore读取配置【源码分析】
总的逻辑 继承 IConfigurationSource 这个接口的子类是配置源 ,其中的build方法,创建并返回对应的ConfigurationProvider. 继承 IConfiguratio ...
- C# 数字转大写汉字
1.数字转换成汉字大写public string NumToChinese(string x) { //数字转换为中文后的数组 string[] P_array_num = new string[] ...
- Canvas：绘制矩形
函数 CanvasPath.rect(x, y, w, h) 参数名 类型 描述 x Number 矩形起始位置 y Number 矩形起始位置 w Number 矩形宽度 h Number 矩形高度 ...
- Postgresql动态共享内存类型
一.简介 linux为多个进程通信提供了不同的IPC机制,如:System V , POSIX 和 MMAP,所以Postgresql共享内存管理也支持以上类型. 在Postgresql中可以使用dy ...
- MessageUtil
1 public abstract class MessageUtil { 2 3 public static String changeMsg(CustomerReportQueryObject q ...
- C - Functions again CodeForces - 789C (dp、思维)
C - Functions again CodeForces - 789C #include<iostream> #include<cstdio> #include<cm ...