수색…


통사론

  • 표시 : 없음 | 인라인 | 블록 | 목록 항목 | 인라인리스트 아이템 | 인라인 블록 | 인라인 테이블 | 테이블 | 테이블 셀 | 테이블 열 | 테이블 열 그룹 | 테이블 - 꼬리말 그룹 | 테이블 머리글 그룹 | 테이블 행 | 테이블 행 그룹 | 플렉스 | 인라인 - 플렉스 | 그리드 | 인라인 그리드 | 기동 | 루비 | 루비 기지 | 루비 텍스트 | 루비베이스 컨테이너 | 루비 텍스트 컨테이너 | 내용;

매개 변수

효과
none 요소를 숨기고 공간 점유를 막습니다.
block 요소를 차단하고 사용 가능한 너비의 100 %를 차지하고 요소 뒤에 나옵니다.
inline 인라인 요소, 너비를 차지하지 않고, 요소 다음에 중단 없음.
inline-block 인라인 및 블록 요소 모두에서 특별한 속성을 사용하지만 중단하지는 않지만 너비를 가질 수 있습니다.
inline-flex 요소를 인라인 레벨 플렉스 컨테이너로 표시합니다.
inline-table 요소는 인라인 수준 테이블로 표시됩니다.
grid 블록 요소처럼 동작하고 그리드 모델에 따라 내용을 레이아웃합니다.
flex 블록 요소처럼 동작하고 flexbox 모델에 따라 내용을 배치합니다.
inherit 상위 요소의 값을 상속합니다.
initial HTML 사양 또는 브라우저 / 사용자 기본 스타일 시트에서 설명한 동작에서 취한 기본값으로 값을 재설정합니다.
table HTML table 요소처럼 동작 table .
table-cell 요소가 <td> 요소처럼 동작하도록합니다.
table-column 요소가 <col> 요소처럼 동작하도록합니다.
table-row 요소가 <tr> 요소처럼 동작하도록합니다.
list-item 요소가 <li> 요소처럼 동작하도록합니다.

표시 속성

display CSS 속성은 HTML 문서의 레이아웃과 흐름을 제어하는 ​​기본 요소입니다. 대부분의 요소에는 block 또는 inline 의 기본 display 값이 있습니다 (일부 요소에는 다른 기본값이 있음).

인라인

inline 요소는 필요한만큼만 너비를 차지합니다. 동일한 유형의 다른 요소와 수평으로 쌓고 다른 비 인라인 요소는 포함 할 수 없습니다.

<span>This is some <b>bolded</b> text!</span>

위에서 설명한 것처럼 두 개의 inline 요소 인 <span><b> 는 인라인 (따라서 이름)이며 텍스트 흐름을 중단하지 않습니다.

블록

block 요소는 '부모 요소의 최대 가용 너비를 차지합니다. 새로운 행으로 시작하고 inline 요소와 달리 포함될 수있는 요소의 유형을 제한하지 않습니다.

<div>Hello world!</div><div>This is an example!</div>

div 요소는 기본적으로 블록 수준이며 위에 표시된 것처럼 두 개의 block 요소가 세로로 겹쳐져 있으며 inline 요소와 달리 텍스트 흐름이 중단됩니다.

인라인 블록

inline-block 값은 우리에게 두 세계의 장점을 제공합니다. 요소의 블렌드는 텍스트의 흐름과 padding , margin , heightinline 요소에 눈에 띄는 효과가없는 유사한 속성을 사용할 수 있습니다.

이 표시 값을 가진 요소는 일반 텍스트 인 것처럼 작동하며 결과적으로 text-align 과 같은 text-align 흐름을 제어하는 ​​규칙의 영향을받습니다. 기본적으로 콘텐츠를 수용 할 수있는 가장 작은 크기로 축소됩니다.

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

표시 : 인라인

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

디스플레이 : 블록

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

디스플레이 : 인라인 블록

없음

display 속성에 none 값이 지정된 요소는 전혀 표시되지 않습니다.

예를 들어 myDiv 라는 ID를 가진 div 요소를 생성 해 보겠습니다.

<div id="myDiv"></div>

이제 다음 CSS 규칙에 의해 표시되지 않는 것으로 표시 될 수 있습니다.

#myDiv {
    display: none;
}

요소가 display:none; 으로 설정되면 브라우저는 해당 특정 요소 ( positionfloat 모두)에 대한 다른 모든 레이아웃 특성을 무시합니다. 해당 요소에 대해 상자가 렌더링되지 않으며 html에있는 해당 요소가 다음 요소의 위치에 영향을 미치지 않습니다.

이는 visibility 속성을 hidden 설정하는 것과 다릅니다. visibility: hidden; 설정 visibility: hidden; 요소가 페이지에 요소를 표시하지는 않지만 요소는 렌더링 프로세스에서 공간이 보이는 것처럼 보이게됩니다. 따라서 다음 요소가 페이지에 표시되는 방식에 영향을줍니다.

display 속성의 none 값은 JavaScript를 사용하여 임의로 요소를 표시하거나 숨기므로 실제로 삭제하고 다시 만들 필요가 없습니다.

div를 사용하여 오래된 테이블 구조를 얻으려면

이것은 일반적인 HTML 테이블 구조입니다.

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

이 같은 구현을 할 수 있습니다.

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow