css 상용 지식 포인트 정리

열심히 공부하고 정리하는 것은 자신의 능력을 향상시키는 것이고 학생들에게도 도움이 되었으면 합니다.
BFC
블록 포맷 컨텍스트(block formatting context) 약칭BFC: 페이지의 격리된 독립 용기로서 용기 안의 하위 요소는 바깥의 요소에 영향을 주지 않습니다.
어떻게 BFC를 트리거합니까?

루트 요소html: 최대 BFC

position를 fixed 또는 absolute

로 설정

display 설정inline-block,table-block,table-caption

overflow의 값은 visible

가 아닙니다.

float의 값은 none

가 아닙니다.

MDN 서식 지정 컨텍스트

BFC 포지셔닝 시나리오

내부의 박스는 수직 방향으로 하나씩 배치된다

같은 BFC에 속하는 두 인접 요소의 수직 방향에서 margin이 중첩

BFC의 각 요소의 왼쪽 margin은 블록이 포함된 왼쪽 border와 접촉

BFC의 높이를 계산할 때 부동 요소도 계산에 참여한다

선택기 가중치
Css 선택기 우선 순위

!important -> 최대

인라인 스타일 -> 1000

id -> 100

class -> 10

tag -> 1

계승 양식

margin 속성

margin 속성은 주어진 요소에 대해 네 개의 (상하좌우) 방향의 외곽 거리 속성을 설정합니다.

일반 원소의 백분율 margin은 모두 용기의 에 비해 계산된 것이다

절대 포지셔닝 원소의 백분율 margin은 그 포지셔닝 조상 원소의 너비에 대한 계산

상하margin이 중첩됩니다. block 원소에서만 발생합니다. (최대값을 얻습니다)

중첩 해결 방법:

부모 요소 설정BFC(예를 들어 오버플로우:hidden,position:absolute 등)

부모 요소 설정border/padding

margin의 값이 auto일 때.브라우저에서 자동으로 적합한 Margin을 선택해서 적용합니다. (자동으로 남은 공간을 분배합니다.)

필요 원소는 블록 원소

요소 설정 너비 필요

margin은 마이너스

수평 중간면

내연원소

    text-align: center;

고정 너비의 블록 원소

    //       margin   auto
    margin: 0 auto;

세로 가운데 맞춤

단일 텍스트 수직 가운데 -> line-height

여러 줄 텍스트 세로 가운데

    // vertical-align       、         
    //        /                      

    .center-table {
        display: table;
    }
    .center-table p {
        display: table-cell;
        vertical-align: middle;
    }

원소 가운데(수평 및 수직) 진급

고정 너비 가운데 맞춤

절대 포지셔닝 + 마이너스 margin

    #main{
      
        position: relative;
        // ...  
    }
    #center{
      
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px;
    }

절대 포지셔닝 + margin: auto;

    #main{
      
        position: relative;
        // ...  
    }
    #center{
      
        width: 100px;
        height: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }

부정확한 너비

transform 가운데

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

flex 가운데 맞춤 (1)

    #main{
      
        display: flex; 
        justify-content: center; 
        align-items: center;
    }

flex 가운데 맞춤 (2)

    #main{
      
        display: flex;
        // ...  
    }
    #center{
      
        margin: auto;
    }

브라우저 css 해석 방법

css의 해석은 위에서 아래로

렌더링 순서도 위에서 아래로

다운로드와 렌더링이 동시에 수행됩니다.

css의 해석과 js의 해석은 동시에 진행할 수 없음

css 의 해석은 오른쪽에서 왼쪽으로 해석한다

(jQuery 선택기 해석 방식 동일)

원소의 위치를 먼저 확정하고 일치 횟수를 줄일 수 있다

CSS 속성 지원 판단

속성 덮어쓰기 원리 이용

고버전 브라우저가 지원하는 특성을 뒤에 쓰십시오.브라우저의 CSS 분석 기능 2개:

뒤에 있는 속성이 앞에 있는 속성

을 덮어씁니다.

모르는 문법이 있으면 CSS parser가 해석하지 않습니다.

    div {
        background: red;
        background: linear-gradient(90deg, red, yellow)
    }

