Han Shunping의 최신 CSS3 비디오 튜토리얼 소스 코드 코스웨어

"Han Shunping의 2016 최신 CSS3 비디오 튜토리얼"은 더 나은 결과를 얻기 위해 css2 기술을 기반으로 업그레이드된 새로운 CSS 기술인 css3에 대한 기술적 설명입니다. CSS3는 CSS 기술의 업그레이드 버전이며 CSS3 언어 개발은 ​​모듈화를 향해 발전하고 있습니다. 더 작은 모듈로 나누세요. 이러한 모듈에는 상자 모델, 목록 모듈, 하이퍼링크 방법, 언어 모듈, 배경 및 테두리, 텍스트 효과, 다중 열 레이아웃 등이 포함됩니다.

강좌 재생 주소: http://www.php.cn/course/441.html

선생님의 강의 스타일:

선생님의 강의는 생생하고 재치 있고 재치 있습니다. 감동. 생생한 은유는 학생들에게 지혜의 문을 열어주는 마무리와 같습니다. 잘 배치된 유머는 마치 부드러운 와인 한 잔을 마시는 것과 같이 학생들에게 아는 듯한 미소를 가져다 주고, 사람들에게 철학자의 격언과 문화적 언급을 선사합니다. 내레이션에 때때로 삽입되어 사람들에게 생각과 주의력을 제공합니다.

이 비디오에서 더 어려운 점은 CSS3에 인라인 상자를 삽입하는 것입니다.

CSS3에서 도입된 레이아웃 모드는 Flexbox 레이아웃입니다. 주요 아이디어는 컨테이너에 하위 항목을 변경할 수 있는 기능을 제공하는 것입니다. 너비와 높이를 선택하고 가능한 한 최선의 방법으로 채웁니다. Flex 컨테이너는 Flex 항목을 사용하여 자동으로 확장 및 축소하여 사용 가능한 여유 공간을 채웁니다.
　더 중요한 것은 페이지 레이아웃에는 적합하지만 크거나 복잡한 애플리케이션을 지원하는 데는 적합하지 않은 기존 레이아웃(블록 수준에서 위에서 아래로, 인라인에서 왼쪽에서 오른쪽으로)과 달리 Flexbox 레이아웃 방향을 예측할 수 없다는 점입니다. 유연성 부족.
　일반 레이아웃이 블록 및 인라인 텍스트 흐름 방향을 기반으로 한다면 Flex 레이아웃은 "Flex-flow" 방향을 기반으로 합니다. 먼저 텔레스코픽 박스 모델의 몇 가지 특수 용어를 이해해 보겠습니다.

Spindle: Flex 컨테이너의 주축은 주로 Flex 프로젝트를 구성하는 데 사용됩니다. 반드시 수평일 필요는 없으며 주로 이동 방향 속성에 따라 달라집니다.
　 스핀들 시작점, 스핀들 끝점: Flex 프로젝트의 구성은 컨테이너의 주축 시작 가장자리에서 시작하여 주축 끝점에서 끝납니다.
　주축 길이: Flex 프로젝트의 주축 방향의 너비 또는 높이가 프로젝트의 주축 길이가 되며, Flex 프로젝트의 주축 길이 속성은 너비 또는 높이 속성에 따라 결정됩니다. 주축 방향을 향합니다.
　측축: 주축에 수직인 축을 측면축이라고 하며, 측면축 방향의 연장선입니다.
　 교차축 시작점, 교차축 끝점: 텔레스코픽 열의 구성은 컨테이너의 교차축 시작 가장자리에서 시작하여 교차축 끝점에서 끝납니다.
　 교차축 길이: 교차축 방향의 Flex 프로젝트의 너비 또는 높이는 프로젝트의 교차축 길이입니다. Flex 프로젝트의 교차축 길이 속성은 너비 또는 높이 속성입니다. 어느 쪽이 주축 방향을 향하는지에 따라 결정됩니다.

　Flex 레이아웃의 구문 사양은 수년에 걸쳐 큰 변화를 겪었으며 이로 인해 Flexbox 사용에 특정 제한이 발생했습니다. 구문 사양의 버전이 다양하고 브라우저 지원이 일관되지 않기 때문에 Flexbox 레이아웃은 많이 사용되지 않습니다. Flexbox 레이아웃 구문 사양은 크게 세 가지 유형으로 나뉩니다.

여기에서 소스 코드 리소스를 다운로드하는 것이 좋습니다: http://www.php.cn/xiazai/learn/2127

리소스는 비디오 코스웨어와 소스 코드를 귀하와 공유합니다

위 내용은 Han Shunping의 최신 CSS3 비디오 튜토리얼 소스 코드 코스웨어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!