절대 위치 지정이 요소 너비에 미치는 영향

1. 문제의 원인

나만의 캐러셀 사진 스위치를 작성할 때 이전 사진이 슬라이드되면 그 뒤에 빈 공간이 생기며 이전 사진이 모두 슬라이드될 때까지 두 번째 사진이 나타나지 않습니다. 문제가 처음 발생했을 때 인터넷에서 검색해 보니 타이머 애니메이션이 이런 상황을 초래할 수 있다는 분들이 계셔서 코드 디버깅에서 타이머를 주석 처리해서 한 단계만 진행하면 그림이 멈추는 것을 발견했습니다. 그 뒤에는 여전히 공백이 있었기 때문에 타이머 문제가 아니라고 확신했습니다. 그래서 박스 모델을 확인해 보니 img를 감싸는 컨테이너 div#main의 너비가 제가 이상적으로 원했던 6개의 그림 너비의 합이 아닌 것을 발견했습니다. 컨테이너의 너비를 명시적으로 설정하지 않은 것으로 나타났습니다. div#메인. 그러나 여기에 질문이 있습니다. 컨테이너 너비를 명시적으로 설정하지 않으면 컨테이너 너비가 콘텐츠 채우기에 맞춰 조정되어서는 안 된다고 합리적으로 생각할 수 있습니다. 위에서 언급한 현상에 따르면 대답은 당연히 '아니오'입니다. 실제로 위치 지정도 컨테이너의 너비에 영향을 미치기 때문에 모든 경우에 해당되는 것은 아니라고 말할 수도 있습니다. 절대 위치 지정 요소의 크기와 배치 간의 관계에 대해 논의해 보겠습니다.

2. 블록 포함

먼저, 포함 블록(포지셔닝 컨텍스트)의 기본 개념을 검토해 보겠습니다.

1. 초기 포함 블록(루트 요소의 포함 블록)은 사용자 에이전트에 의해 결정됩니다.

2. 블록을 포함하는 플로팅 요소는 가장 가까운 블록 수준 상위 요소로 정의됩니다.

3. 상대적으로 위치하거나 정적으로 위치하는 요소의 포함 블록은 가장 가까운 블록 수준 상자, 테이블 셀 또는 인라인 블록 상자 상위 요소(모든 유형)의 콘텐츠 경계로 형성됩니다. .

4. 블록을 포함하는 절대 위치 요소는 테두리 경계(블록 수준 상위 요소의 경우) 또는 콘텐츠 경계(인라인 상위 요소의 경우)에 고정되지 않은 가장 가까운 위치의 상위 요소(모든 유형)로 설정됩니다. 강요).

3. 너비와 오프셋

일반적으로 요소의 크기와 위치는 포함 블록에 따라 다릅니다. 위치 지정은 요소의 여백 경계가 포함 블록의 해당 측면(내부 테두리 및 테두리의 인접한 측면)을 기준으로 오프셋되어 요소의 모든 것(여백, 테두리, 패딩, 콘텐츠)에 영향을 미치는 것을 의미합니다. . 따라서 위치 지정 요소의 경우 다음 방정식이 있습니다(다음 계산은 이 방정식을 기반으로 함).

왼쪽+여백-왼쪽+테두리-왼쪽-너비+패딩-왼쪽+너비+패딩-오른쪽+테두리-오른쪽-너비+마진-오른쪽+오른쪽=포함 블록의 너비(수식 1-1 )

이에 따르면 요소의 너비와 높이가 정의되지 않은 경우 해당 값은 위치에 따라 영향을 받습니다. 위치가 지정된 요소의 경우 너비와 높이를 설정해야 하는지 여부는 상황에 따라 결정되어야 합니다. 다음 상황의 너비와 높이를 결정하는 규칙을 고려하십시오.

1. 오프셋 속성인 위쪽, 왼쪽, 아래쪽, 오른쪽이 모두 결정되었으나 여백, 안쪽 여백, 테두리가 설정되지 않은 경우 너비와 높이가 명시적으로 설정되었는지 여부에 관계없이 값은 다음과 같습니다. 반면, 여백이나 패딩이 설정된 경우(자동도 계산됨), 테두리의 높이와 너비는 명시적으로 설정되지 않은 경우에도 그대로 유지됩니다. 오프셋 속성에 의해 결정됩니다.

2. 대체되지 않은 요소의 가로 축 동작:

1) 왼쪽, 너비, 오른쪽이 모두 자동이고 내부 및 외부 여백이나 테두리가 설정되지 않은 경우 계산 후 요소의 왼쪽이 정적 위치에 있습니다(왼쪽에서 오른쪽으로 읽음). 위의 방정식에 따르면 너비는 "적절하게 확장"됩니다. 오른쪽은 남은 수평 거리입니다.

