display

更改元素的特征:

可以将行级元素改为块状元素,定义元素的布局类型,(块元素 / 行内元素 / 行内块元素)

 block:将当前元素修改为块状元素,意味着当前元素具备了所有块状元素的特征    元素会占据整个屏幕的宽度, 用户可以给块元素设置宽高

inline:将当前元素修改为行级元素,意味着当前元素具备了所有行级元素的特征   元素的宽度由内容决定,多个元素会在一行内从左向右排列,用户不能设置元素的宽高

inline-block:既具有块状元素的特征又具有行级元素的特征    

像块元素一样用户可以定义元素的宽高;  像行内元素一样,多个元素从左向右排列

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     <style type="text/css">
  7.             .l1{
  8.                 width:100px; 
  9.                 height: 100px; 
  10.                 border: solid red 1px; 
  11.                 background: gray;
  12.                 display: inline-block;
  13.             
  14.             }
  15.             .v{
  16.                 width: 200px; height:
  17.                  100px;
  18.                  border: 
  19.                  solid red 1px;
  20.                  background: lawngreen;
  21.                      display: inline-block;
  22.                      margin: 200px;
  23.             }
  24.             .btn{
  25.                     display: inline-block;
  26.                  width: 100px; height: 100px; background-color: darkcyan;"
  27.                      display: inline-block;
  28.                          margin: 400px;
  29.             }
  30.         </style>
  31.     </head>
  32.     <body>
  33.         
  34.         <div  class="l1">
  35.             测试1
  36.     
  37.         </div>
  38.         <div  class="v">
  39.             测试2
  40.         </div>
  41.         
  42.             <div class="btn">
  43.             测试3
  44.         </div>
  45. </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值