zoukankan      html  css  js  c++  java
  • 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=“100px;height:100px”}這種樣式是無效的
            		少數比較特別的行级元素(input img)直接設置{style=“100px;height:100px”}有效
            		行级元素需要變成 块级元素{display:block 或者 display:inline-block} 設置
            		{style=“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;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="300px"/>
    			<!--
                	作者:offline
                	时间:2018-05-07
                	描述:在style裏面設置width设置有效   
                	這個input標簽和上面一個input標簽在同一行
                -->
            <p style="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="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="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>
    
  • 相关阅读:
    Webpack常用模块加载器Loader
    CSS动画 关键帧
    React 入门(6): 路由 React-Router
    React 入门(5): 引入JSX 研究JSX的createElement实现
    webpack标准模块 npm通用模块
    常用库的CDN引入
    使用codesandbox.io开启Web云开发
    css-loader + style-loader 模块化css
    React 入门(4): 单文件组件 CSS-Modules
    openldap主从数据同步-基于debain 9
  • 原文地址:https://www.cnblogs.com/bawang/p/9086533.html
Copyright © 2011-2022 走看看