CSS 오프셋이있는 요소 주위의 텍스트를 포지셔닝합니다

CSS는 속성 및 해당

속성, ,

, position (현재 제한된 브라우저 지원) 등과 같은 텍스트를 포함하여 페이지 요소를 찾는 다양한 방법을 제공합니다. 속성은 또 다른 옵션입니다. inset-* translate 속성은 일반적으로 미리 정해진 경로를 따라 요소를 애니메이션하는 데 사용됩니다. 예를 들어, 다음 예제의 정사각형은 원형 경로를 따라 움직입니다. margin anchor() 등록 된 CSS 사용자 정의 속성 ()은 제곱 요소를 설정하고 애니메이션하는 데 사용됩니다. 애니메이션은 가 주어진 경로의 어느 시점에서든 요소를 ​​찾는 데 사용될 수 있으므로 작동합니다. 는 다음 속성으로 구성된 약어 속성이라는 것을 알지 못할 수도 있습니다. offset

offset : 경로의 출발점

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

: 요소가 그것을 따라 움직일 수있는 모양

--p : 요소가 경로를 따라 움직이는 거리 offset-distance offset : 앵커 포인트 및 오프셋 경로에 대한 요소의 회전 각도 offset

• : 경로 에 정렬 된 요소 내의 위치 offset-position 속성은 우리가 달성하고자하는 것에 중요합니다. SVG 모양 또는 CSS 모양 함수를 포함하여 모양 값과 컨테이너 요소의 기준 상자를 포함하여 경로를 생성합니다.
참조 프레임? 이것들은 , ,
• 및 , 및 와 같은 SVG 컨텍스트를 포함하여 CSS 박스 모델에 따라 결정된 요소 크기입니다. 그들은 컨테이너 요소의 가장자리에서 경로를 따라 요소를 배치하는 방법을 단순화합니다. 다음은 예입니다. 아래의 모든 작은 사각형은 컨테이너 요소 의 기본 왼쪽 상단에 배치됩니다. 대신, 작은 원은 각각 offset-path, 및 의 오른쪽 상단 모서리에 위치합니다 (컨테이너 요소 제곱 주변의 25%).
• 참고 : offset-distance 포함 된 부모 요소 내에서 요소에 대한 공간을 할당하지 않으려면 요소의 레이아웃 컨텍스트를 분리 할 수 ​​있습니다. 이것은 내부 단락 텍스트가 가장자리에 가까워 질 수 있도록 위의 예제에서 취한 방법입니다. 따라서 배치 요소 (작은 사각형 및 원)는
를 사용하여 고유 한 컨텍스트를 얻으므로 일반 문서 스트림에서 제거됩니다.
• 기준 프레임에 대한이 위치를 위치 시키면 특정 UI 모듈의 주변을 따라 알림 포인트 및 장식 리본 팁과 같은 요소를 쉽게 배치 할 수 있습니다. ,

  도 경로를 따라 요소를 회전시킬 수 있기 때문에 텍스트가 포함 된 블록의 가장자리를 따라 텍스트를 배치하는 방법을 더욱 단순화합니다. 간단한 예는 블록의 오른쪽 가장자리에있는 기사 날짜를 보여줍니다. 우리가 방금 본 바와 같이, offset-rotate는 offset 속성을 ​​참조 프레임 경로 및

  컨테이너 단위와 함께 사용하여

  <div>
    <div></div>
  </div>

  - 포함 된 요소의 너비 또는 높이를 기준으로

  @property --p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
  }
  .square {
    offset: top 50% right 50% circle(50%) var(--p);
    transition: --p 1s linear;
  
    /* 等同于：
      offset-position: top 50% right 50%;
      offset-path: circle(50%);
      offset-distance: var(--p); */
  
    /* 其他样式 */
  }
  
  .circle:hover .square{ --p: 100%; }</percentage>

  를 쉽게 설정할 수 있습니다. 이 기사의 끝에있는 "추가 읽기"섹션에서 컨테이너 쿼리 및 컨테이너 쿼리 유닛에 대한 학습에 대한 더 많은 참조를 포함시킬 것입니다.

  offset 속성은 마지막 예제에서도 사용됩니다. 요소 변위 및 회전에 대한 앵커 포인트를 제공합니다. 예를 들어, 예에서 90도 회전은 요소의 왼쪽 하단에서 발생합니다. 속성은 또한 기사의 시작 부분에서 볼 수 있듯이 포지셔닝은 다음과 같은 동적 디자인 효과를 허용합니다. offset-distance

  요약 그래픽 디자인 (예 : 국경을 따르는 텍스트), 텍스트 주석 또는 동적 텍스트 (예 : 오류 메시지)에 대한 CSS offset-anchor는 사용하기 쉬운 옵션입니다. 부모 요소가 포함 된 참조 상자를 따라 요소를 찾아 회전하며 필요에 따라 애니메이션을 추가 할 수 있습니다. offset-anchor inset-* 추가 읽기 bottom -10px CSS padding-box 속성 : CSS- 트릭, MDN CSS

  <div>
    <div></div>
    <div></div>
    <p>She sells sea shells by the seashore</p>
  </div>
  
  <div>
    <div></div>
    <div></div>
    <p>She sells sea shells by the seashore</p>
  </div>
  
  <div>
    <div></div>
    <div></div>
    <p>She sells sea shells by the seashore</p>
  </div>

  속성 : CSS- 트릭, MDN .small { /* 其他样式 */ position: absolute; &.square { offset: content-box; border-radius: 4px; } &.circle { border-radius: 50%; } } .big { /* 其他样式 */ contain: layout; /* (或 position: relative) */ &:nth-of-type(1) { .circle { offset: content-box 25%; } } &:nth-of-type(2) { border: 20px solid rgb(170 232 251); .circle { offset: border-box 25%; } } &:nth-of-type(3) { padding: 20px; .circle { offset: padding-box 25%; } } } 컨테이너 쿼리 길이 장치 : CSS- 트릭, MDN

  offset

  AT-RULE : CSS- 트릭, web.dev

  The Irreplaceable Value of Human Decision-Making in the Age of AI

  Published on 11^th Dec
  An excerpt from the HBR article CSS Box 모델 :

  article {
    container-type: inline-size;
    /* 其他样式 */
  }
  
  .date {
    offset: padding-box 100cqw 90deg / left 0 bottom -10px;
  
    /*
      等同于：
      offset-path: padding-box;
      offset-distance: 100cqw; (容器元素宽度的 100%)
      offset-rotate: 90deg;
      offset-anchor: left 0 bottom -10px;
    */
  }

  CSS- 트릭 SVG 참조 상자 :

  w3c

위 내용은 CSS 오프셋이있는 요소 주위의 텍스트를 포지셔닝합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!