css 块级变行内元素

在CSS中，有时我们需要将块级元素转化成内联元素或者将内联元素转化成块级元素。这种转化可以通过CSS的display属性来实现。

/* 块级元素转化为内联元素 */display: inline;
    /* 内联元素转化为块级元素 */display: block;

当我们将一个块级元素转化成内联元素时，这个元素将以行内元素的形式呈现。其宽度只占据了其内容所需的宽度。同时，行内元素不会换行，所以如果我们在一个p标签内，连续添加了两个块级元素，它们会分别占一行。但是如果我们将这两个元素转化成内联元素，则它们会在同一行显示。

p {
        /* 父元素设置字体大小为0，去除换行符的间距 */    font-size: 0;
        white-space: nowrap;
}
.block {
        display: inline;
        margin-right: 10px;
}

上面的代码将p标签内的块级元素转化成了内联元素，并给它们加了一个margin-right，使它们之间有一定的距离。

当我们将一个内联元素转化成块级元素时，这个元素将以块级元素的形式呈现。它不再和周围的元素放在同一行，而是占据一整行。同时，块级元素会默认设置宽度为100%。

.inline {
        display: block;
        width: 200px;
        height: 200px;
        background-color: red;
}
    

上面的代码将一个内联元素转化成了块级元素，并给它设置了宽度、高度和背景颜色。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！