집 >웹 프론트엔드 >CSS 튜토리얼 >레이아웃표시

레이아웃표시

高洛峰원래의: 2016-11-01 15:16:551649검색

레이아웃이란 무엇입니까? 브라우저는 요소를 올바른 위치에 올바른 크기로 배치합니다.

레이아웃: 요소를 배치하는 모드입니다.

요소의 크기와 위치에 영향을 미치는 CSS 속성: 표시 위치 부동 소수점 플렉스

display

요소의 표시 모드 설정 , 크기 및 위치를 포함하여 표시 값은 다음과 같습니다.

block

inline

inline-block

none

디스플레이 : 블록

블록 요소는 "블록 수준 요소"라고도 합니다

레이아웃표시

디스플레이 : 인라인

레이아웃표시

display: 선 특성:

1. 기본 너비는 콘텐츠 너비입니다.

2. 너비와 높이는 설정할 수 없습니다. 라인 레벨 요소는 설정할 수 없습니다

3. 피어 표시. 이전 요소와 후속 요소가 모두 display:inline(행 수준 요소)인 경우 동일한 행에 표시됩니다. 요소 내부에 줄을 감쌀 수 있습니다.

기본 표시: 인라인 요소span , a , label, cite , em, …

예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>display_inline</title>
    <style type="text/css">
    .sample{
        background-color: pink;
    }

    /* 行级元素设置宽高无效 */
    .sample{
        width: 200px;
        height: 200px;
    }

    /* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
    em{
        display: block;
    }

    </style>
</head>
<body>

<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>

레이아웃표시

성명：

이전 기사：CSS 재설정다음 기사：CSS 재설정

레이아웃표시

관련 기사