CSS에서 디스플레이를 사용하는 방법
표시 일반적으로 사용되는 속성 값은 블록 수준 블록, 행 수준 인라인, 행 블록 수준 인라인 블록, 없음 및 행 수준 또는 블록 수준 레이블입니다. 디스플레이를 통해 변환 가능#🎜🎜 #
이 글에서는 특정 참조 값이 있는 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>//行级元素행 블록 수준 요소 변환
#🎜🎜 #(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7547
15
1382
52
83
11
57
19
22
90
유출된 셀카 디스플레이가 이전에 저렴했던 카메라 라인에 복잡성을 추가함에 따라 Fujifilm X-M5 가격 기대치가 높아졌습니다.
Sep 07, 2024 am 09:34 AM
Fujifilm 팬들은 최근 X-T50의 전망에 매우 흥분했습니다. X-T50은 1,000달러 미만 APS-C 카테고리에서 꽤 인기를 끌었던 예산 중심의 Fujifilm X-T30 II의 재출시를 선보였기 때문입니다. 안타깝게도 후지필름 X-T50이 출시되면서
Apple Studio Display의 전원 코드는 분리 가능하지만 특별한 도구가 필요합니다
May 17, 2023 pm 03:05 PM
Apple Studio Display는 이제 공식적으로 매장에서 판매되고 있으며 전 세계의 많은 고객이 제품을 구입했습니다. ProDisplayXDR과 달리 StudioDisplay에는 제거할 수 없는 것처럼 보이는 고유한 전원 커넥터가 있습니다. 케이블은 제거가 가능한 것으로 밝혀졌지만 케이블을 제거하려면 특별한 도구가 필요합니다. Apple은 자사 웹사이트에서 Studio Display의 전원 코드는 분리할 수 없다고 밝혔으며 많은 사용자가 그렇게 생각합니다. 손으로 케이블을 빼는 것은 불가능해 보이지만 다행히 케이블은 모니터에서 분리될 수 있기 때문이다. , Apple에는 새로운 StudioDispl에서 정보를 추출하기 위한 특수 도구가 있습니다.
참고:Apple Studio Display와 Samsung Smart Monitor M8 비교
May 11, 2023 pm 10:46 PM
삼성 스마트 디스플레이 M8 vs. 애플 스튜디오 디스플레이: 디자인과 크기 애플 스튜디오 디스플레이는 출시 이후 비교적 단순한 L자형 스탠드에 비교적 얇은 패널로 구성된 아이맥과 비교돼 왔다. 이는 잘 알려져 있고 많은 사랑을 받는 미학인데, 삼성은 이를 프레젠테이션에 차용한 것 같습니다. Samsung SmartMonitor M8은 매우 유사해 보이는 스탠드에 얇은 화면을 적용한다는 동일한 아이디어를 사용합니다. 왼쪽 하단 모서리의 작은 부분이 조금 튀어나온 점, 삼성의 턱 부분이 매우 얇은 등 일부 자잘한 요소는 다르지만 기본적인 디자인 면에서는 거의 비슷한 것 같습니다. 삼성은 24인치 아이맥에서 많은 영감을 얻은 것 같습니다. 애플의 디스플레이는 삼성보다 작다.
삼성: E Ink 기술을 기반으로 한 새로운 대형 디스플레이는 색상을 표시하고 무선으로 통신합니다.
Jun 19, 2024 pm 03:37 PM
우리는 e-리더와 같은 전자 잉크를 사용하는 디스플레이 기반 장치에 대해 자주 보고합니다. 이 기술은 여러 가지 장점을 제공합니다. 백라이트 없이 밝은 환경에서 읽을 수 있으며 조명 없이 전환할 때만 전원이 필요합니다.
비교: Apple Studio Display와 LG UltraFine 5K 디스플레이: 어느 것이 더 낫습니까?
Apr 16, 2023 pm 08:25 PM
StudioDisplay와 LG UltraFine5KDisplay는 시장에서 비슷한 위치를 차지하고 있지만 Apple의 모니터는 300달러 더 비쌉니다. 이 모니터를 비교하는 방법에 대해 알아야 할 모든 것이 있습니다. 6년은 기술 분야에서 긴 시간이며, Apple이 5,000달러 미만의 브랜드 모니터를 판매한 이후이기도 합니다. 이 기간 동안 Apple은 LG와 제휴하여 특별히 Mac 사용자를 대상으로 한 LG UltraFine 시리즈를 판매했습니다. 2019년에 Apple은 저렴한 Mac용 디스플레이인 ProDisplayXDR을 선호하여 LG 모니터 판매를 중단했습니다.
Apple Studio Display를 지원하도록 Boot Camp가 업데이트되었습니다.
May 20, 2023 pm 11:34 PM
Mac에서 Windows를 실행하는 IntelMac 사용자는 이제 BootCamp에서 드라이버를 업데이트하여 Apple의 StudioDisplay를 지원할 수 있습니다. Apple은 정기적으로 BootCamp를 업데이트하여 새로운 하드웨어에 대한 지원은 물론 일반적인 호환성 및 성능 개선을 도입합니다. 3월 소프트웨어 업데이트에서 Apple은 BootCamp가 새로운 StudioDisplay와 작동하도록 활성화했습니다. BootCamp를 버전 6.1.17로 가져오는 업데이트에는 두 가지 주요 지원 요소가 도입되었습니다. 첫째, StudioDisplay와의 호환성을 추가하여
디스플레이에는 어떤 가치가 있습니까?
Nov 20, 2023 pm 05:28 PM
표시 값에는 block, inline, none, inline-block, flex, Grid, table, inline-table 및 list-item이 포함됩니다. 자세한 소개: 1. 요소를 블록 수준 요소로 렌더링하는 블록 블록 수준 요소는 페이지에서 블록을 형성하고 한 줄만 차지합니다. 2. 요소를 인라인 요소로 렌더링하는 인라인. 인라인 요소는 그 자체로 한 줄을 차지하지 않으며 다른 요소와 나란히 있을 수 있습니다. 3. 없음, 이 값은 요소가 페이지에 표시되지 않음을 지정합니다.
Apple Studio Display는 몇 가지 제한 사항이 있지만 Windows에서 작동합니다.
Apr 14, 2023 pm 03:49 PM
Apple은 이번 주에 사용자가 Mac에 디스플레이를 연결할 때 함께 작동하는 카메라, 마이크, 스피커를 결합한 27인치 5K 패널을 갖춘 Studio Display를 발표했습니다. 창문은 어디에 있나요? 어떤 이유로 Windows PC에서 Apple의 1,599달러 모니터를 사용해야 한다면 그렇게 할 수 있지만 몇 가지 제한 사항이 있습니다. Thunderbolt 연결을 통해 Windows PC에 연결하면(일부 PC에서는 지원되지 않음) StudioDisplay가 일반 모니터로 인식됩니다. 즉, Windows에서 사용하기 위해 이들 중 하나를 구입한다면 기억하고 싶을 것입니다.
