html入門 如何 區別行級元素 和 塊級元素
2024-10-21 11:41:25
<!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>
最新文章
- 恢复SQL Server被误删除的数据（再扩展）
- php预定义常量$_SERVER
- HTML快速入门2
- css + html 小知识总结
- Gradle简介
- CentOS查看系统信息-CentOS查看命令
- Java public, private, protected and default
- HDU 3681 Prison Break（状态压缩dp + BFS）
- Yii处理流程
- Android 手势锁的实现 为了让自己的应用程序的安全，现在
- MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ...
- 基于Spring Boot，使用JPA调用Sql Server数据库的存储过程并返回记录集合
- HBase单机模式部署
- Python编程快速上手-让繁琐工作自动化-第二章习题及其答案
- 20165236 2017-2018-2 《Java程序设计》结对编程练习_四则运算
- 24_ajax请求_使用axios
- 用GDB调试Segmentation 段错误【转】
- Appium知识积累
- 授权中的with admin option和with grant option
- Asp.Net中自以为是的Encode
热门文章
- JZOJ 1967.【2011集训队出题】聪聪可可
- JAVASE小练习 （今天做一个基于javase的银行ATM小练习）
- LeetCode-1664 生成平衡数组的方案树
- libcurl CURLOPT_WRITEFUNCTION 回调函数多次触发导致数据错乱的问题
- 数据库多表连接查询中使用group by分组语句，Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'XXX' which is not functionally dependent on columns in GROUP BY claus
- 通过url跳转到页面锚点
- win10多用户
- windows搭建syncthing中继服务器和发现服务器
- Burp学院-OS命令注入
- HTTP头注入：XFF注入