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 ...
随机推荐
- 00-DLL劫持&C语言远程加载shellcode
0x01 杀软拦截检测规则引导-DLL劫持上线 准备工具 cs vs2019 dll劫持工具:https://bbs.pediy.com/thread-224408.htm 极速PDF:https:/ ...
- 插头dp 模板
[JLOI2009]神秘的生物 只需要维护连通情况,采用最小表示法,表示此格是否存在,也即插头是否存在 分情况讨论当前格子的轮廓线上方格子和左方格子状态,转移考虑当前格子选不选,决策后状态最后要能合法 ...
- JZOJ 3423.Vani和Cl2捉迷藏 & [CTSC2008]祭祀
\(\text{Problem}\) 求一个 \(DAG\) 的最长反链 \(\text{Solution}\) 由 \(Dilworth\) 定理只最长反链等于最小链覆盖 而原图的链是可相交的,所以 ...
- 高仿微信｜基于Windows微信实现一个IM即时通讯App
本文干货充足篇幅较长,建议收藏后阅读避免迷路.文末可获取[自动聊天机器人源码和Demo]. 即时通讯IM概述 如果能开发一款即时聊天App,能和微信消息互通,并且只需少许代码量,应该是件非常兴奋的事情 ...
- [POI2011]MET-Meteors 解题报告
语言系统紊乱了 QAQ 这道题感觉不是很难鸭 qwq. 先只考虑一个国家,怎么做?很显然,就直接二分一下就行了.判定答案可以维护一个差分数组,然后最后对它做一个前缀和,再求一下这个国家的流行数量就好了 ...
- NOIP2017 - D2T3 - phalanx
按照思维难度加大和代码难度减小的顺序,我们来看这道题的不同做法. 若你无畏,我亦无畏 - 平衡树 平衡树简直是天然用来维护这种操作的--合并两个区间,提取一个值.我们可以对每个行的前 \(m-1\) ...
- PG数据库运维工具要覆盖哪些能力
目前的国产数据库中,很多产品都是以PG社区版代码作为研发起点的,还有一些产品是基于openGauss开源项目的.这些数据库的基础特性都和社区版的PG数据库类似,不过也做了一定的拓展.不过从使用与运维上 ...
- 手机在线编程软件Anycodes
下载地址:http://ys-f.ys168.com/608949803/V6gUhjk3V382275HM63/%E6%89%8B%E6%9C%BA%E7%BC%96%E7%A8%8B%E8%BD% ...
- FTCL：Fine-grained Temporal Contrastive Learning for Weakly-supervised Temporal Action Localization概述
1.针对的问题 现有的方法主要遵循于通过优化视频级分类目标来实现定位的方式,这些方法大多忽略了视频之间丰富的时序对比关系,因此在分类学习和分类-定位自适应的过程中面临着极大的模糊性.(1)在弱监督设置 ...
- 部署spingboot项目到云服务器踩坑记录
按教程部署mall电商系统 https://www.macrozheng.com/mall/deploy/mall_deploy_docker.html#docker环境安装 只记录SpringBoo ...