CSS에서 디스플레이를 사용하는 방법
- 清浅원래의
- 2018-11-17 15:46:0510969검색
표시 일반적으로 사용되는 속성 값은 블록 수준 블록, 행 수준 인라인, 행 블록 수준 인라인 블록, 없음 및 행 수준 또는 블록 수준 레이블입니다. 디스플레이를 통해 변환 가능#🎜🎜 #
이 글에서는 특정 참조 값이 있는 CSS의 디스플레이 속성을 공유합니다. 우리는 일반적으로 다음을 사용합니다. CSS 레이아웃을 만들 때 표시 속성의 값입니다.display 속성은 여러 값을 가질 수 있지만 일반적으로 사용되는 값은 다음과 같습니다.
none: 이 요소는 표시되지 않습니다.
block: 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
inline: 이 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 요소로 표시됩니다.
inline-block: 블록 수준 속성과 행 수준 속성을 모두 갖는 인라인 블록 요소입니다.
그래서 이번 글에서는 자주 사용되는 속성값인 block, inline, inline-block, none을 자세히 소개하겠습니다.
display : block# 🎜🎜#특징: 단독으로 한 줄을 차지하며, 너비와 높이는 CSS자주 사용되는 블록 수준 요소: div, p, ul, li, ol, form, addressdisplay: inline
특징: 내용에 따라 크기, 너비, 높이가 결정됨 CSS일반적으로 사용되는 행 수준 요소:span,strong,em,a,del<style>
div{
background-color: pink;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><span class="span">hello</span>world</p>//行级元素위 그림과 같이 block요소가 행의 전체 너비를 100%로 설정하려면 다음 콘텐츠가 새 줄로 시작해야 합니다행 수준 요소는 콘텐츠의 해당 부분만 표시하고 행을 차지하지 않음Rendering#🎜🎜 #
행 블록 수준 요소 변환
#🎜🎜 #(1) 블록 레벨 요소를 라인 레벨 요소로 변환
블록 레벨 요소 설정 표시: inline
# 🎜🎜#
(2) 행 수준 요소가 블록 수준으로 변환됨 #🎜🎜 #행 수준 요소에 대한 표시:블록 설정
# 🎜🎜#결과는 다음과 같습니다
display:inline -block
<style>
span{
background-color: yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p> 렌더링 
# 🎜🎜#
display: 없음 및 가시성: 숨겨진 차이
display: 없음은 숨기는 데 사용됩니다. 보이지 않을 뿐만 아니라 공간도 차지하지 않는 요소입니다.
visibility: Hidden을 사용하여 요소를 숨길 수도 있지만 보이지 않더라도 여전히 존재하므로 공간이 남습니다# 🎜 🎜#
예
display:none
.span{
background-color: aquamarine;
display:none;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>렌더링# 🎜 🎜#hello는 숨겨져 있지만 공간을 남기지 않습니다visibility: Hidden
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>Rendering
hello는 숨겨져 있지만 아직 자리가 있습니다
요약: 위 내용은 이 글의 전체 내용입니다. 디스플레이를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다#🎜🎜 #
위 내용은 CSS에서 디스플레이를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!