동시에 여러 값 (px & rem)이있는 CSS 요소

하나의 CSS 속성에 여러 요소가있는 CSS 코드가 있습니다.동시에 여러 값 (px & rem)이있는 CSS 요소

예를 들어, 아래 CSS는 아래에 표시된 것과 같은 버튼을 생성합니다.

CSS

.btn-gold { 
    display: block; 
    text-decoration: none; 
    font-size: 20px; 
    font-size: 2rem; 
    line-height: 22px; 
    line-height: 2.2rem; 
    color: #222; 
    padding: 8px 0; 
    padding: 0.8rem 0; 
    text-align: center; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background: rgb(254,196,26); 
    background: -moz-linear-gradient(top, rgb(254,196,26) 0%, rgb(255,170,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,196,26)), color-stop(100%,rgb(255,170,0))); 
    background: -webkit-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%); 
    background: -o-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%); 
    background: -ms-linear-gradient(top, rgb(254,196,26) 0%,rgb(255,170,0) 100%); 
    background: linear-gradient(to bottom, rgb(254,196,26) 0%,rgb(255,170,0) 100%); 
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4); 
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .4); 
}

결과

이제

enter image description here

내가 하나의 속성에 여러 값을 제공 할 목적으로 무엇을 이해하고 있지 않다; 폰트 - 사이즈, 라인 - 높이 및 패딩을 2 개의 값으로한다 ??

font-size: 20px; 
font-size: 2rem; 
line-height: 22px; 
line-height: 2.2rem; 
padding: 8px 0; 
padding: 0.8rem 0;

유효한 CSS이며 단일 속성에 허용되는 값의 조합입니다.

출처

2014-11-09 AAhad

오래된 브라우저에는 대체 기능이 있습니다.

최신 브라우저는 먼저 "22px"행 높이를 적용한 다음이 행을 "2.2rem"행 높이로 덮어 씁니다. 이전 브라우저는 "22 픽셀"을 적용한 다음 "2.2rem"을 인식하지 못하고 사용하지 않습니다.

이 값은 흔히 선형 값의 배경 값 또는 배경과 함께 사용됩니다.

추 신 : box-shadow 또는 border-radius에 대한 접두사는 더 이상 필요하지 않습니다.)

출처

2014-11-09 15:06:34 EmmanuelB

PX 절대 길이 이다 (cm, mm, PT, PC PX)에 그리고

렘 폰트 기준 길이 (EM, 전 편, REM)

인 px 또는 rem 중 하나가 브라우저에서 실행됩니다. Chrome의 요소를 열어보고 하나의 값만 표시합니다. 대시 라인이있는 다른 거부를 허용합니다.

출처

2014-11-09 15:08:25

동시에 여러 값 (px & rem)이있는 CSS 요소

답변

관련 문제