CSS3에 위조 클래스가 추가되었습니다. CSS3는 어떤 새로운 특성이 있습니까? 신축성 박스 레이아웃 모델은 어떻게 가운데div에 있습니까?(9)

7560 단어 면접 직통 버스
CSS3에 추가된 위조 클래스는 무엇입니까?
예:
  • p:first-of-type은 부모 원소에 속하는 첫 번째

    원소의 모든

    원소를 선택한다.

  • p:last-of-type은 부모 원소에 속하는 마지막

    원소의 각

    원소를 선택한다.

  • p:only-of-type은 부모 원소에 속하는 유일한

    원소의 모든

    원소를 선택한다.

  • p:only-child는 부모 원소에 속하는 유일한 하위 원소의 모든

    원소를 선택한다.

  • p:nth-child(2) 부모 원소에 속하는 두 번째 하위 원소의

    원소를 선택합니다.

  • :after는 원소 앞에 내용을 추가하고 부동을 제거하는 데도 사용할 수 있습니다.
  • : before가 요소 뒤에 내용 추가
  • :enabled
  • :disabled는 폼 컨트롤의 비활성화 상태를 제어합니다.
  • :checked 단일 선택 상자나 복선 상자가 선택되었습니다.

  • CSS3의 새로운 기능에는 어떤 것들이 있습니까?
  • 각종 CSS 선택기 추가 (: not (. input): 모든class는 'input' 노드가 아닙니다)
  • 원각(border-radius:8px)
  • 다중 열 레이아웃(multi-column layout)
  • 섀도우 및 반사(Shadow\Reflect)
  • 텍스트 효과(text-shadow,)
  • 텍스트 렌더링(Text-decoration)
  • 선형 그래디언트(gradient)
  • 회전(transform)
  • 확대, 포지셔닝, 기울기, 애니메이션, 다중 배경 예:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
  • CSS3의 Flexbox(탄성 박스 레이아웃 모형)와 적용 장면을 설명해 주시겠어요?
  • 페이지 레이아웃에 사용되는 새로운 CSS3 기능으로 Flexbox는 목록을 같은 방향(위에서 아래로 배열, 왼쪽에서 오른쪽)으로 배치하고 사용 가능한 공간으로 확대할 수 있다.
  • 비교적 복잡한 구조는 신축 용기(flex container)를 끼워서 실현할 수 있다.
  • Flex 레이아웃을 사용하는 요소를 Flex 용기(flex container)라고 하는데'용기'라고 약칭한다.
  • 그의 모든 하위 요소는 자동으로 용기 구성원이 되고 Flex 프로젝트(flex item)라고 불리며'프로젝트'라고 약칭한다.
  • 일반적인 레이아웃은 블록과 내연류 방향을 바탕으로 하고 Flex 레이아웃은 flex-flow 흐름을 바탕으로 국중을 편리하게 할 수 있으며 서로 다른 화면 크기에 적응할 수 있다.
  • 배치에 있어서 이전보다 더욱 유연한 공간이 생겼다.

  • 구체적:http://www.w3cplus.com/css3/flexbox-basics.html
    어떻게 가운데div를 차지합니까?
  • 수평 가운데: div에 너비를 설정하고margin:0 auto 속성 추가하기
  • 			div{
    				width:200px;
    				margin:0 auto;
    			 }
    
    
  • 절대 포지셔닝의div를 가운데
  • 			div {
    				position: absolute;
    				width: 300px;
    				height: 300px;
    				margin: auto;
    				top: 0;
    				left: 0;
    				bottom: 0;
    				right: 0;
    				background-color: pink;	/*       */
    			}
    
  • 수평 수직 가운데
  • 컨테이너의 너비 500 높이 300 레이어 설정 레이어의 바깥쪽 여백을 결정합니다.
    			div {
    				position: relative;		/*             */
    				width:500px;
    				height:300px;
    				top: 50%;
    				left: 50%;
    				margin: -150px 0 0 -250px;     	/*             */
    				background-color: pink;	 	/*       */
    
    			 }
    
  • 수평 수직 중2
  • 알 수 없는 용기의 넓이, 이용transform 속성
    			div {
    				position: absolute;		/*             */
    				width:500px;
    				height:300px;
    				top: 50%;
    				left: 50%;
    				transform: translate(-50%, -50%);
    				background-color: pink;	 	/*       */
    
    			}
    
  • 수평 수직 중3
  • flex 레이아웃을 이용하여 실제 사용할 때 호환성을 고려해야 한다
    			.container {
    				display: flex;
    				align-items: center; 		/*      */
    				justify-content: center;	/*      */
    
    			}
    			.container div {
    				width: 100px;
    				height: 100px;
    				background-color: pink;		/*       */
    			}  
    

    좋은 웹페이지 즐겨찾기