1. 테이블 태그와 자체 기능을 사용하세요
<style> .parent{ 테두리: 1px 단색 빨간색; 높이: 500px } .child{ 테두리: 1px 단색 검정색 } </style><body> <!-- --> <table class=parent> <tr> <td class=child> 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 테스트 </td> </tr> </테이블></body>효과
2. 왼쪽 여백: -50px;
<스타일> .parent{ 위치: 상대; 배경색: 500px; 높이: 200px } .child{ 너비: 100px; 배경색: #fff; ; 왼쪽: 50%; 여백-왼쪽: -50px: -50px } </style>효과
3. 변환: 변환(-50%,-50%)
<스타일> .parent{ 너비: 500px; 높이: 300px; 테두리: 단색 1px; 상대; } .child{ 너비: 200px; 높이: 100px; 테두리: 1px 단색; ; 왼쪽:50%; 변환: 번역(-50%,-50%) } </style>효과
4. 마진: 자동;
<스타일> .p{ 너비: 300px; 높이: 200px; 위치: 상대; } .c{ 너비: 80px; 배경색: #dedede; ; 위쪽:0; 아래쪽:0; 오른쪽: } </style>효과
5. 유연한 상자
<style> .p{ 테두리: 1px 너비: 400px; 높이: 500px; 디스플레이: flex; justify-items: center } .c{ 너비: 100px; : 빨간색 } </style>효과
html5CSS3의 새로운 기능은 무엇이며 어떤 요소가 제거되었습니까? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?HTML5는 더 이상 SGML의 하위 집합이 아니며 주로 이미지, 위치, 저장, 지리적 위치 및 기타 기능 추가에 관한 것입니다.
페인팅 캔버스 요소
미디어 재생을 위한 비디오 및 오디오 요소
로컬 오프라인 저장소 localStorage는 오랫동안 데이터를 저장하며 브라우저를 닫은 후에도 데이터가 손실되지 않습니다.
브라우저를 닫으면 sessionStorage 데이터가 자동으로 삭제됩니다.
기사, 바닥글, 머리글, 탐색, 섹션과 같이 더 나은 의미를 갖는 콘텐츠 요소
양식 컨트롤, 달력, 날짜, 시간, 이메일, URL, 검색
CSS3는 둥근 모서리, 그림자, 텍스트에 특수 효과를 구현하고 더 많은 CSS 선택기와 다중 배경 rgba를 추가합니다.
새로운 기술 webworker, websockt, Geolocation
제거된 요소
순수한 표현 요소: 기본 글꼴, 빅, 센터, 글꼴, s, 스트라이크, tt, u;
유용성에 부정적인 영향을 미치는 요소: 프레임, 프레임 세트, IE8/IE7/IE6은 document.createElement 메소드를 통해 생성된 태그를 지원합니다.
이 기능을 사용하면 이러한 브라우저가 HTML5 새 태그를 지원할 수 있습니다.
브라우저가 새 태그를 지원한 후에는 태그의 기본 스타일도 추가해야 합니다. 물론 가장 좋은 방법은 성숙한 프레임워크를 직접 사용하는 것이며 가장 많이 사용되는 프레임워크는 html5shim 프레임워크입니다.
- <!--[IE 9인 경우]><script> src=http://html5shim.googlecode.com/svn/trunk/html5.js</script><![endif]-->
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.