CSS 구조 및 레이아웃-CSS 튜토리얼-php.cn

CSS 구조 및 레이아웃

高洛峰

풀어 주다： 2017-02-18 14:55:27

원래의

1321명이 탐색했습니다.

0x00 min-content 너비 적응형

CSS3의 새로운 너비 속성 값 width:min-content는 컨테이너의 너비 값을 컨테이너에서 깨지지 않는 가장 큰 줄로 설정할 수 있습니다. 너비(고정된 너비를 가진 가장 넓은 단어, 그림 또는 상자 요소)

figure{
    width:min-content;
    margin: auto;    
}

로그인 후 복사

0x01 형제 요소 수에 따라 스타일 설정

우리는 의사 요소 선택기를 알고 있습니다. -child ,실제로는:first-child:last-child와 동일할 수 있습니다. 즉, 첫 번째 항목이자 동시에 마지막 항목이므로 논리적으로 고유합니다. 그리고 :last-child는 :nth-last-child(1)의 단축어이기도 합니다.

그럼 li:first-chidl:nth-last-child(4)가 무엇을 나타내는지 질문에 대해 생각해 보겠습니다. 결과는 _정확히 4개의 목록 항목이 있는 목록의 첫 번째 항목_, ok입니다. 형제 선택기와 결합하면 다음의 각 항목을 적중할 수 있습니다. 정확히 4개의 목록 항목이 포함되어 있으면 각 항목을 적중하세요.

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  
    background: red;
}

로그인 후 복사

SASS와 결합하면 재사용이 단순화됩니다

/*定义混合器*/
@mixin n-items($n){
    &:first-child:nth-last-child(#{$n}),
    &:first-child:nth-last-child(#{$n}) ~ &{
        @content;
    }
}

/*调用*/
li {
    @include n-items(4){
        /*属性与值写在这里*/
        background: red;
    }
}

로그인 후 복사

:nth-child()

nth-child() nth-child()의 장점은 an+b 형식의 표현식을 허용하므로 자연스럽게 변형 nth를 사용할 수 있다는 것입니다. -child(n+4) 이 양식에서는 첫 번째, 두 번째, 세 번째 하위 요소를 제외한 모든 하위 요소를 선택합니다.

ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
    /*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}

로그인 후 복사

물론, :nth-child()의 게임플레이는 전적으로 여러분의 상상력에 달려 있습니다. CSS 스타일:

<footer>
    <p class="wrapper">        
    </p>
</footer>

로그인 후 복사

calc() 메서드를 사용한 후에는 그렇게 번거롭게 작업할 필요가 없습니다.

footer{
    background: #333;
}

.wrapper{
    max-width: 900px;
    margin: 1em auto;
    height: 200px;
}

로그인 후 복사

사용하는 코드 세 줄만 있으면 됩니다. clac()를 사용하면 CSS 산술 연산을 통해 DOM 구조가 중복되지 않고 매우 간결해집니다. 물론 여기의 코드는 바닥글 요소의 상위 요소가 900픽셀을 초과하는 경우에만 효과를 볼 수 있습니다. .

calc()의 백분율은 상위 항목을 기준으로 구문 분석됩니다.

하지만 처음으로 CSS3에서 cacl()의 마술을 배웠습니다.

0x03 수직 센터링

절대 위치 기반 솔루션

CSS에는 매우 흔한 현상이 있는데, 실제 솔루션은 우리가 전혀 예상하지 못한 곳에서 나오는 경우가 많습니다. 예를 들어 positon:absolute 및 변환:translate() 속성을 결합하여 수직 중심 정렬을 구현할 수 있습니다

translate() 변환 함수의 백분율은 요소 자체의 너비와 높이를 기준으로 변환되기 때문에, 따라서 고정 크기에 대한 의존성을 완전히 없앨 수 있습니다.

예: DOM 구조

footer{
  background:#333;
  padding:1em calc(50% - 50px);
 }

로그인 후 복사

CSS 코드:

<body>
    <p class="main">
        <h1>Am i center?</h1>
        <p>Center me ,please!</p>
    </p>
</body>

로그인 후 복사

그러나 이 방법에도 단점이 있습니다.

1. 일부 브라우저에서는 요소가 픽셀의 절반에 배치될 수 있기 때문에 흐릿하게 표시될 수 있습니다.

2.절대 위치 지정이 적합하지 않은 경우. 그리고 절대 위치 지정은 전체 레이아웃에 너무 강한 영향을 미칩니다. CSS结构与布局

FlexBox 기반 솔루션

이것이 현재 최고의 솔루션임에는 의심의 여지가 없습니다. 또한 FlexBox에 대한 최신 브라우저 지원은 이미 상당히 높습니다.

FlexBox 컨테이너를 기반으로 하는 항목에 margin:auto를 사용하면 너비가 지정되지 않은 경우에도 가로 방향뿐만 아니라 세로 방향도 중앙에 맞출 수 있습니다. 왜냐하면 이 요소에 할당된 너비는 max-content와 동일하기 때문입니다. .

FlexBox의 또 다른 이점은 텍스트를 세로로 가운데 정렬할 수도 있다는 것입니다. display:flex를 사용하여 요소에 align-items:center 및 justify-content:center를 추가하기만 하면 됩니다. .

.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

로그인 후 복사

CSS结构与布局

바닥에 고정되는 0x04 바닥글

때때로 머리글과 바닥글의 높이가 내부 요인에 의해 결정될 것으로 예상하며, 콘텐츠 영역 블록의 높이는 사용 가능한 모든 공간을 채우기 위해 자동으로 줄어들 수 있습니다. 이번에도 FlexBox를 사용하면 쉽습니다. CSS结构与布局

.main{
    background: deeppink;
    width: 50%;
    height: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

로그인 후 복사

최소한 전체 뷰포트의 높이를 차지하도록 몸체에 min-height:100vh의 높이를 부여한 다음, 메인에 0보다 큰 flex 값을 부여합니다.

질문: 바닥글이 화면 하단에 고정되어 있으면 페이지를 끝까지 스크롤할 때 바닥글이 콘텐츠 영역을 덮지 않도록 하려면 어떻게 해야 하나요?

이 문제는 순전히 개인적인 생각이므로 바닥글 뒤에 p#_footer를 추가하면 됩니다.

이때 DOM 구조는 다음과 같습니다.

body {
    min-height: 100vh;
    display:flex;
    flex-flow: column;

    header{
        /*heaer style*/
    }
    
    .main{
        flex:1;
    }

    footer{
        /*footer style*/
    }
}

로그인 후 복사

p#_footer의 경우 높이가 다음과 같으면 콘텐츠나 스타일을 추가할 필요가 없습니다. 바닥글의 높이이며, 이를 위해 jQuery를 사용하여 쉽게 수행할 수 있습니다.

<body>
    <header><header>
    <p class="main"></p>
    <footer></footer>
    <p id="_footer"></p>
</body>

로그인 후 복사

이렇게 하면 반응형 레이아웃에 대해 걱정할 필요가 없습니다. 비록 약간 해킹적이지만 완벽한 솔루션입니다!

자세한 내용 CSS 구조 및 레이아웃 관련 기사는 PHP 중국어 웹사이트를 참고하세요!

CSS 구조 및 레이아웃

0x00 min-content 너비 적응형

0x01 형제 요소 수에 따라 스타일 설정

:nth-child()

<footer> <p class="wrapper"> </p> </footer>로그인 후 복사

<footer> <p class="wrapper"> </p> </footer>
로그인 후 복사