찾다

집  >  Q&A  >  본문

javascript - rem을 사용한 후 요소 사이의 간격이 너무 커지면 어떻게 해야 합니까?

모바일 페이지 적응형 솔루션—rem 레이아웃

실례합니다. p 태그와 입력 태그 사이의 거리가 왜 그렇게 큰가요?

PS. <!DOCTYPE html>제거해도 문제 없습니다. 왜 그럴까요?

으아악
给我你的怀抱给我你的怀抱2706일 전1038

모든 응답(7)나는 대답할 것이다

  • 阿神

    阿神2017-06-30 10:01:24

    input元素是行内块元素，所以它所在的行会形成一个行框。然后行框的高度是和line-height属性相关的，line-height에 대한 설명은 다음과 같기 때문입니다.

    내용이 인라인 레벨 요소로 구성된 블록 컨테이너 요소에서 'line-height'는 요소 내 라인 상자의 최소 높이를 지정합니다. 최소 높이는 기준선 위의 최소 높이와 그 아래의 최소 깊이로 구성됩니다. , 각 줄 상자는 요소의 글꼴 및 줄 높이 속성이 있는 너비가 0인 인라인 상자로 시작하는 것과 같습니다. 우리는 해당 가상 상자를 "스트럿"이라고 부릅니다.

    속성 정렬 요소를 사용한 다음 모든 상자의 가장 높은 위쪽 테두리와 가장 낮은 아래쪽 테두리를 가져옵니다. 가장 높은 위쪽 테두리와 가장 낮은 아래쪽 테두리 사이의 높이가 실제 줄 높이를 구성합니다.

    line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-align그럼 사양에서는 블록 요소의 글꼴 크기와 줄 높이를 갖는 가상의 너비가 0인 요소인

    요소가 최종 실제 줄 높이에 참여하도록 어떻게 보장합니까?

    line-height定义的是行的最小高度的呢？
    其实，参与行框形成的元素，除了这些实际存在的行内元素，还存在一个strut이제 이 문제를 살펴보겠습니다.

    페이지를 실행한 후 font-size 속성이 html 요소에 추가됩니다. 이 크기가 무엇과 관련되어 있는지는 알 수 없습니다. font-size: 50px;라는 코드를 실행합니다. 다음은 font-size: 50px;로 설명됩니다.

    font-size 속성은 상속 가능하므로 p 요소의 font-size도 50px입니다. 높이의 기본값은 표준입니다. 사양에서 권장하는 일반 값은 글꼴 크기의 1.0에서 1.2 사이입니다. 여기서는 1.0이 사용된다고 가정합니다. 블록 레벨 요소인 p 요소는 라인 상자를 생성하지 않으며 라인 높이와 관련이 없습니다.
    두 번째 요소는 입력 요소이고, 입력 요소는 인라인에 의해 생성된 인라인 블록 요소입니다. 블록 요소는 요소의 상단 외부 경계에서 하단 외부 경계까지(상단 경계에서 하단 경계까지의 여백)이고, 가상 요소 strut는 높이가 < code>font-size * line-height = 50px * 1 = 50px입니다. 두 개의 인라인 상자가 기준선 정렬 방식으로 정렬된 다음 두 인라인 상자의 가장 높은 상한 경계와 가장 낮은 하한 경계가 정렬됩니다. 최종 라인 박스로 간주됩니다. 입력 요소에 의해 생성된 인라인 상자가 50px보다 훨씬 작기 때문에 최종 결과는 strut의 상한 및 하한 경계여야 하므로 라인 상자는 50px가 되어 "소위" 중간에 있는 공백의 큰 부분. font-size属性，没有具体看这个大小和什么相关，我运行代码以后的结果是font-size: 50px;，下面以font-size: 50px;来进行说明。
    因为font-size属性是可以继承的，所以你的p元素的font-size也是50px；因为line-height的默认值是normal，规范推荐的normal值是字体大小的1.0到1.2之间，和浏览器实现有关，我们这里假设用的1.0；
    第一个元素是p元素，是块级元素，不会生成行框，和line-height没有关系；
    第二个元素是input元素，input元素是行内块元素，行内块元素生成的行内框是元素上外边界到下外边界（margin的上边界到下边界），然后strut这个假想元素生成了一个高为font-size * line-height = 50px * 1 = 50px的行内框，这两个行内框按照基线对齐的方式进行排列，然后取这两个行内框的最高上边界和最低下边界就是最后的行框。因为input元素生成的行内框远远没有50px，所以最后取得应该是strut

    요약하자면 입력 요소가 블록 수준 요소이고 블록 수준 요소가 라인 상자를 포함하지 않도록 p的font-size: 0px;这样假想的strut元素形成的行内框就不会高于input元素生成的行内框了。
    或者设置input元素display: block;을 설정할 수 있습니다.

    업데이트1:
    문서가 표준 모드에서 실행 중임을 나타내는 <!DOCTYPE html>문이 있습니다. 제거한 후에는 호환 모드에서 실행됩니다. 표준 모드는 표준 사양을 따르지만 반드시 호환 모드는 아닙니다. 같은.

    회신하다
    0
  • 滿天的星座

    滿天的星座2017-06-30 10:01:24

    루트 글꼴 설정

    회신하다
    0
  • 欧阳克

    欧阳克2017-06-30 10:01:24

    p 태그에는 위쪽 및 아래쪽 여백이 제공됩니다

    회신하다
    0
  • ringa_lee

    ringa_lee2017-06-30 10:01:24

    CSS를 재설정할 수 있는 방법이 있나요? 재설정해 보세요

    회신하다
    0
  • 欧阳克

    欧阳克2017-06-30 10:01:24

    JS에 문제가 있나요?

    파싱된 페이지에 따르면 루트 디렉터리의 글꼴 크기는 100px, 일반적으로 16px입니다

    회신하다
    0
  • 代言

    代言2017-06-30 10:01:24

    우선 p 태그에는 여백 입력{vertical-align: top;}

    이 포함되어 있습니다.

    회신하다
    0
  • 大家讲道理

    大家讲道理2017-06-30 10:01:24

    실제로는 상위 요소의 글꼴 크기와 관련이 있습니다. 해결 방법은 상위 요소의 글꼴 크기를 설정하거나 높이를 설정하는 것입니다. -투표된 답변은 매우 상세합니다

    회신하다
    0
  • 취소회신하다