부동 소수점 및 인라인 블록에 대해 자세히 알아보기

이 글은 주로 float과 inline-block에 대한 심층적인 이해를 소개하고, 호환성과 상위 요소에 미치는 영향 측면에서 분석하여 친구들에게 참고용으로 추천합니다

최근에는 일이 비교적 여유로워서 나만의 캔버스 라이브러리를 작성하고 있는데, 블로그를 쓸 만한 지식이 없어서 2개월 동안 정체되어 있습니다. 오늘은 CSS 블로그 포스팅을 하나 작성하기로 했는데요, 최근 프로젝트 인터페이스를 작성하던 중 우연히 이 두 사람을 만났습니다... 그럼 모두와 어느 정도 깊이 있게 이해해 보도록 하겠습니다
우선 호환성

float를 사용하면 모든 브라우저와 호환되는지 걱정할 필요가 없습니다. 아주 오래된 속성입니다. >

inline-block은 IE8 이상(8 포함)에서만 사용할 수 있음을 확인했습니다. 사실 IE5.5에는 이미 inline-block이 있지만 구현이 다르므로 호환을 원하는 경우. 낮은 버전의 IE에서는 추가 코드만 사용할 수 있습니다.

코드는 다음과 같습니다.

display:inline; 🎜>zoom:1; // hasLayout을 실행하는 데 사용되며, 심층적인 이해에 관심이 있는 원숭이는 스스로 학습할 수 있습니다.

두 번째는 상위 요소에 미치는 영향

인라인 블록에 대해 말할 것이 없습니다. 유일한 점은 인라인 블록이 설정된 모든 요소에 직접 간격이 있다는 것입니다. 이를 상위 요소에 추가할 수 있습니다.

은 다음과 같습니다.

font-size
: 0; 이를 제거하려면 결과는 다들 알지만 저는 여전히 이것이라고 생각합니다. 물론 가장 간단하고 폭력적인 방법도 있습니다.

float를 직접 찾아보세요. 이 속성이 설정된 요소는 텍스트 흐름에서 벗어나게 됩니다.

position

과 동일:absolute는 동일하지만 이 속성이 설정된 요소에서는 동일하지 않습니다. 따라서 문제는 상위 요소가 하위 요소의 크기에 따라 길이와 너비를 변경하지 않는다는 것입니다. 요소인데 상위 요소가 인라인 블록으로 설정된 경우 하위 요소에 따라 길이와 너비가 변경됩니다. (브라우저가 인라인 블록과 호환된다면 호환된다면 인라인 블록을 직접 사용하겠습니다~ ). 따라서 상위 요소에 대해 inline-block 속성을 설정하지 마십시오. 때로는 마지막 부동 요소 다음에

부동 요소를 삭제

해야 합니다.

clear

: 둘 다(원칙은 아마도 텍스트 흐름이 있는 요소를 사용하는 것임) 부모 요소의 높이가 부동 요소에 따라 변경되도록 합니다

마지막으로 다른 작은 차이점이 있습니다

기준선: float 및 inline-block

float의 기준선은 부동 요소가 플로팅 요소에 가깝다는 것입니다. top.

inline-block의 기준선은 기본 기준선이므로 더 유연하고

vertical-align

과 함께 사용할 수 있습니다. 마지막으로... , 저는 inline-block을 더 선호합니다. float가 사용되는 대부분의 장소는 inline-block으로 대체될 수 있습니다. Float는 요소를 둘러싸는 유일한 방법입니다.

위 내용은 부동 소수점 및 인라인 블록에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!