CSS 표시(인라인 차단 없음) 공통 속성 및 사용법 튜토리얼

display 속성은 요소가 생성해야 하는 상자 유형을 지정합니다.

이 속성은 레이아웃 생성 시 요소에 의해 생성되는 표시 상자 유형을 정의하는 데 사용됩니다. HTML과 같은 문서 유형의 경우 표시를 부주의하게 사용하면 HTML에 이미 정의된 표시 계층 구조를 위반할 수 있으므로 위험할 수 있습니다. XML의 경우 XML에는 이러한 종류의 계층 구조가 내장되어 있지 않으므로 모든 표시가 절대적으로 필요합니다.

1. 표시 속성에 대한 자세한 소개

1. CSS

표시 속성의 가능한 값에 대한 설명 다음 편집기는 가능한 값에 대한 기사를 제공합니다. ​CSS의 Display 속성입니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집기를 따라 살펴보겠습니다. 없음 이 요소는 표시되지 않습니다.
block 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.

2. CSS의 표시 속성에 대한 자세한 소개

모든 주요 브라우저는 표시 속성을 지원합니다.

참고: Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 "inline-table", "run-in", "table", "table-caption", "table-cell" 속성 값을 지원합니다. "테이블 열", "테이블 열 그룹", "테이블 행", "테이블 행 그룹" 및 "상속".

3. 디스플레이와 가시성의 차이점에 대한 자세한 설명

가시성 숨겨진 개체는 표시될 때 개체가 차지하는 물리적 공간을 유지하지만 디스플레이는 그렇지 않습니다.

vilibility: 숨김(숨김), 표시(표시) style="vislbility:hidden"

display: 없음(숨김), 차단(표시) style="display:none"

4. , position)

display는 요소의 표시 모드를 설정하는 데 사용됩니다.

display : block | none | inline

inline: 개체를 인라인 요소로 지정

block: 개체를 블록 요소로 지정

none : 숨겨진 개체

2.displayblock 속성 상세 소개

1.

displayblock이나 inlineblock 요소가 크롬에서 표시되지 않으면 어떻게 해야 하나요?

디스플레이: 인라인 블록 또는 디스플레이: 블록 요소가 크롬에서 정상적으로 표시되지 않으면 어떻게 해야 하나요?

데모 페이지에는 입력 상자가 하나만 있으면 높이가 커지고 단어 개수 표시와 답글 버튼이 표시됩니다.
이제 문제는 Chrome에서 첫 번째 새로 고침 후에만 입력 상자를 클릭할 수 있고 높이가 증가하고 단어 수 표시 및 답장 버튼 요소가 표시되지만 두 번째로 입력 상자를 클릭하면 높이만 증가한다는 것입니다. , 그러나 단어 개수는 표시되지 않습니다. (firefox는 정상입니다.)
div 표시 및 숨기기 방법

표시 속성은 요소의 표시 모드를 설정합니다. 해당 스크립트 기능은 표시이며, 선택적 값은 none, block 및 inline 이며, 각 값에 대한 설명은 다음과 같습니다. none은 요소를 숨기고 요소가 표시될 때 공백을 유지하지 않습니다. 블록 모드에서 요소를 표시합니다.

inline 요소를 인라인으로 표시합니다.

3.
IE11에서 li 내부 블록의 줄 바꿈이 유효하지 않은 이유

최근에 웹 페이지 태그 목록을 만들고 있었는데 처음에는 줄 바꿈이 필요하지 않았습니다. , 그리고 몇 분 만에 코드 작성을 마쳤고 Firefox 및 Chrome 브라우저에서는 테스트를 통과했습니다. 그러나 IE11에서 살펴보니 예기치 않게 예상한 결과를 얻지 못했습니다. li inside-block이 실제로 작동하지 않았습니다. IE11에서! 아직도 줄을 바꾸고 있어요!

3.display 상세 소개: inline 속성

