CSS table-cell 속성을 사용하는 방법

table-cell은 인라인 요소 및 블록 요소와 같은 표시 속성을 사용하여 테이블 및 Excel 셀을 만드는 데 사용할 수 있습니다. 이 기사에서는 CSS의 table-cell 속성에 대해 설명합니다. 사용.

먼저 table-cell 속성의 기본 개념을 소개하겠습니다

table-cell은 display 속성의 값으로, table 태그의 하위 요소와 유사한 스타일을 부여할 수 있습니다.

하지만 '요소를 쉽게 나란히 배열할 수 있다'고 생각하는 것 같아요.

초기 "양식"의 이 부분에는 양식 레이블이 있습니다. 소위 웹사이트라는 것이 대중화되기 시작하면서 프레임워크는 기본적으로 테이블 태그를 사용하여 수행되었습니다.

HTML 태그 자체가 강제로 동작하기 때문에 "표시 폭 차이, 세로 배열" 같은 작업은 불가능하며 이제는 완전히 보이지 않고 네트워크에 반응합니다.

HTML 태그 자체가 강제로 테이블처럼 보이도록 하기 때문에 "표시 너비에 따른 행잉과 같은" 것이 불가능하며 이제 웹에서는 전혀 응답하지 않습니다.

"테이블"의 "셀"에 관해 엑셀 등의 "셀"이라고 들어보셨나요? 즉, display: table - cell은 테이블의 프레임을 재현할 수 있습니다.

한 가지 주의할 점은 일반 블록 요소와 다르게 움직인다는 것입니다.

table-cell 속성 사용 방법

기본적으로는 display: table을 사용한 다음 상위 요소에 table-cell을 사용합니다.

예제를 살펴보겠습니다

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

속성 값을 변경하고 다양한 작업을 시도할 수 있습니다. 여기서는 자세히 설명하지 않겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 CSS Video Tutorial 열을 참고하세요. ! !

위 내용은 CSS table-cell 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!