CSS는 width:auto 사용 예제 공유에 대해 깊이 이해하고 있습니다.

이 글은 CSS에서 width:auto의 사용법에 대한 깊은 이해를 돕기 위해 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

머리말

제 지난 글을 읽으시는 분들은 제가 무슨 소란을 피우고 있다고 생각할 수도 있겠네요. CSS2의 장점은 무엇일까요? 그런 다음 "CSS World"라는 책을 참조하여 모든 사람과 함께 구체적인 요점과 코드에 미치는 영향을 검토하고 이해하겠습니다.

우선 너비의 기본값이 auto라는 점을 알아야 합니다. 따라서 너비를 자동으로 제어하는 ​​코드를 수동으로 작성할 필요가 없습니다.

네 가지 일반적인 너비 표현

사용 가능한 공간을 최대한 활용하세요

기본 블록 요소는 모두 상위 요소 너비의 100%이지만 많은 사람들은 블록에 추가 너비를 100으로 씁니다. 요소 %.

축소 및 포장

일반적인 요소로는 플로팅, 인라인 블록 요소 및 절대 위치 지정이 있습니다. 우리는 이것을 속성 캡슐화라고 부릅니다.

최소로 축소

이는 테이블 레이아웃이 자동으로 설정된 테이블에 나타날 가능성이 높습니다. 테이블 셀의 너비와 높이를 제어하지 않으면 각 열이 맞지 않을 때 텍스트가 잘립니다. 단, 휴대폰 번호, 영문 단어, 숫자 등은 깨뜨릴 수 없으므로 일부 열은 텍스트로만 표시될 수 있으며 각 단어는 min-content라고 하는 새 줄에 표시됩니다.

컨테이너 너비를 초과합니다

다음 두 가지 상황이 발생하지 않는 한 일반적인 요소는 컨테이너 너머에 표시되지 않습니다. 특히 첫 번째 상황은 주니어 프런트 엔드 개발에서 자주 발생하는 문제입니다.

1. 내용이 영어나 숫자로 나타날 경우 줄 바꿈 없이 표시됩니다.

2. white-space:nowrap 스타일이 설정되어 줄 바꿈이 없습니다.

위의 두 가지 문제에 대해 각각 다음과 같이 수정하면 됩니다. ㅋㅋㅋ default 는 상위 요소의 너비를 상속하며 상위 요소의 너비를 초과하지 않습니다. 그러나 일부 사람들은 여전히 ​​다음과 같은 코드를 작성합니다.

1. a{
   display:block;
   width:100%;
   }

   또는 이와 같은 코드를 사용하면 탐색에서 a 레이블에 대해 간격 너비 또는 이와 유사한 것을 설정합니다. 실제로 레이블이 블록 수준이 된 후에는 그렇게 됩니다. 계산에 따라 자동으로 너비가 필요하지 않습니다.

2. .nav{
   width:240px}
   .nav-a{
   display:block;
   width:200px;
   margin:0 10px;
   padding:9px 10px ;}

Formatted width

Formatted width는 절대 위치 결정과 고정 위치를 포함한 절대 위치 결정 모델을 말하지만 둘의 기준점은 다릅니다. 기본적으로 해당 속성은 포함되며 상자 너비는 콘텐츠 너비에 따라 결정되지만 (비교체 요소) 왼쪽/오른쪽이 동시에 설정되면 위치 지정 속성이 다음과 같은 가장 가까운 조상 요소를 기준으로 너비가 계산됩니다. 정적이 아닙니다. 너비는 왼쪽-오른쪽 상위 요소의 너비가 되지만 다른 속성은 변경되지 않습니다. 제가 공유한 실용적인 CSS 기술에 가변 너비와 솔리드 너비를 결합한 레이아웃 등 실제 레이아웃에서 매우 유용하게 사용됩니다.

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

내부 크기 및 유동적 특성

Inclusion

Inclusion은 요소가 비블록 요소일 때 너비가 콘텐츠에 따라 결정되며 필요한 경우에만 확장할 책임이 있음을 의미합니다. 그리고 외부는 블록 요소여야 하므로 컨테이너 속성을 초과하지 않습니다.

실제 효과는 가로 중앙에 더 적은 양의 텍스트를 배치하고 스크립팅 없이 왼쪽에 더 많은 텍스트를 표시할 수 있다는 것입니다.

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

선호되는 최소 너비

이 간단한 이해는 요소의 실제 너비는 콘텐츠의 가장 작은 단위에 따라 달라지며 이 우선순위는 너비:0보다 높다는 것입니다. 예를 들어 너비를 0으로 설정했지만 내용에 한자가 포함된 경우 한자 크기로 표시되고, 단어인 경우 단어 크기로 표시됩니다.

이러한 실용적인 사용을 위해 오목, 볼록 모양 등 다양하고 간단한 그래픽을 만든 다음 내용을 흰색으로 설정하면 됩니다.

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}

최대 너비최대 너비는 요소가 가질 수 있는 최대 너비입니다. 일반적으로 텍스트를 제한하거나 내용이 많을 때 사용합니다. 이와 같은 실제 시나리오는 많지 않습니다.

여기에서는 두 가지 스크롤 효과만 확장합니다. 하나는 기본 페이지 또는 돔 스크롤이고, 다른 하나는 내부 요소와 iscroll과 같은 컨테이너 간의 위치 관계를 설정하여 표시되며 이는 더 나은 효과를 갖습니다.

관련 권장 사항;

HTML5에서 여백 0 자동을 사용하여 로딩 후 재생을 시작하도록 autoplay 속성을 설정하거나 반환하는 방법

Laravel에서 자동 로드 메서드 사용에 대한 자세한 설명

위 내용은 CSS는 width:auto 사용 예제 공유에 대해 깊이 이해하고 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!