CSS 크기(%)

Guanhui
풀어 주다: 2020-05-23 11:04:31
앞으로
3205명이 탐색했습니다.

CSS 크기(%)

CSS 단위

절대 단위

인치

cm;

pt-파운드

상대 단위

em-요소 글꼴 크기 후크 포함;

rem - 루트 요소의 글꼴 크기에 연결됨

px - CSS 픽셀에 연결됨

% - 다른 속성 값의 백분율

CSS에서 백분율을 차지할 수 있는 속성

위치 지정: top, 오른쪽, 아래쪽, 왼쪽

상자 모델: 너비, 높이, 여백, 패딩

배경: backgroug-position, backgroud-size

Text: text-indent

Font: 글꼴 크기

백분율 계산 방법

퍼센트 계산은 현재 요소의 포함 블록을 기준으로 기준을 기준으로 합니다.

포함 블록의 너비를 기준으로 계산된 속성: margin, padding, width, max-width,min-width, left, right, text-indent.

포함 블록의 높이를 기준으로 계산된 속성: top, Bottom, height, max-height, min-height

현재 글꼴 크기를 기준으로 계산된 속성: line-height

line-height를 기준으로 계산된 속성: Vertical-align

요소 자체의 너비와 높이를 기준으로 : background-position: 배경 이미지의 위치로, 가로 방향과 세로 방향 각각 2개의 값을 설정합니다. 백분율을 사용하면 해당 요소와 이미지 모두에 백분율 값이 적용됩니다. 예를 들어 50% 50%는 사진의 (50%, 50%) 지점을 프레임의 (50%, 50%) 지점과 정렬하며 이는 중앙 중심을 설정하는 것과 같습니다. 마찬가지로 0% 0%는 왼쪽 상단과 동일하고 100% 100%는 오른쪽 하단과 동일합니다

요소 자체의 너비를 기준으로: background-size이지만 이 값은 블록 요소에만 적용할 수 있습니다. 설정된 백분율 값은 배경 이미지를 사용합니다. 크기는 요소 너비의 백분율을 기준으로 계산됩니다. 권장 튜토리얼: "

CSS Tutorial

"

위 내용은 CSS 크기(%)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:juejin.im
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