css 성배 레이아웃과 쌍날개 레이아웃 편
제목 요구: 다음과 같은 DOM 구조에 맞추어 CSS를 작성하여 세 개의 칸의 수평 레이아웃을 실현한다. 그 중에서 left,right는 각각 좌우 양측에 위치하고 left의 폭은 200px,right의 폭은 300px,main은 중간에 위치하며 폭은 스스로 적응한다.요구사항: 추가 DOM 노드를 허용하지만 기존 노드 순서는 수정할 수 없습니다.main left right 성배 포석과 양날개 포석은 모두 3열 좌우 난간에 고정된 중간 난간 테두리에 적응하는 웹 페이지 포석을 겨냥한 것이다(성배가 주체라고 생각하면 두 개의 귀를 더하고 새는 몸에 한 쌍의 날개를 더한 것이다). 성배 포석은 Kevin Cornell이 2006년에 제기한 포석 모델 개념이다.국내에서 최초로 타오바오 UED의 엔지니어(전설은 옥백)가 개선하고 전파했다. 중국에서도 쌍날개 포석이라고 불렸는데 그의 포석 요구는 몇 가지가 있다. 그것이 바로 3열 포석, 중간 넓이가 스스로 적응하고 양쪽 넓이가 정해지는 것이다.중간 표시줄은 브라우저에서 렌더링을 우선적으로 보여야 합니다.임의의 열의 높이를 가장 높게 허용하기;우리 제목의 요구는 성배 포석과 양날개 포석의 요구와 같다는 것을 알 수 있다.다음은 구체적인 실현 방법을 살펴보자.방법1: 성배 배치 1.기본 스타일을 설정하여 높이가 일치하도록 left main right에min-height: 130px를 추가합니다.2. 성배 레이아웃은 상대적인 레이아웃이다. 먼저 부원소container의 위치를 설정한다. 실현 효과는 좌우로 각각 200px와 300px 구역을 비우는 것이다. 효과는 그림과 같다.주체 부분의 세 개의 하위 요소를 모두 왼쪽 부동으로 설정하면 다음과 같은 상황이 발생한다. 어떡하지? 서두르지 말고 천천히 해라.main 너비를 width:100% 로 설정하여 한 줄을 채우십시오.left와 right 마이너스의 바깥쪽 거리를 설정하는 것은 left,main,right를 순서대로 나란히 하는 것이 목표입니다. 그러나 위의 그림에서 left와 right는 모두 다음 줄에 있습니다. 여기서 기교는 마이너스 margin-left를 사용하는 것입니다. 마이너스 margin-left는 문서를 따라 원소를 왼쪽으로 이동시키고 마이너스 수치가 비교적 크면 이전 줄로 이동합니다.마이너스 margin의 응용도 넓고 심오하기 때문에 여기서는 분명히 상세하게 소개할 수 없을 것이다.left 부분의 Margin-left를 -100%로 설정하면 left가 왼쪽으로 전체 줄의 폭을 이동할 수 있습니다. left 왼쪽은 부모 요소의 테두리이기 때문에 left는 계속 윗줄에서 왼쪽으로 이동하여 윗줄의 시작까지 이동하고main 부분을 덮어씁니다. (아래 그림을 자세히 살펴보면main 안의 글자'main'이 보이지 않습니다. left에 가려져 있기 때문입니다)ft를 위로 옮긴 후 라이트는 이전 줄의 시작 위치에 있습니다. 이 때 라이트 부분의 margin-left를 마이너스로 설정하면 라이트는 왼쪽 줄의 끝으로 이동합니다.6. 다음은 레프트와 라이트를 각각 이 두 개의 유백으로 옮기면 된다.상대적 위치 이동left와right 부분을 사용할 수 있습니다.이로써 우리는 3열 가운데 스스로 적응하는 포석, 즉 전설의 성배 포석을 완성했다.전체 코드는 다음과 같습니다.
main
left
right
방법2: 양쪽 날개 포석 성배 포석과 양쪽 날개 포석으로 문제를 해결하는 방안은 앞의 절반이 같다. 즉, 세 개의 난간이 모두float에 떠있지만 좌우 두 개의 난간에 마이너스margin을 더하여 중간 난간div와 나란히 서서 세 개의 난간 포석을 형성한다.서로 다른 것은'중간 난간div 내용이 가려지지 않는다'는 문제를 해결하는 사고방식이 다르다.그의 HTML 구조에 변화가 생겼다. 바로 코드를 붙이면 독자가 그들의 공통점과 차이점을 스스로 이해할 수 있다.https://codepen.io/guokangxun/pen/GBqGgL
main
left
right
쌍날개 레이아웃은 성배 레이아웃보다 1개div를 더 사용하여,대략 4개의 css 속성을 사용하지 않습니다(성배 레이아웃 container의padding-left와padding-right 두 가지 속성을 더하고 좌우 두 개의div는 상대적인 레이아웃position:relative와 대응하는right와left 모두 4개의 속성을 사용한다. 반면에 쌍날개 레이아웃자div는margin-left와margin-right로 모두 2개의 속성을 사용하는데 성배 레이아웃보다 사고방식이 더욱 직접적이고 간결하다. 간단하게 말하면 쌍날개 레이아웃이 성배 레이아웃보다 더 창의적이다.div를 만들었지만 상대적으로 배치할 필요가 없습니다.성배 레이아웃과 쌍날개 레이아웃에 대해 더 알고 싶으면 참조: 성배 레이아웃과 쌍날개 레이아웃의 작용과 차이점 CSS 레이아웃 - 성배 레이아웃 & 쌍날개 레이아웃 방법 3: Flex 레이아웃 Flex는 Flexible Box의 줄임말로'탄성 레이아웃'이라는 뜻으로 상자 모형에 최대의 유연성을 제공한다.모든 용기를 Flex 레이아웃으로 지정할 수 있기 때문에 Flex 레이아웃은 미래 레이아웃의 최선의 방안이 될 것입니다.Flex 레이아웃의 구체적인 문법 실현에 대해 완일봉 대신의 Flex 레이아웃 교정: 문법편,JailBreak 님께서 플렉스 레이아웃을 위해 데모를 제작하셨는데 참고할 수 있습니다.Flex 레이아웃의 구체적인 실례를 알고 싶으면 완일봉 대신의 Flex 레이아웃 강좌: 실례편,Flex 레이아웃 실례를 직접 보려면 코드pen에서 데모를 직접 볼 수 있습니다.다음은 이 실례의 구체적인 실현에 대해 이야기하자.먼저 컨테이너 블록을 하나의 Flex 용기로 설정하면 컨테이너 산하의main,left,right 세 개의 하위 요소는 자동으로 용기 구성원이 된다. 이를 Flex 프로젝트(flex item)라고 부른다. 줄여서'프로젝트'라고 한다. 2.이 세 항목에 대해 초기 설정을 하고 내용에 따라 탄력적으로 레이아웃한다. 3.order 속성 설정의 배열 순서를 통해 세 항목의 정렬 방식이 다르다는 것을 알 수 있다.main은 첫 번째에 있고main을 중간에 두어야 한다.left는 왼쪽에 있고 Flex 용기 아래의 항목의 속성'order'속성을 통해 설정할 수 있다.order 속성에 대해 정의항목의 배열 순서는 작을수록 앞에 있고 기본값은 0이다.４.프로젝트 속성flex-grow를 통해main의 확대비율을 설정하고 남은 공간을main으로 채워 세 항목이 한 줄에 미만하도록 한다.기본값은 0입니다. 즉, 남은 공간을 처리하지 않습니다.5. 프로젝트 속성flex-basis를 통해left와right의 고정폭을 설정하면 우리의 목표를 실현할 수 있습니다. 간단하지 않습니까?이것이 바로 flex 포석의 매력...6. 마지막으로 전체 코드는 다음과 같습니다.
flexbox
main
left
right
방법4: 절대 포지셔닝 레이아웃 절대 포지셔닝은 요소의 위치가 문서 흐름과 무관하기 때문에 공간을 차지하지 않는다.이 점은 상대적 포지셔닝과 달리 상대적 포지셔닝은 실제적으로 일반 흐름 포지셔닝 모델의 일부로 간주된다. 왜냐하면 원소의 위치가 일반 흐름의 위치에 비해 다르기 때문이다.팁: 절대 위치의 상자는 문서 흐름과 무관하기 때문에 페이지의 다른 요소를 덮어쓸 수 있습니다.z-index 속성을 설정하여 이 상자의 퇴적 순서를 제어할 수 있습니다.본론으로 돌아가자면 절대 포지셔닝은 만금유와 같은 존재이다. 어떤 포석이든 절대 포지셔닝을 사용하면 실현할 수 있기 때문에 구체적인 실현 과정에 대해 군말하지 않고 다음에 코드를 직접 올리고 모르는 콜을 받는다.
position
main
left
right
실현 결과는 당연히 같다!(끝)
전재 대상:https://www.cnblogs.com/kevoin/p/9327877.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