.css의@supports를 사용하여 속성 지원 상황을 판단한다

    //          
    @supports (position:sticky) {
        div {
            position:sticky;
        }
    }
    
    //        ： not  
    @supports not (background: linear-gradient(90deg, red, yellow)) {
        div {
            background: red;
        }
    }

    //      css  ： and  
    @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
        p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

CSS 속성 지원에 대한 JS 판단

@supports의 다른 형식으로 나타나는 경우, 우리는 자바스크립트의 방식으로 CSS 속성의 지원 상황을 얻을 수 있습니다.CSS.supports('display', 'flex'); 2개의 매개 변수가 필요합니다. 그렇지 않으면false로 되돌아갑니다(현재는 IE 브라우저가 지원되지 않습니다).

JS 라이브러리 사용modernizr

브라우저가 지원하지 않으면, ele를 호출할 수 있습니다.style에서 속성 지원 여부를 판단합니다 (라이브러리: Modernizr)

할당 값 판단 재조회를 통해 지원 여부를 판단

    var root = document.documentElement; //HTML
 
    for(var key in root.style) {
        console.log(key);
    }

    //     
    // alignContent
    // alignItems
    // alignSelf
    // alignmentBaseline
    // all
    // animation
    // ...

원소에background 속성이 있을 수 있지만 구체적인 linear-gradinet () 속성 값은 지원되지 않습니다.이럴 때 어떻게 검사해야 하나요?구체적인 값을 원소에 부여하고 이 속성 값이 읽힐 수 있는지 확인하십시오.

    var root = document.documentElement;
 
    root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';
    
    if(root.style.backgroundImage) {
    //   
    } else {
    //    
    }

간단한 CSS 속성 지원 캡슐화
페이지에 숨겨진 요소를 사용하여 테스트합니다.

    /**
    *       CSS     
    * @param [String] property       CSS    
    * @param [String] value         
    * @return [Boolean]       
    */
    function cssTest(property, value) {
        // CSS && CSS.supports
        // CSS.supports('display', 'flex');    2   ，     false
        
        //        ，      
        var ele = document.getElementById('test-display-none');
    
        //          
        if(arguments.length === 1) {
            if(property in ele.style) {
                return true;
            }
        //        
        }else if(arguments.length === 2){
            ele.style[property] = value;
    
            if(ele.style[property]) {
                return true;
            }
        }
    
        return false;
    }

position 포지셔닝 세부 정보
position: absolute;

비static의 선배 요소에 대한 포지셔닝

만약 선배 요소가 모두 @supports라면 뷰포트에 대한 포지셔닝

position:fixed

뷰포트를 기준으로 배치

만약에 선배 원소에 static의 none 속성이 있다면 해당 선배 원소에 대한 포지셔닝

(부주의로 인한 BUG 발생)

visibility:hidden、display:none、z-index=-1、opacity:0
부동 지우기
부동 요소는 문서 흐름에서 벗어나 원소를 펼칠 수 없습니다.부동을 제거해야 합니다.
부동 제거 방법

위원소+transform

    //        clearfix  
    //    zoom   IE6/7
    .clearfix:after {
        display: table;
        content: " ";
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

    //        clearfix  【  】
    //    zoom   IE6/7
    //     :before                
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

부모 요소에 설정clear: both;

공백원소+overflow: hidden;(위원소의 실현원리와 같지만low가 많다)

rem em px vw

clear: both;: (pixel 픽셀의 줄임말), 모니터 화면 해상도

에 비해

px: 부원소에 비한em

font-size: 루트(html)에 비해rem

root-em: 뷰포트(viewport)의 너비에 따라 정해진 길이는 뷰포트 너비의 1/100

과 같다.
위류와 위원소의 작용과 구별
위류: 위류 선택 요소는 현재 요소가 있는 상태를 바탕으로 한다. 또는 요소가 현재 가지고 있는 특성을 바탕으로 한다. 기능은class와 유사하지만 문서 이외의 추상적인 것을 바탕으로 위류라고 한다. (:first-child:link:visitive:hover:focus:lang)
위조원소: 위조원소가 제어하는 내용은 실제적으로 원소와 같지만 그 자체는 원소의 추상화를 바탕으로 문서에 존재하지 않기 때문에 위조원소라고 한다(:first-line:first-letter:befoe:after)
공중번호'전단 진급 과목'에 주목하여 전단을 열심히 배우고 함께 진급하는 것을 환영합니다.