元素的水平垂直居中
1、利用table標簽，自帶的功能
<style> .parent{ border: 1px solid red; height: 500px } .child{ border: 1px solid black } </style><body> <!-- --> <table class="parent"> <tr> <td class="child"> 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 測試 </td> </tr> </table></body>效果
2、 margin-left: -50px; margin-top: -50px
<style> .parent{ position: relative; background-color: yellow; width: 500px; height: 200px } .child{ width: 100px; height: 100px; background-color: #fff; position:absolute; top:50%; left: 50%; margin-left: -50px; margin-top: -50px } </style>效果
3、 transform: translate(-50%,-50%)
<style> .parent{ width: 500px; height: 300px; border: solid 1px red; position: relative; } .child{ width: 200px; height: 100px; border: 1px solid black; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) } </style>效果
4、 margin: auto;
<style> .p{ width: 300px; height: 200px; border: 1px solid red; position: relative; } .c{ width: 80px; height: 40px; background-color: #dedede; position:absolute; margin: auto; top:0; bottom:0; left: 0; right: 0 } </style>效果
5、彈性盒
<style> .p{ border: 1px solid red; width: 400px; height: 500px; display: flex; justify-content: center; align-items: center } .c{ width: 100px; height: 100px; background-color: red; } </style>效果
html5CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關于圖像，位置，存儲，地理定位等功能的增加。
繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
CSS3實現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；是IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式：當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
- <!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
