這篇文章將為大家詳細講解有關(guān)Html5中新增標簽與樣式實現(xiàn)元素水平垂直居中的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:申請域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、鷹潭網(wǎng)站維護、網(wǎng)站推廣。元素的水平垂直居中
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 的子集,主要是關(guān)于圖像,位置,存儲,地理定位等功能的增加。
繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
CSS3實現(xiàn)圓角,陰影,對文字加特效,增加了更多的CSS選擇器 多背景 rgba
新的技術(shù)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新標簽,
瀏覽器支持新標簽后,還需要添加標簽?zāi)J的樣式:當然好的方式是直接使用成熟的框架、使用最多的是html5shim框架
- <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
關(guān)于“Html5中新增標簽與樣式實現(xiàn)元素水平垂直居中的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
文章標題:Html5中新增標簽與樣式實現(xiàn)元素水平垂直居中的方法-創(chuàng)新互聯(lián)
網(wǎng)站路徑:http://muchs.cn/article48/csgiep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、微信小程序、電子商務(wù)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容