minimum

마진 붕괴를 비활성화하는 방법은 무엇입니까? 마진 붕괴를 완전히 비활성화할 수 있는 방법이 있습니까?제가 찾은 유일한 해결책은 ("붕괴 해제"라는 이름으로) 1px 테두리 또는 1px 패딩을 사용하는 것입니다.저는 이것이 용납될 수 없다고 생각합니다. 외부 픽셀은 정당한 이유 없이 계산을 복잡하게 만듭니다.이 마진 붕괴를 비활성화할 수 있는 더 합리적인 방법이 있습니까?마진 붕괴에는 두 가지 주요 유형이 있습니다. 인접 요소 사이의 여백 축소 상위 요소와 하위 요소 사이의 여백 축소 패딩이나 테두리를 사용하면 후자의 경우에만 접히는 것을 방지할 수 있습니다. 또한, 모값의 의 값overflowvisible부모에 적용하면 축소를 방지할 수 있습니다. 서라다, 둘따 둘 다overflow: auto그리고.ov..

CSS에서 "워드-브레이크:브레이크-올"과 "워드-랩:브레이크-워드"의 차이점은 무엇입니까? "word-break: break-all"과 "word-wrap: break-word"의 차이점은 무엇입니까? 둘 다 사용해보니 용기에 맞지 않으면 어기는 것 같았습니다.하지만 왜 W3C는 두 가지 방법을 사용했을까요?word-wrap: break-word에 최에로변경된으로 되었습니다.overflow-wrap: break-word 긴 단어를 다음 줄로 묶습니다. 중간에 끊기지 않도록 여러 단어를 조정합니다. word-break: break-all 연속 단어인지 많은 단어인지에 관계없이 너비 제한의 가장자리에서 구분합니다.(즉, 같은 단어의 문자 내에서도) 동적으로의 스팬이 에는 따서동적로컨얻를고는크정스기많팬은경다..

내용이 넘치는 Flexbox 스크롤 위의 레이아웃을 만들기 위해 사용하는 코드는 다음과 같습니다. .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; } Main header Sidebar Page Header. Content columns are..

배경 이미지를 div에 맞춤 다음 div에 배경 이미지가 있는데 이미지가 잘립니다. 배경 이미지를 잘라내지 않고 보여줄 수 있는 방법이 있습니까?현재 대부분의 브라우저에서 지원되는 속성을 사용하여 이를 수행할 수 있습니다. div 내부에 맞도록 배경 영상의 배율을 조정하는 방법 background-size: contain; 전체 div를 덮도록 배경 영상의 배율을 조정하려면: background-size: cover; JSFidle 예제 또는 실행 가능한 스니펫: #imagecontainer { background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x10..

CSS 상자 섀도 맨 아래만 이 질문에는 이미 다음과 같은 답이 있습니다. 요소의 한 면에만 드롭 섀도를 만드는 방법은 무엇입니까? (18개 답변) 마감됨10년 전에. 어떻게 해야 하나요?나는 내 요소가 그림자 밑줄이 있는 것처럼 보이기를 원합니다.저는 다른 세 면에 그림자를 드리우는 것을 원하지 않습니다.수행할 작업: box-shadow: 0 4px 2px -2px gray; 블러를 (3번째 값)으로 설정하고 스프레드(4번째 값)를 음의 값으로 설정하는 것이 실제로 훨씬 더 간단합니다.두 가지 요소를 사용할 수 있습니다. 하나는 다른 요소 안에 있고 하나는 외부 요소입니다.overflow: hidden그리고 바닥 패딩과 함께 내부 요소와 동일한 폭으로 다른 모든 측면의 그림자가 "잘려지도록" 합니다. ..

CSS의 인라인 SVG CSS에서 인라인 SVG 정의를 사용할 수 있습니까? 내 말은 다음과 같은 것을 의미합니다. .my-class { background-image: ...; } 네, 가능합니다.사용해 보십시오. body { background-image: url("data:image/svg+xml;utf8, "); } http://jsfiddle.net/6WAtQ/ 를 들어, 의 URL과 #는 로대됨으로 됩니다.%23.) 이는 SVG를 지원하는 IE 9에서 작동합니다.데이터 URL은 이전 버전의 IE에서도 작동하지만(제한이 있음) SVG는 기본적으로 지원하지 않습니다.만약 여러분 중에 인라인 SVG를 배경으로 사용하려고 미친 사람이 있다면, 위의 탈출 제안은 제대로 작동하지 않습니다.하나는 IE에서..

고정 위치이지만 용기에 상대적임 나는 수정하려고 노력 중입니다.div따라서 다음을 사용하여 항상 화면 맨 위에 고정됩니다. position: fixed; top: 0px; right: 0px; 하만지그, 그.div중앙 컨테이너 내부에 있습니다.를 할 때position:fixed그것은 그것을 고칩니다.div브라우저의 오른쪽에 있는 것과 같이 브라우저 창에 상대적입니다.대신 용기에 대해 상대적으로 고정해야 합니다. 나는 그것을 알고 있습니다.position:absolute상대적인 요소를 고정하는 데 사용할 수 있습니다.div 요소가 맨 position:fixed. 이를 위한 해킹이나 해결 방법이 있습니까?간단한 대답: 아니요. (이제 CSS 변환으로 가능합니다.)아래 편집 참조) 긴 답변:고정 위치 지정을 ..