CSS 11

LESS-CSS 덮어쓰기 calc() 사용 안 함

LESS-CSS 덮어쓰기 calc() 사용 안 함 이 질문에는 이미 다음과 같은 답변이 있습니다. 레스가 CSS calc() 속성을 컴파일하려고 시도하는 것을 방지하는 방법? (5개 답변) 닫힘6년 전에. 지금 저는 LESS 코드의 CSS3에서 이 작업을 수행하려고 합니다. width: calc(100% - 200px); 그러나 LESS가 컴파일하면 다음을 출력합니다. width: calc(-100%); LESS에게 그런 식으로 컴파일하지 말고 정상적으로 출력하라고 하는 방법이 있습니까?이스케이프된 문자열(일명 이스케이프 값) 사용: width: ~"calc(100% - 200px)"; 또한 탈출된 문자열에 Less math를 혼합해야 하는 경우: width: calc(~"100% - 15rem +" (..

programing 2023.11.05

CSS 변환 사용 후 흐린 텍스트: scale(); Chrome에서

CSS 변환 사용 후 흐린 텍스트: scale(); Chrome에서 최근 Google Chrome에 업데이트가 되어 A/S 후에 흐릿한 텍스트가 발생하는 것 같습니다.transform: scale() 일입니다 구체적으로 제가 하고 있는 일은 @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } 크롬의 http://rourkery.com 을 방문하면 메인 텍스트 영역에 문제가 표시됩니다.이전..

programing 2023.10.21

부트스트랩이 있는 스크롤 가능한 메뉴 - 용기를 확장하지 않아야 할 때 확장하는 메뉴

부트스트랩이 있는 스크롤 가능한 메뉴 - 용기를 확장하지 않아야 할 때 확장하는 메뉴 부트스트랩으로 스크롤 가능한 메뉴를 활성화하기 위해 이 방법(그들의 fiddle)을 시도했지만, 그 방법으로 스크롤 가능한 메뉴는 컨테이너를 확장합니다 -- fiddle -- 스크롤 불가능한 메뉴는 올바르게 실행되지 않습니다. 이거 어떻게 고쳐요?부트스트랩과 호환되는 다른 방법에 대한 제안도 감사드립니다! 참고로 첫 번째 메서드의 fiddle에서 HTML을 참조합니다. My Groups User Administrators Some Other Group My Roles Core Users Admin Some Other Role 그리고 CSS: /* So we wont impact the original bootstrap ..

programing 2023.09.21

위치 절대 + 스크롤

위치 절대 + 스크롤 다음과 같이HTML그리고.CSS .container { position: relative; border: solid 1px red; height: 256px; width: 256px; overflow: auto; } .full-height { position: absolute; top: 0; left: 0; right: 128px; bottom: 0; background: blue; } 이너div원하는 대로 컨테이너의 전체 헤드를 사용합니다.이제 컨테이너에 다른 내용, 흐름, 내용을 추가하면 다음과 같습니다. .container { position: relative; border: solid 1px red; height: 256px; width: 256px; overflow: aut..

programing 2023.09.06

바닥글을 웹 페이지 하단에 유지하려면 어떻게 해야 합니까?

바닥글을 웹 페이지 하단에 유지하려면 어떻게 해야 합니까? 마크업에서 오른쪽과 왼쪽 div를 모두 지울 수 있는 바닥글이 있는 간단한 2열 레이아웃이 있습니다.문제는 모든 브라우저에서 바닥글을 페이지 맨 아래에 유지할 수 없다는 것입니다.내용이 바닥글을 아래로 밀면 작동하지만 항상 그렇지는 않습니다.스티커 바닥글을 가져오는 방법 을 가지다와 함께class="wrapper"당신의 만족을 말씀해주세요. 마감 직전의 시대의wrapper을 배치합니다.. 마감직후의 시대의wrapper을 배치합니다.. * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin..

programing 2023.09.01

여백과 패딩의 차이?

여백과 패딩의 차이? CSS에서 마진과 패딩의 차이는 정확히 무엇입니까?그것은 정말로 별로 쓸모가 없는 것처럼 보입니다.차이점이 어디에 있는지 (그리고 차이점을 아는 것이 왜 중요한지) 예를 들어 주시겠습니까?padding과 용과내사공간다니입이 의 입니다.border에, 면에반에.margin국경 밖의 공간입니다.여기 빠른 구글 검색에서 찾은 이미지가 있습니다. 이 아이디어를 보여줍니다. 여기 답변에 누락된 한 가지 핵심 사항은 다음과 같습니다. 위쪽/아래쪽 여백은 접을 수 있습니다. 따라서 요소의 맨 아래에 20px 여백이 있고 다음 요소의 맨 위에 30px 여백이 있으면 두 요소 사이의 여백은 50px가 아니라 30px가 됩니다.왼쪽/오른쪽 여백 또는 패딩에는 적용되지 않습니다.여백은 요소의 외부에 적..

programing 2023.09.01

Flexbox가 가로 세로 비율을 유지하는 대신 이미지를 확장하는 이유는 무엇입니까?

Flexbox가 가로 세로 비율을 유지하는 대신 이미지를 확장하는 이유는 무엇입니까? Flexbox에는 이미지를 자연 높이까지 확장하는 이러한 동작이 있습니다.즉, 하위 이미지가 있는 Flexbox 컨테이너를 사용하여 해당 이미지의 너비를 조정하면 높이가 전혀 크기 조정되지 않고 이미지가 늘어납니다. div { display: flex; flex-wrap: wrap; } img { width: 50% } Heading Paragraph 원인이 무엇입니까?기지개를 켜는 이유는align-self기본값은 입니다.stretch.세트align-self로.center. align-self: center; 여기에서 설명서 참조: 자체 맞춤주요 속성은align-self: center: .container { displ..

programing 2023.08.17

배경색과 배경색의 차이점은 무엇입니까?

배경색과 배경색의 차이점은 무엇입니까? 다음을 사용하여 배경색을 지정하는 것과 다른 점은 무엇입니까?background그리고.background-color? 스니펫 #1 body { background-color: blue; } 스니펫 #2 body { background: blue; } 그것들이 두 개의 별개의 속성이라고 가정하면, 당신의 구체적인 예에서는 결과에 차이가 없습니다, 왜냐하면 실제로는 의 줄임말이기 때문입니다. background-color background-image background-position background-repeat background-attachment background-clip background-origin background-size 따라서, 이외에, 를 사..

programing 2023.08.07

컨테이너가 넘치는 플렉스 항목의 맨 위로 스크롤할 수 없습니다.

컨테이너가 넘치는 플렉스 항목의 맨 위로 스크롤할 수 없습니다. 플렉스박스를 사용하여 유용한 모달을 만들려다 브라우저 문제로 보이는 것을 발견하고 알려진 수정이나 해결 방법이 있는지 또는 해결 방법에 대한 아이디어가 있는지 궁금합니다. 제가 해결하고자 하는 것은 두 가지 측면이 있습니다.첫 번째, 모달 창을 수직으로 가운데에 배치합니다. 이것은 예상대로 작동합니다.두 번째는 모달 창을 외부로 스크롤하여 전체 모달 창을 스크롤하게 하는 것입니다. 내용이 아니라 전체 모달 창을 스크롤합니다. (이것은 사용자 지정 달력 선택기 등과 같이 모달의 경계 밖으로 확장할 수 있는 드롭다운 및 기타 UI 요소를 가질 수 있습니다.) 그러나 수직 중심을 스크롤 막대와 결합하면 모달의 상단이 오버플로되기 시작하면서 액세스..

programing 2023.08.02