首页 > 其他分享> > 行块属性

行块属性

2021-12-09 10:36:22 作者：互联网

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