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 ...
随机推荐
- Prometheus&Alertmanager告警推送
前言 尽管可以通过可视化数据监控系统运行状态,但我们无法时刻关注系统运行,因此需要一些实时运行的工具能够辅助监控系统运行,当系统出现运行问题时,能够通知我们,以此确保系统稳定性,告警便是作为度量指标监 ...
- JZOJ 4270.【NOIP2015模拟10.27】魔道研究
魔道研究 题面 思路 简单的想,就是在 \(T\) 个可重集合每个中选出 \(k\) 个最大的数组成新的可重集合,其中 \(k\) 为其编号 然后在新的集合中选前 \(n\) 大的数,求其和 考虑开 ...
- Fastjson Sec
Fastjson 前置知识 autoType功能 序列化:fastjson在通过JSON.toJSONString()将对象转换为字符串的时候,当使用SerializerFeature.WriteCl ...
- axios的简易二次封装
Axios的二次封装 1.在src文件夹下创建utils文件夹,再创建request.js文件 request.js //引入axios import axios from 'axios' //创建实 ...
- Xilinx XPM使用说明--XPM_MEMORY_SDPRAM
XPM_MEMORY_SDPRAM 参数化宏:简单的双端口RAM 介绍 此宏用于实例化简单双端口RAM.端口A用于从存储器执行写入操作,端口B可用于从存储器读取. 下面介绍XPM_MEMORY实例的基 ...
- 第二周作业N67044-张铭扬
1. 运行脚本可以显示出本机的ip地址 2. 如果ip地址中有3这个数字,那么就打印出当前的系统时间 3. 如果ip地址中不含3这个数字,就批量建立用户magedu_00, magedu_01, .. ...
- Day 23 23.2.1：微信公众平台案例
微信公众平台案例 注意:接下来将的内容,请忽视具体网站,重点专注逆向的分析思路! 接下来就是爬什么网站,什么数据,什么形式都统统不重要!重点是分析思路 微信公众平台案例 url:https://mp. ...
- 周练7(ssti)
{7*7} ->49 -> smarty {{7*'7'}} -> 49 -> twig {{7*'7'}} -> 7777777 -> jinjia2 1. [B ...
- idea 中 maven 项目构建 webapp 无 src 目录以及提示无程序包的解决办法
提示无程序包的解决方法 问题有可能出现在 IDE 版本上,问题版本是 2020.1,升级为 2020.3 后,tomcat 运行就不再提示无程序包的错误 之前尝试的解决办法 maven clean/i ...
- 部署mall电商系统踩坑记录
一. mysql docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/mysql/d ...