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

行块属性

2021-12-09 10:36:22 阅读：130 来源： 互联网

标签：span 行块标签 height width display 属性

1.行属性标签。

默认display：inline;

可以和其他行属性标签放置在同一行。 a, span, em, strong。

行属性标签的区域大小只由内容来撑开，width和height属性是无效的。

2.块属性标签。

默认display: block;

独占一行，div,p,h1~h6,ol,ul,li。

块属性标签默认宽度和父元素宽度保持一致，高度由内容撑开，但是可以通过width和height属性来改变。

3.行内块属性

默认 display：inline-block

可以和其他行属性标签以及行内块属性标签放置在同一行

可以通过css属性修改宽高，weight和height属性在此是有效的

p标签是块标签，可以设置高度和宽度

a标签是行标签，如果设置高度和宽度则没有效果，其区域的大小则由内容撑开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: lightblue;
            display: block;
        }
        span{
            width: 300px;
            height: 300px;
            background: lightgreen;
            display: block;
        }
        input{
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
  
        <div>我是div</div><div>我是div</div>
        <span>我是span</span><span>我是span</span>
        <input type="text" name="">
        <input type="text" name="">

</body>
</html>

标签：span,行块,标签,height,width,display,属性
来源： https://www.cnblogs.com/Cel0917/p/15665828.html

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

ICode9

行块属性