CSS 적용 %에 관하여

Question

%는 CSS 언어 사용에 대한 참조가 무엇인지 궁금합니다. 이 과정을 이해하는 데 2 ​​가지 질문이 있습니다.

다른 장치 해상도에 대한 값을 변경해야하는 이유 (예 : 화면의 중간에 요소를 맞추려면 왜 margin-top: 50%;을 사용하면 좋을까요?) 모든 경우)?

어린이에게 % (예 : position relative 및프로세스와 같은)을 적용 할 때 용기를 참조 할 수있는 방법이 있습니까?

Answer 1

응답 :

1. % 값 상위의 폭을 기준이고; 1024 x 768의 경우 margin-top: 50%;은 위에서 512를 의미하고, margin-top: 50%;의 경우 800 x 600은 위에서 400을 의미합니다. 다른 해상도와는 분명히 다릅니다.

2. %는 무엇입니까? 높이 또는 widht? width의 경우는 벌써 부모 (컨테이너)를 참조하고있는 그 높이면 자바 스크립트를 사용할 수 있습니다.

Answer 2

CSS의 % 값에 대한 흥미로운 점은 전체적으로 상위 요소에 상대적이라는 것입니다. 그것을 이런 식으로 생각 :

HTML을

<div id="container"> 
    <div id="content">Hello</div> 
</div> 

#container 요소는 우리가 할 부모 요소를 가정 할 수있다 참조 50 %의 폭을해야합니다

#container, #content { width: 50%; } 

CSS body 태그는 부모 요소를 명시 적으로 명시하지 않았으므로 이 컨테이너는 브라우저 창의 너비의 50 %입니다. 한편 #container 안에있는 #content의 너비는 이미 브라우저 너비의 50 % 인 부모 요소 (#container)의 너비가 50 %입니다. 따라서 브라우저 전체에 비해 #content의 전체 너비는 25 % (50 % 중 50 %)입니다.

CSS에서 백분율의 픽셀 값을 알고 싶다면 ... 을 사용할 수 없습니다. 이 값을 백분율 형식으로 결정하려면 Javascript를 사용해야합니다. 이것은 모두 나쁜 것은 아니지만 Javascript를 통해 스타일을 적용하는 것이 실제 사례가 아니라는 것을 이해해야합니다. 이것은 CSS 클래스를 생성 한 다음 자바 클래스를 사용하여 클래스를 추가하거나 제거하여 스타일을 변경하는 방식으로 수행되어야합니다. 그러나 그 픽셀 값을 가지고 있고 그에 따라 CSS 스타일을 변경하지 않으려는 경우 방금 언급 한 내용이 중요하지 않습니다. 숫자는 하루가 끝날 때의 숫자이지만, CSS의 포인트는 절대로 산술을 수행하지 않았습니다. 원래 브라우저에서 정의한 스타일을 상속 한 HTML 요소에 스타일을 적용하는 쉬운 방법이었습니다. Javascript는 프런트 엔드의 데이터를 분석하고 웹 사이트에 동적 인 존재감을 부여하는 방법으로 개발되었습니다. CSS는 실제로이 목적을 위해 만들어진 적이 없었으며 오늘날의 코딩 표준에 부합합니다.