최신 웹 개발자 도구 (예 : Chrome/FF/IE)는 특정 요소의 "상자 모델"및 "계산 된 CSS 속성"을 볼 수있는 방법을 제공합니다. 하나;브라우저 개발자 도구 : HTML 요소의 위치는 무엇입니까?
최종 이러한 도구로 계산/배치 위치를 쉽게 모니터링 할 수 있습니까?
하지만 부모 컨테이너 내에도 적합하다. 앞서 언급 한 [Windows] 브라우저를 사용하는 것이 좋지만 Chrome을 선호합니다.
는, 당신은 입력하여 콘솔 창에이 요소에 액세스 할 수 있습니다
$0
그런 다음 쿼리하고 Javascript DOM API를 사용하여 조작 할 수 있습니다, 이것은 매우 유용한 방법 인 Element.getBoundingClientRect()을 가지고 있습니다.
$0.getBoundingClientRect()
을하고 브라우저는 다음과 같은 객체를 반환합니다 : 요소를 선택하면
그래서 당신이해야 할 콘솔 창에 다음을 입력한다
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
Chrome 개발자 도구 -> 설정 -> 일반 -> 요소 -> 눈금자 표시.
더 많은 기능을 제공하는 Chrome 플러그인을 설치할 수도 있습니다. 요소를 선택하면 크롬, 파이어 폭스, 에지 및 IE11 +에서
통치자는 상당히 정교하지만 정확하거나 충분히 동적이지 않습니다. 나는 현재의 "Box Model"디스플레이와 같이 페이지 리플 로우 동안 동적으로 변하는 값에 주목하고 싶다. 플러그인의 경우 권장 사항이 있습니까? 조회 한 소수의 사이트는 일반적인 사이트 개발 및 문제 식별에보다 중점을 둔 것처럼 보였습니다. – user2864740
기본 통치자 외에는 아무 것도 필요하지 않기 때문에 플러그인에 대한 교육을받지 않은 것이 좋습니다. 꽤 많은 사람들이 밖에있는 것처럼 보이고 기능이 필요한 것 가까이에있는 것처럼 보입니다. – dwilson
이 $ 0은 새로운 것 같습니다. - 매우 멋지다! – user2864740