2) 수식의 모든 값이 고정된 값인 경우 요소가 "과도하게 제한"되면 위 수식에 따라 권한이 재설정됩니다.

3) 위 방정식에서 하나의 속성 값만 auto인 경우 요소가 "과도하게 제한"되면 이 속성 값이 방정식을 충족하도록 재설정됩니다.

4) 세로축 규칙은 비슷하지만 위쪽만 정적 위치를 취할 수 있고 아래쪽은 그럴 수 없다는 점에 유의하세요.

3. 대체 요소의 경우(대체 요소에는 고유한 너비와 높이가 있으므로 여기에는 "적절한 확장"이라는 개념이 없습니다.)

1) 먼저 너비(높이)가 명시적으로 선언되어 있는지 확인하세요. 명시적으로 선언되어 있으면 값입니다. 그렇지 않으면 요소 콘텐츠의 실제 크기(너비 및 높이)에 따라 결정됩니다.

2) 왼쪽을 다시 보면 상단이 자동인 경우 정적 위치로 바꿉니다.

3) 왼쪽과 아래쪽 값이 여전히 자동인 경우 여백의 자동을 0으로 설정합니다. 0으로 설정되지 않은 경우 왼쪽과 오른쪽, 위쪽과 아래쪽과 동일하게 설정합니다.

4) 이후에 auto 값이 1개만 남으면 비대체 요소와 유사하며, 수식에 따라 auto 값이 재설정됩니다.

5) 요소가 "과도하게 제한"된 경우 사용자 에이전트는 대체되지 않은 요소와 마찬가지로 오른쪽(왼쪽에서 오른쪽으로 읽기)과 아래쪽을 무시합니다.

위는 절대 위치에 있는 요소의 실제 표시 너비와 높이에 영향을 미치는 요소를 분석한 것입니다. 인터페이스 표시 효과가 예상한 것과 일치하지 않는 경우 위의 관점에서 분석하는 것을 고려해 볼 수 있습니다. 요소의 너비 또는 위의 다른 속성 값을 다시 결정해야 하는지 확인하세요.

4. 일반적인 상황 분석

이제 프로젝트에서 겪었던 너비와 높이 문제의 실제 사례를 분석해 보겠습니다. 여기서 논의되는 가상 상황은 다음과 같습니다. 너비와 높이가 있는 가장 바깥쪽 div#rel은 상대 위치로 설정되고 해당 하위 div#abs는 너비를 설정하지 않고 고정 값으로만 ​​왼쪽으로 설정됩니다(내부 및 외부 여백과 테두리가 없는 경우). ), div#abs 내부에는 다양한 유형의 요소가 포함되어 있습니다.

1. 가장 안쪽 레이어가 블록 수준 요소로 래핑된 경우를 먼저 살펴보겠습니다.

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="rel1"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="abs1"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="box1"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="box2"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span> 

<span style="color: #800000">*</span>{<span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0</span>;<span style="color: #ff0000">padding</span>:<span style="color: #0000ff"> 0</span>}<span style="color: #800000">
#rel1</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> relative</span>;<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 120px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">background-color</span>:<span style="color: #0000ff"> yellow</span>;}<span style="color: #800000">
#abs1</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> absolute</span>;<span style="color: #ff0000">top</span>:<span style="color: #0000ff"> 0</span>;<span style="color: #ff0000">left</span>:<span style="color: #0000ff"> -15px</span>}<span style="color: #800000">
#box1</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">background-color</span>:<span style="color: #0000ff"> red</span>}<span style="color: #800000">
#box2</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">background-color</span>:<span style="color: #0000ff"> blue</span>}

