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; ; 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; bsolorder: 1px solid: blacktop; ; 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: #dedededealion; ; 上: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: 100pcolorx; : red; } </style>
效果
html5CSS3有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分HTML和HTML5?HTML5 現在已經不是SGML 的子集,主要是關於圖像,位置,存儲,地理定位等功能的增加。
繪畫canvas 元素
用於媒介回放的video 和audio 元素
本機離線儲存localStorage 長期儲存數據,瀏覽器關閉後資料不遺失;
sessionStorage 的資料在瀏覽器關閉後自動刪除
語意化較好的內容元素,如article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
CSS3實現圓角,陰影,對文字加特效,增加了更多的CSS選擇器多背景rgba
新的技術webworker, websockt, Geolocation
移除的元素
純粹表現的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產生負面影響的元素:frame,frameset,noframes;是IE8/IE7/IE6支援透過document.createElement方法產生的標籤,
可以利用這項特性讓這些瀏覽器支援HTML5新標籤,
瀏覽器支援新標籤後,還需要加入標籤預設的樣式:當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
- <!--[if lt IE 9]><script> src=http://html5shim.googlecode.com/svn/trunk/html5.js</script><![endif]-->
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。