CSS 요소의 표시 모드를 전환하는 방법

요소의 표시 속성을 설정하여 변환이 이루어집니다.

표시 값: inline(인라인), block(블록 수준), inline-block(인라인 블록 수준)

(비디오 튜토리얼 권장 사항: css 비디오 튜토리얼 )

다음 예는 스팬의 표시 모드를 블록 레벨로 변환하고, 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로 빠른 시작

위 내용은 CSS 요소의 표시 모드를 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!