코드에서 볼 수 있듯이 절대 위치 요소의 여백과 패딩을 0으로 설정하고 테두리가 없으면 위의 방정식 1-1은 다음과 같이 단순화됩니다.

                                        　绝对定位元素div#abs的 left+width+right = 包含块div#rel的 width

 

     由于绝对定位元素的left是定值，而未设width和right，所以后两个都是初始值auto，根据非替换轴的水平行为1）可知，先将width恰当收放，也就是以绝对定位元素的子元素内容刚好放好为准，再自动计算right的值，使三个属性之和刚好等于绝对定位的包含块div#rel的宽度120px。因此，此时绝对定位的元素div#abs的宽度width的值由其内容决定，在如下图两种情形下（通过代码改变子div#box1的宽度进行测试），绝对定位元素的width始终等于子div中宽度最大的那个值。且不受left值的影响，因为无论left值为多少，其right的值都会自动调整，从而不影响width的值。

 

         　　　　　　　      　　

 

     2.再来看最内层包裹的是替换行内元素的情况，代码及示意图如下：

 

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="rel2"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="abs2"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/pic1.jpeg"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">=""</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="img1"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/pic2.jpeg"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">=""</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="img2"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #800000">*</span>{<span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0</span>;<span style="color: #ff0000">padding</span>:<span style="color: #0000ff"> 0</span>}<span style="color: #800000">
#rel2</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> relative</span>;<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 120px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">background-color</span>:<span style="color: #0000ff"> yellow</span>;}<span style="color: #800000">
#abs2</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> absolute</span>;<span style="color: #ff0000">top</span>:<span style="color: #0000ff"> 0</span>;}<span style="color: #800000">
img</span>{<span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>}<span style="color: #800000">
#img1</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>}<span style="color: #800000">
#img2</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>}

 

     其中，绝对定位元素的left将被设为定值，而width根据“恰当收放”的原则，它的最大值应该是行内子元素宽度之和，最小值应该是子元素中宽度最大者的宽度值，而right的值情况有一点复杂，因为默认情况下，块级元素是垂直排列而行内元素都是一个挨着一个（中间的缝隙可以用：float:left清除）从左向右排列，且中间没有换行符。所以行内元素放在绝对定位的块级元素内作为元素内容宽度过宽时，会由于其行内元素的特点将内容撑开一直到其包含块内容区右边界（从左向右读），因此当行内子元素（即绝对元素的内容）受限出现折行时right的值为0，式1-1便简化为如下：

 

                                           绝对定位元素div#abs的 left+width = 包含块div#rel的 width

 

     当然这种情况应该是在left设定值在一定范围内的前提下（因为宽度没有设置，是auto的），那么如何确定这个范围呢？当绝对定位元素的宽度刚好等于其最小值和最大值时，利用上面的公式求出left的范围设置在（包含块width-最大绝对定位元素width）~（包含块width-最小绝对定位元素width）之间时，绝对定位元素的宽度是受left值影响的，可以通过上面的公式求出当left为某一特定值时的绝对定位元素的width。

왼쪽 값이 위에서 언급한 범위를 벗어나면 절대 위치 요소의 너비가 극한값에 도달하여 더 이상 왼쪽 값의 영향을 받지 않게 됩니다. 이때 오른쪽은 더 이상 0이 아닙니다. , 다음 공식을 만족하도록 계산이 자동으로 수행됩니다.

절대 위치 지정 요소 DIV#ABS의 LEFT+WIDTH+RIGHT = 포함 블록 DIV#REL 너비

                                                                              3. 가정을 전제로 정리하면

1) 절대 위치에 있는 요소가 블록 수준 요소를 래핑하는 경우 너비 값은 항상 하위 요소 중 가장 큰 너비 값과 같습니다.

2) 인라인 요소가 절대 위치 요소로 래핑된 경우 최대 너비 값은 하위 요소 너비의 합이고, 최소값은 너비가 가장 큰 하위 요소의 값입니다. 너비 값에 영향을 미치는 왼쪽 간격을 먼저 찾아야 하며, 사용하기 전에 너비를 찾기 위해 블록의 너비-왼쪽 값이 포함되어 있습니다.

5. 요약

여러 번 이야기했지만 실제로는 같은 사실입니다. 절대 위치에 있는 요소의 너비가 걱정된다면 고정 너비 값을 명시적으로 설정하는 것이 가장 좋습니다. 왜냐하면 규칙 1에 따르면 설정 4개의 오프셋 속성이 모두 설정된다는 전제하에 명시적인 너비 값이 유효합니다~ 하지만 실제 환경에서는 위치 지정 요소에 너비와 높이를 설정할 필요가 없으므로 너비와 높이가 영향을 미치는 요소를 이해하는 것이 중요합니다 효과 표시에 관한 몇 가지 질문이 있을 때 도움이 될 수 있습니다. 처음으로 기술 블로그를 작성하게 되었습니다. 먼저 저를 위해 리뷰를 해주신 우아한 남자 친구에게 진심으로 감사의 말씀을 전하고 싶습니다. 또한 O'Reilly 시리즈 "The Definitive Guide"의 저자에게도 감사의 말씀을 전하고 싶습니다. to CSS, Third Edition" 및 관련 직원을 위해 이 글의 내용 중 상당 부분은 책을 참조하고 각자의 이해를 바탕으로 작성되었습니다. 첫 번째 게시물에 문제가 있는 경우 비판하고 정정해 주시기 바랍니다. . 감사합니다~