CSS（10）display和浮动

浮动

标准文档流

块级元素 ： 独占一行

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;
 }

 

 posted on 2021-06-26 18:48  琪琪又炸毛了  阅读(63)  评论(0)  编辑  收藏  举报