css 元素类型及转换

一、元素类型

1、块状元素

  • 独占一行,自上而下的排列。
  • 可以设置宽高。不设置宽高时,宽度默认显示占满父元素的宽度,高度由内容撑开。默认值auto并不意味着宽度100%
  • 块元素会严格按照盒子模型的显示规则,正确的显示marignpaddingborder等属性。
  • 一般会作为布局容器使用,可以容纳其他的块元素或者行内元素
  • 常见的块元素:divp h1~h6uloldl等。

2、行内元素

  • 从左至右依次排列,只有遇到br标签和元素边界才会换行。
  • 不能设置宽高,只能靠内容撑开。
  • 垂直方向占位受影响,如margin-top/bottompadding-top/bottomborder-top/bottom都不显示。
  • 行内元素与行内元素(尖括号)之间的换行符,会让两个标签之间出现一个4px的留白,一般情况下我们都要去除。
  • 常见的行内元素:aspaniemdelsinssupsub等。

3、行内块元素

行内块元素既有块元素的性值,又结合行内元素的性值,使用较为方便,我称之为,留有空隙且可以横排显示的盒子。

  • 从左向右依次排列,只有遇到br标签或者元素边界才会换行。
  • 可以设置宽度与高度,不设置的时候宽度与高度靠内容撑开。
  • 块元素会严格按照盒子模型的显示规则,正确的显示marignpaddingborder等属性。
  • 行内块元素与行内元素有一样的情况,会因为标签之间的换行符出现4px的留白。
  • 常见的行内块元素:tdinputbuttontextareaselect等。
  • img是一个比较特殊的标签,虽然能够设置宽度与高度,但是类型却是为行内类型,我们把img称为替换元素(置换元素)。

二、元素类型的转换

  • display:转换元素类型。block块元素,inline行内元素,inline-block行内块元素,none不占为隐藏元素。

鼠标移入显示隐藏元素:

<head>
    <style>
        .box1{
            width:100px;
            background-color: pink;
        }
        .box2{
            width:100%;
            height:100px;
            background-color: yellowgreen;
            display: none;
        }
        .box1:hover .box2{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">请移入鼠标
        <div class="box2"></div>
    </div>    
</body>

效果:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值