재미있는 CSS 마술과 레이아웃(코드)

이 기사에서 제공하는 내용은 흥미로운 CSS 마술과 레이아웃(코드)에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

머리말: 레이아웃과 스타일은 모든 프런트엔드에 필수 과정입니다. 일상 작업에서 일부 특정 장면의 레이아웃 요구 사항에 직면하게 되므로 스타일을 일치시키면 몇 가지 마법 같은 효과를 얻을 수 있습니다. 일상적인 개발에서 접하는 레이아웃과 우연히 주요 웹사이트를 탐색하다가 발견한 마법 같은 특수효과 작성 방법을 모아서 여기에 공유하고 싶습니다.

공간상의 문제로 2개의 글로 나누어서 작성하겠습니다. 오늘은 먼저 흥미롭고 실용적인 레이아웃 작성 방법을 소개하겠습니다. 다음 기사에서는 스타일의 마법을 보여줄 것입니다.

지연 로딩 자리 표시자 이미지 적응형

몰에 제품 이미지를 표시할 때 이미지가 많으면 더 나은 경험은 다음과 같습니다. 페이지가 흔들리지 않도록 자리 표시자 이미지가 먼저 있을 것입니다. -이미지의 지연 로딩 효과라고 합니다. 하지만 적응할 때, 특히 휴대폰의 가로 화면과 세로 화면을 전환할 때 골치 아픈 문제입니다. JavaScript를 통해 계산할 경우 Jitter가 발생할 수 있습니다.

JS 대신 CSS를 사용하는 원칙에 따라 다음과 같은 솔루션이 있습니다.

<div>
    <img  alt="재미있는 CSS 마술과 레이아웃(코드)" >
</div>

.img-ratio {
    width: 100%;
    position: relative;
    padding-top: 75%;
}

.img-ratio > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

UI가 4:3 자리 표시자 이미지를 제공하는 한 다양한 화면에 적용할 수 있습니다. 아래 사진은 너비와 높이가 다르지만 비율이 동일한 두 장의 사진을 보여 주며, 둘 다 완벽하게 중앙에 배치될 수 있습니다.

원칙은 다음과 같습니다.

• 컨테이너의 너비와 너비 대 높이 비율에 따라 컨테이너의 실제 크기를 자동으로 계산하고 컨테이너에 있는 img와 같은 하위 요소를 허용합니다. 너비와 높이에 맞게 조정하십시오.
• 이미지 상위 컨테이너의 너비는 100%이고 상위 컨테이너의 높이 비율은 100 * 3 / 4 = 75%입니다.
• 이미지는 절대적이며 상위 컨테이너를 완전히 채웁니다.

모바일의 가로 스크롤 막대

모바일 인터페이스, 모든 인치가 소중합니다. 때로는 화면의 스크롤 길이를 제어하기 위해 일부 모듈이 가로로 배열됩니다. 그러나 가로로 배열하면 몇 가지 레이아웃 문제가 발생합니다.

예를 들어 모바일 단말기의 스크롤바 스타일은 모바일 브라우저에 따라 다르며 다릅니다. 한 가지 해결책은 스크롤 축을 숨기는 것이지만 overflow-x:hidden; 숨기는 것은 아닙니다. 그렇지 않으면 스크롤할 수 없습니다. 그런 다음 가장 오른쪽 블록의 일부가 노출되도록 각 가로 블록의 너비를 계산하여 사용자가 오른쪽 화면 외부에 콘텐츠가 있고 가로로 슬라이드할 수 있음을 알 수 있도록 합니다.

그리고 가로 스크롤의 너비를 알 수 없는 경우에는 비즈니스 요구에 따라 가로 모듈의 개수가 변경될 수 있으므로 가로 배열에 float를 사용할 수 없습니다. 플로팅을 사용하기 때문에 플로팅이 랩되지 않도록 전체 가로 스크롤의 너비를 알아야 합니다.

그래서 다음과 같은 작성 방법이 있습니다:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

.wrapper {
    width: 340px;
    height: 80px;
    overflow: hidden;
}

.wrapper ul {
    height: 96px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}

아이디어는 다음과 같습니다: ul은 공백:nowrap;을 설정하고, li는 디스플레이:inline-block;을 설정합니다. 가장 바깥쪽 p는 높이 차이를 사용하여 가로 스크롤 막대를 숨깁니다.

상단 내비게이션은 가변 너비로 중앙에 표시됩니다.

일부 공식 웹사이트에는 상단 내비게이션 바가 있는데, 내비게이션 바의 콘텐츠 영역을 중앙에 표시하고 공백을 남겨두는 경우가 많습니다. 상단과 본문 내용을 구분하기 위해 탐색 모음 아래에 루트 선이나 그림자가 있을 수 있습니다.

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

상대 위치 지정과 결합하여 중앙에 떠 있는 방식입니다.

바닥글은 하단에 배치됩니다

페이지의 주요 콘텐츠 영역의 높이가 충분하지 않은 경우에도 바닥글은 하단에 표시됩니다. 물론 이것이 위치 고정을 의미하는 것은 아닙니다. 바닥글은 콘텐츠 영역 바로 아래에 있습니다. 두 가지 방법이 있습니다.

html 구조는 다음과 같습니다:

    
        <div>....</div>
        <div>....</div>
    

1, margin & padding

html, body {
    height: 100%;
}
$footer-height: 30px;

#content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

2, flexlayout

$footer-height: 30px;

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

초광각 배경 이미지가 중앙에 위치합니다.

일부 기존 포털 웹사이트에서는 주요 콘텐츠 영역 너비가 대략 980px이거나 1000px의 클래식 너비입니다. 때로는 더 넓은 그림이 전체 배경 이미지로 사용되고 가로 스크롤 없이 중앙에 배치됩니다. ? 봤을 때 정말 마술적이라고 생각했어요. 다음 예를 보세요.

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

<div>
    <img  alt="재미있는 CSS 마술과 레이아웃(코드)" >
</div>

가로 방향이 이해하기 쉽습니다. 세로 방향에서는 img를 가운데까지 끌어내린 후 ::로 이해하면 됩니다.

이 기사는 여기까지입니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

CSS Video Tutorial

칼럼을 주목하세요!

위 내용은 재미있는 CSS 마술과 레이아웃(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!