css块级显示怎么设置

发布网友

我来回答

共2个回答

懂视网

通过设置元素的display属性实现转换

display取值：inline（行内）、block（块级）、inline-block（行内块级）

（视频教程推荐：css视频教程）

下面这个实例就是将span的显示模式转换为块级，将div的显示属性转换为行内块级，将img的显示模式转换为块级

<style>
 /*将span转换为块级元素--*/
 *{
  margin: 0;
  padding: 0;
 }
 span{
  display: block;
  background-color: red;
  width: 400px;
  height: 400px;
 }
 /*将div转换为行内块级元素*/
 div{
  display: inline-block;
  background-color: green;
  width: 300px;
  height: 300px;
 }
 /*将img转换为块级元素*/
 img{
  display: block;
  width: 200px;
 }
 </style>

效果图如下：

推荐教程：css快速入门

热心网友

1.设置float属性

将块级元素的css格式设置为float：left/right，比如，有两个panel，panelA和panelB，想要使其位于同一行，只需要设置A的css格式为float：left/right即可。
注意：只是设置A的float属性哦，若设置了B的float属性，则B后面的元素也会与其位于同一行。若使用该方法，则两个块级元素紧挨着。

2.设置display

display为inline-block，即编写css代码为display:inline-block.使用该方法，两个块级元素中间有一定间隔。
注意，该方法与上一方法相同，仍然需要设置A的display属性，而非B的属性。