首页 > 代码库 > CSS的display属性

CSS的display属性

2024-07-07 22:10:02   234人阅读

网页设计中最常用的标签p、div、h1-h6（默认为块级元素）,span(默认为内联元素)

1、把元素显示为内联元素和把元素显示为块级元素

<style type="text/css">
    div{ display:inline; background:red;}/*区块元素将转换为内联元素*/
    span{ display:block; background:green;}/*将内联元素转换为区块元素*/
</style>
</head>
<body>
    <div>我是div块级元素</div>
    <span>我是span内联元素</span>
</body>

 

 

 

2、设置元素不可见和设置元素为inline-block

<style type="text/css">
    div{ display:none; background:red;}/*将元素设置为不可见*/
    span{ display:inline-block; background:green;}/*还是内联元素 跟inline没什么区别,只有一点区别就是会自动加上一些边距*/
    h1{ display:inline-block; background:blue;}
</style>
</head>
<body>
    <div>我是div块级元素</div>
    <span>我是span内联元素</span>
    <h1>fasdfsadf</h1>
</body>

 

 


联系
我们