CSS의 표시 속성 및 테두리 속성과 관련된 일반적인 문제에 대한 설명

이 문서는 CSS의 표시 속성 및 테두리 속성과 관련된 일반적인 문제에 대한 설명을 제공합니다. 여기에는 특정 참조 값이 있으므로 도움이 될 수 있습니다.

HTML은 너무 복잡한 문제가 거의 없기 때문에 CSS에 대한 일반적인 질문과 답변에 대한 기사를 작성하겠습니다~

display: none;과 visible:hidden;

간단히 말하면:

display: none ; 존재하지 않는 것처럼 더 이상 공간을 차지하지 않습니다.

visibility:hidden; 투명도를 0으로 변경하고 여전히 공간을 차지합니다.

inline, inline-block 및 block의 차이점

우선 각 태그에는 기본 표시 속성 값이 있다는 점을 분명히 해야 합니다. 예:

태그는 기본적으로 display: block;

태그는 기본적으로 display: inline; 즉,

태그에 대해 display: inline;을 설정하고 태그에 대해 display: block을 설정할 수 있습니다. ;

it 한 줄을 차지합니다. 즉, 주위에 다른 요소가 허용되지 않습니다.

너비와 높이를 설정할 수 있습니다.

너비가 설정되지 않은 경우 너비가 가득 차게 됩니다.

• 위, 아래, 왼쪽 및 오른쪽 여백과 여백이 모두 작동합니다(여기서 역할은 다른 요소와의 거리를 늘릴 수 있음을 의미합니다).

• 표시용: 인라인;

• 한 줄을 단독으로 차지하지 않으며 주변에 다른 요소가 있을 수 있습니다.

• 너비와 높이는 콘텐츠에서 지원되며 너비와 높이 설정이 유효하지 않습니다.

왼쪽과 오른쪽의 여백과 패딩은 거리를 만들 수 있지만 위쪽과 아래쪽의 여백과 패딩은 거리를 만들 수 없습니다.

• 더 많은 참고 사항을 보려면 여기를 클릭하세요.

• 디스플레이용: inline-block;

• 인라인과 블록을 합친 것과 같습니다.

• 주변의 다른 요소를 허용하세요.

너비와 높이를 설정할 수 있습니다.

• 인라인의 padding-top이나 padding-bottom을 중심으로 설명해주세요. 인라인 요소에 이 두 값을 설정하면 실제로 패딩이 추가됩니다. 배경색을 설정하면 배경색이 패딩에 작용하는 것을 확실히 볼 수 있지만, 아래 요소와의 거리가 늘어나지는 않습니다. .
코드는 다음과 같습니다:

• <span>block1</span>
  <span>block2</span>
  <div>block3</div>
  
  .block1 {
    background-color: lightblue;
    width: 100px; // 无效
    height: 500px; //无效
    margin-right: 20px;
    margin-bottom: 20px; // 无法拉开距离
    padding-left: 10px;
    padding-bottom: 10px; // 无法拉开距离
  }
  
  .block2 {
    display: inline-block;
    width: 300px; // 可以起作用
    background-color: lightgray;
  }
  .block3 {
    background-color: red;
  }

  그림은 다음과 같습니다:

border-radius: 999px;

먼저 코드를 살펴보세요.

<div>block1</div>
<div>block2</div>

.block1 {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border-radius: 999px;
}

.block2 {
  width: 200px;
  height: 100px;
  background-color: lightgray;
  border-radius: 50%;
}

먼저 border: 999px를 설정한다는 것은 단지 큰 값을 설정한다는 의미일 뿐입니다. 실제로는 999px를 길게 설정할 필요가 없습니다. 원리를 이해하면 임계값을 찾을 수 있습니다. 두 번째로, border-radius: 999px;를 설정하면 실제로 x 및 Y 방향으로 두 개의 값이 설정되는데, 이는 border-radius: 999px/999px;

border-raidus: 999px;를 설정하면 먼저 직사각형 안에 두 개의 거대한 원을 그리는 것을 상상할 수 있습니다. 이 두 원은 너무 크기 때문에 서로 겹쳐서 문서의 다음 단락에 따르면

은 다음을 의미합니다.

L은 측면 길이이고 S는 border-radius로 설정된 두 방향 값의 합 f = min(L/s)이 1보다 작은 경우 border-radius에 f를 곱하여 줄여야 합니다. 위 코드를 예로 들어 보겠습니다. 최소 변이 100px이고 s가 999px + 999px이므로 f = 100 / (999 + 999)가 1보다 작으므로 border-radius를 얻으려면 border-radius에 f를 곱해야 합니다. :999px; border-radius: 50px; 따라서 block1의 활주로 모양이 됩니다.

border-raidus: 50%;를 설정하면 다음 그림으로 설명이 충분합니다.

요약:

border-radius: 50p x ;동등 테두리 반경: 50px/50px;

通常，50%的radius用的比较多，常用来设置圆形的头像，对一个正方形元素设置border-radius: 50%;即可实现。

当border-radius非常大时，会产生交叠，导致要一起缩小，缩小至最短边的一半。

margin和padding的区别，何时用哪个？

区别：

• 首先，以border为界，margin在border之外，padding在border里。

• 其次，背景色会作用在padding上，不会作用到margin上。

• margin在垂直方向上可能会出现合并的问题（具体可搜索margin坍塌或者外边距合并）

我的用法：

通常情况下，我会这样用：

• 在需要拉开内部元素与父元素的距离时，在父元素上加padding

• 在需要拉开元素和元素之间的距离时，用margin

<div>
  <div>son1</div>
  <div>son2</div>
</div>

.container {
  background-color: lightblue;
  padding: 10px;
}
.son1 {
  margin-bottom: 10px;
  background-color: orange;
}
.son2 {
  background-color: lightgray;
}

위 내용은 CSS의 표시 속성 및 테두리 속성과 관련된 일반적인 문제에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!