首页 > 其他分享> 文章详细

CSS（10）display和浮动

2021-06-26 19:02:11 阅读：125 来源： 互联网

标签：10 行内元素 CSS inline div display block

浮动

标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之，则不可以

display

也是一种实现行内元素排列的方式，但是我们很多情况通用float

 block          块元素
 inline         行内元素
 inline-block   是块元素，但是可以内联，在一行
 none

代码：

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 
   <link rel="stylesheet" href="../display/style.css">
 
 </head>
 <body>
 
 <div>
   块元素div
 </div>
 
 <span>
   行内元素span
 </span>
 
 </body>
 </html>

css：

 /*
   block          块元素
   inline         行内元素
   inline-block   是块元素，但是可以内联，在一行
   none
 */
 
 div{
   width: 100px;
   height: 300px;
   border: 2px solid #779dbd;
   display: none;
 }
 
 span{
   width: 100px;
   height: 300px;
   border: 2px solid #779dbd;
   display: block;
 }

浮动

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 
   <link rel="stylesheet" href="../浮动/style.css">
 
 </head>
 <body>
 
 <div>
   <img src="../浮动/resources/qqyzml.png" alt="">
 </div>
 
 <div>
   <img src="../浮动/resources/王一博.jpg" alt="" width="200" height="500">
 </div>
 
 <div>
   <img src="../浮动/resources/表情包.jpg" alt="">
 </div>
 
 </body>
 </html>

css：

 div{
   width: 200px;
   height: 500px;
   border: 2px solid red;
 }
 
 div:nth-of-type(1){
   display: inline-block;
   float: left;
 }
 
 div:nth-of-type(2){
   display: inline-block;
   float: right;
 }
 
 div:nth-of-type(3){
   display: inline-block;
   float: left;
 }

标签：10,行内,元素,CSS,inline,div,display,block
来源： https://www.cnblogs.com/qqyzml/p/14938720.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS（10）display和浮动

浮动

标准文档流

display

浮动