前端开发display常用属性介绍

6 篇文章 0 订阅
3 篇文章 0 订阅

在介绍display属性前我们要先了解CSS的元素显示模式

css元素显示模式总结
元素模式元素排列设置样式默认宽度包含
块级元素在页面上一行只能放一个块级元素比如<div>标签其宽高可自定义设置容器的100%可以包含任何标签
行内元素在页面上一行可以放多个行内元素比如<span>标签其宽高由内容本身决定不能自定义设置本身内容的宽度只能容纳文本或者其它行内元素
行内块元素在页面上一行可以放多个行内块元素比如<input>标签其宽高可自定义设置本身内容的宽度

1、display:block

display:block将元素转换为块级元素,一般用于将行内元素转换为块级元素

<span style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的行内元素</span>
<span style="width: 200px; height: 200px; display:block; background-color: rgb(87, 87, 241);">display:block属性行内元素转换为块级元素</span>

 2、display:inline

display:inline将元素转换为行内元素,一般用于将块级元素转换为行内元素

   <div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
   <div style="width: 200px; height: 200px; display:inline; background-color: rgb(87, 87, 241);">display:inline属性块级元素转换为行内元素</div>
   <div style="width: 200px; height: 200px; display:inline; background-color: rgb(87, 87, 241);">display:inline属性块级元素转换为行内元素</div>

 

 3、display:inline-block

display:inline-block将元素转换为行内块元素

    <div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
    <div style="width: 200px; height: 200px; display:inline-block; background-color: rgb(87, 87, 241);">display:inline-block属性将元素转换为行内块元素</div>
    <div style="width: 200px; height: 200px; display:inline-block; background-color: rgb(87, 87, 241);">display:inline-block属性将元素转换为行内块元素</div>

 4、display:none

display:inline-block使得元素不显示,常用于对元素设置显示与隐藏

    <div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
    <h3>下方有一个div使用了display:none属性元素不显示</h3>
    <div style="width: 200px; height: 200px; background-color: rgb(127, 142, 255); display: none;">使用了display:none属性元素不显示</div>
    

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值