CSS 웹페이지 레이아웃 정렬 불량 너비 계산 지침에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 웹페이지 레이아웃 정렬 불량 너비 계산 지침에 대한 자세한 설명

高洛峰

Mar 17, 2017 pm 02:20 PM

너비를 계산하는 이유
웹페이지의 픽셀 너비를 계산하는 것은 CSS웹페이지 레이아웃을 깔끔하고 호환하기 위한 것입니다. 일반적으로 웹 페이지를 좌우 구조로 배치하거나 패딩과 여백을 사용할 때 너비를 계산하지 않으면 전체 페이지의 너비를 계산하게 됩니다. 너무 크거나 작으면 정렬 문제가 발생합니다.

CSS 너비 계산 방법
예 1: 왼쪽 및 오른쪽 구조의 레이아웃 스타일을 계산합니다.
전체 너비가 400px인 경우 왼쪽과 오른쪽의 합이 400px 미만이어야 하며 왼쪽이 300px, 오른쪽이 100px일 수 있습니다.
올바른 코드:

<head>

< p class="zuo">왼쪽 300px

오른쪽 100px

< /p>

위는 왼쪽 및 오른쪽 구조의 올바른 전체 너비로, 정확히 400px입니다

오류:
전체 너비를 변경하지 않고 왼쪽이 300px, 오른쪽이 120px이므로 전체 너비가 20px을 초과하면 어떤 문제가 발생하는지 살펴보겠습니다.

좌우 구조 너비 계산 www.webjx.com

< ;/head>

< p class="zuo">왼쪽 300px

오른쪽 100px

위 사진을 보시면 아시겠지만 전체 너비가 20px 정도이므로 왼쪽과 오른쪽 구조가 플러시되지 않고 오른쪽이 아래로 떨어집니다.
이런 식으로 오정렬 호환성 문제가 발생합니다. 일반적으로 실제로 계산 부주의로 인해 차이가 작은 경우 일반적으로 차이가 1px-2px이므로 오정렬을 제거합니다. 호환성을 고려하면 너비 계산부터 시작할 수 있습니다.

예시 2: 왼쪽과 오른쪽 구조에 1px 테두리가 있습니다
일반적으로 왼쪽과 오른쪽 구조에 1px 테두리가 있고, 왼쪽과 오른쪽 구조를 설정하면 테두리가 일부 추가됩니다. 오른쪽 구조의 경우 테두리 너비를 함께 계산된 왼쪽 및 오른쪽 구조의 너비와 일치시켜야 합니다.
올바른 예:
CSS 및 html 코드는 다음과 같습니다.

< ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
좌우 구조 너비 계산 www.webjx.com</ 제목><br> <style type="text/css"><br>.webjxcom{width:400px;}<br>.zuo{ float:left width:298px background; :#CCC;} <br>.you{ float:right; width:98px; background:#999; border:1px solid #F00;}<br></style><br></head><br><body> <br><p class="webjxcom"><br><p class="zuo">왼쪽 300px</p><br><p class="you" >오른쪽 100px</p> ;<br></p><br></body><br></html></p> <p>왼쪽과 오른쪽 구조의 너비는 다음과 같습니다. 1px, 좌우 2픽셀의 테두리를 빼야 하므로 왼쪽의 너비는 298px, 오른쪽의 너비는 98px입니다. </p> <p>테두리를 빼지 않으면 다음과 같은 효과가 발생합니다. : </p> <p><span style="color: #333333"><span style="color: #333333">p+CSS</span></span>백분율 너비 계산 설정<br>때때로 너비를 계산하기 위해 백분율을 사용해야 할 때도 있습니다. 일반적으로 총 백분율 너비이기도 합니다. 100%를 초과할 수 없습니다</p> <p>CSS 너비를 계산할 때 요약에 주의하세요. <br>왼쪽-오른쪽 구조이든, 다중 열 레이아웃이든, 단일 p-너비 레이아웃 설정이든, CSS 너비 계산에 주의해야 합니다. 특히 패딩, 여백, 테두리 등을 사용할 때<span style="color: #333333"><span style="color: #333333">CSS 속성</span></span>, 이때 우리는 모두 자신이 설정한 점유 너비를 계산하고 그 합이 무엇인지 확실히 파악해야 합니다. 동일한 행의 너비가 전체 너비보다 작거나 같으며, 전체 너비보다 크면 위치가 잘못된 호환성 문제가 나타납니다. 따라서 일반적인 정렬 불량이 있는 경우 너비를 계산하는 것부터 시작할 수 있습니다. 물론 정렬 불량의 원인은 여러 가지가 있습니다. 이 역시 정렬 불량 호환성 문제를 해결하는 방법 중 하나입니다. </p><p>위 내용은 CSS 웹페이지 레이아웃 정렬 불량 너비 계산 지침에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>핫 AI 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>무료로 이미지를 벗다</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI 옷 제거제</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>AI Hentai를 무료로 생성하십시오.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780618.html" title="Will R.E.P.O. 크로스 플레이가 있습니까?" class="phpgenera_Details_mainR4_bottom_title">Will R.E.P.O. 크로스 플레이가 있습니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 몇 달 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/article.html">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>뜨거운 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title"> <h3>메모장++7.3.1</h3> </a> <p>사용하기 쉬운 무료 코드 편집기</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 중국어 버전</h3> </a> <p>중국어 버전, 사용하기 매우 쉽습니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title"> <h3>스튜디오 13.0.1 보내기</h3> </a> <p>강력한 PHP 통합 개발 환경</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title"> <h3>드림위버 CS6</h3> </a> <p>시각적 웹 개발 도구</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac 버전</h3> </a> <p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>뜨거운 주제</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7554</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1382</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>83</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>59</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/newyorktimesdailybrief" title="NYT 연결 힌트와 답변" class="phpgenera_Details_mainR4_bottom_title">NYT 연결 힌트와 답변</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>24</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>96</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/faq/zt">더보기</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796781381.html" title="GraphQL 캐싱 작업" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174234817561178.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="GraphQL 캐싱 작업" /> </a> <a href="https://www.php.cn/ko/faq/1796781381.html" title="GraphQL 캐싱 작업" class="phphistorical_Version2_mids_title">GraphQL 캐싱 작업</a> <span class="Articlelist_txts_time">Mar 19, 2025 am 09:36 AM</span> <p class="Articlelist_txts_p">최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796785898.html" title="Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174312469519177.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축" /> </a> <a href="https://www.php.cn/ko/faq/1796785898.html" title="Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축" class="phphistorical_Version2_mids_title">Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축</a> <span class="Articlelist_txts_time">Mar 28, 2025 am 09:18 AM</span> <p class="Articlelist_txts_p">최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796788768.html" title="vue 3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174358993181853.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="vue 3" /> </a> <a href="https://www.php.cn/ko/faq/1796788768.html" title="vue 3" class="phphistorical_Version2_mids_title">vue 3</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:32 PM</span> <p class="Articlelist_txts_p">그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796780854.html" title="Leakenty와 함께 자신의 Bragdoc을 만듭니다" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174226820481830.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Leakenty와 함께 자신의 Bragdoc을 만듭니다" /> </a> <a href="https://www.php.cn/ko/faq/1796780854.html" title="Leakenty와 함께 자신의 Bragdoc을 만듭니다" class="phphistorical_Version2_mids_title">Leakenty와 함께 자신의 Bragdoc을 만듭니다</a> <span class="Articlelist_txts_time">Mar 18, 2025 am 11:23 AM</span> <p class="Articlelist_txts_p">개발자로서 어느 단계에 있든, 우리가 완료 한 작업은 크든 작든, 개인적이고 전문적인 성장에 큰 영향을 미칩니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796788752.html" title="브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174358903289234.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까?" /> </a> <a href="https://www.php.cn/ko/faq/1796788752.html" title="브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까?" class="phphistorical_Version2_mids_title">브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까?</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:17 PM</span> <p class="Articlelist_txts_p">나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796788757.html" title="CI/CD에 약간" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174358927236069.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CI/CD에 약간" /> </a> <a href="https://www.php.cn/ko/faq/1796788757.html" title="CI/CD에 약간" class="phphistorical_Version2_mids_title">CI/CD에 약간</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:21 PM</span> <p class="Articlelist_txts_p">"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796789317.html" title="끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174364741689028.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드" /> </a> <a href="https://www.php.cn/ko/faq/1796789317.html" title="끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드" class="phphistorical_Version2_mids_title">끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드</a> <span class="Articlelist_txts_time">Apr 03, 2025 am 10:30 AM</span> <p class="Articlelist_txts_p">다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796788762.html" title="반응 형 디자인을위한 브라우저 비교" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174358951197249.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="반응 형 디자인을위한 브라우저 비교" /> </a> <a href="https://www.php.cn/ko/faq/1796788762.html" title="반응 형 디자인을위한 브라우저 비교" class="phphistorical_Version2_mids_title">반응 형 디자인을위한 브라우저 비교</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:25 PM</span> <p class="Articlelist_txts_p">목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다</p> </div> </div> <a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744957727"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>