1. CSS

Flex의 display:flex||inline-flex 속성에 대한 자세한 설명은 "Flex"를 의미합니다. 탄력성 "레이아웃"을 통해 박스 모델에 최대의 유연성을 제공합니다. 모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다.

flex: 개체를 유연한 상자로 표시합니다

inline-flex: 객체를 인라인 블록 수준의 탄성 상자로 표시합니다

2. css 레이아웃에서 display:inline-block으로 인해 발생하는 간격을 해결하는 방법에 대한 자세한 설명

작업 중입니다. H5 카드를 가로로 밀 때 display:inline-block; 을 사용했는데, 같은 가로줄의 요소 사이에 간격이 있는 것을 발견했습니다. 이는 분명히 내가 원하는 효과가 아니어서 왼쪽 부동으로 변경했습니다. gap 문제는 해결되었으나 가로 좌우 스크롤이 가능하도록 부모 요소의 너비를 설정해야 하므로 카드 수가 고정되지 않고 부모 요소의 너비를 조정해야 하므로 코드 양이 늘어납니다. 실시간으로 설정되기 때문에 js를 사용하기 때문에 코드의 볼륨이 커져도 최선의 선택은 아닙니다. 가장 좋은 해결책은 display:inline-block;을 사용하는 것 같아서 간격 문제가 나타납니다

4. display:none 속성에 대한 자세한 소개

1 display:none과 visible의 차이점은 무엇인가요? between :hidden

당시 내 대답은 둘 다 요소를 숨길 수 있지만 그 후에 요소를 표시:없음으로 설정하면 이전에 요소가 차지했던 문서 흐름 공간이 동시에 취소되지만 가시성은 다음과 같습니다. 숨김; 요소가 표시되지 않더라도 여전히 공간을 차지하게 합니다.
전화인터뷰였는데, 제가 질문에 답한 뒤에도 상대방은 디스플레이 관련 지식을 더 이상 묻지 않았습니다.
생각해보면 정말 운이 좋은 것 같아요. 누군가 나에게 디스플레이 관련 지식을 묻는다면, display:inline-block을 사용할 때 주의해야 할 점은 무엇일까요? 나는 확실히 싸울 수 없을 것이다.

2. CSS로 페이지 요소를 숨기는 5가지 방법 설명

CSS로 페이지 요소를 숨기는 방법에는 여러 가지가 있습니다. 불투명도를 0으로, 가시성을 숨김으로, 표시를 없음으로, 위치를 절대로 설정한 다음 위치를 보이지 않는 영역으로 설정할 수 있습니다.

요소를 숨기는 기술이 왜 그토록 많은데 모두 동일한 효과를 내는지 궁금해하신 적이 있나요? 각 방법은 실제로 다른 방법과 약간의 미묘한 차이가 있으며 이러한 차이점은 특정 상황에서 어떤 방법이 사용되는지를 결정합니다. 이 튜토리얼에서는 위의 방법 중에서 적절한 방법을 선택하여 다양한 상황에 따라 요소를 숨길 수 있도록 하여 기억해야 할 작은 차이점을 다룹니다.

3 css3을 사용하여 div를 표시하고 숨기는 예제 튜토리얼

표시 및 숨기기 p 특수 효과를 만드는 방법에는 여러 가지가 있습니다. 관심 있는 친구들은

1을 참조하세요. {display:block; }JS의 디스플레이와 다른 점이 있나요?
2. li과 ul 모두 디스플레이: 인라인이 필요한가요?

3. css - flex 레이아웃, display:flex 및 display:-webkit-box 차이점

【관련 권장 사항】

1

CSS BOX 유형 및 표시 속성에 대한 자세한 설명

2.

디스플레이에 대한 자세한 설명: CSS3

3 레이아웃 디스플레이

위 내용은 CSS 표시(인라인 차단 없음) 공통 속성 및 사용법 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!