집 > 기사 > 웹 프론트엔드 > CSS 웹페이지 레이아웃 정렬 불량 너비 계산 지침에 대한 자세한 설명

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

高洛峰원래의: 2017-03-17 14:20:351759검색

너비를 계산하는 이유
웹페이지의 픽셀 너비를 계산하는 것은 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 class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="CSS3의 열 속성 소개" href="http://m.php.cn/ko/faq/357124.html">CSS3의 열 속성 소개</a></span><span>다음 기사：<a class="dBlack" title="CSS3의 열 속성 소개" href="http://m.php.cn/ko/faq/357128.html">CSS3의 열 속성 소개</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1796681995.html" title="IE7에서 내 컨텍스트 메뉴가 버튼 뒤에 나타나는 이유는 무엇입니까?" class="aBlack">IE7에서 내 컨텍스트 메뉴가 버튼 뒤에 나타나는 이유는 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796682006.html" title="인라인 블록 요소에 대해 수직 정렬이 작동하지 않는 이유는 무엇입니까?" class="aBlack">인라인 블록 요소에 대해 수직 정렬이 작동하지 않는 이유는 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796682019.html" title="CSS에서 배경 이미지 경로의 미로를 탐색하는 방법은 무엇입니까?" class="aBlack">CSS에서 배경 이미지 경로의 미로를 탐색하는 방법은 무엇입니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796682080.html" title="-webkit-transform:translate3d(0,0,0)는 어떻게 웹 애니메이션용 하드웨어 가속을 잠금 해제합니까?" class="aBlack">-webkit-transform:translate3d(0,0,0)는 어떻게 웹 애니메이션용 하드웨어 가속을 잠금 해제합니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1796682081.html" title="``요소 안에 ``요소를 배치하는 것이 유효합니까?" class="aBlack">``요소 안에 ``요소를 배치하는 것이 유효합니까?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>