1. Use the table tag and its own functions
<style> .parent{ border: 1px solid red; height: 500px } .child{ border: 1px solid black } </style><body> <!-- --> <table class=parent> <tr> <td class=child> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </td> </tr> </table></body>Effect
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>Effect
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>Effect
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>Effect
5. Flexible box
<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>Effect
What are the new features of html5CSS3 and which elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?HTML5 is no longer a subset of SGML, it is mainly about the addition of images, location, storage, geolocation and other functions.
Painting canvas element
video and audio elements for media playback
Local offline storage localStorage stores data for a long time, and the data is not lost after the browser is closed;
sessionStorage data is automatically deleted after the browser is closed
Content elements with better semantics, such as article, footer, header, nav, section
Form controls, calendar, date, time, email, url, search
CSS3 implements rounded corners, shadows, special effects on text, and adds more CSS selectors and multi-background rgba
New technologies webworker, websockt, Geolocation
removed element
Purely expressive elements: basefont, big, center, font, s, strike, tt, u;
Elements that have a negative impact on usability: frame, frameset, noframes; IE8/IE7/IE6 support tags generated through the document.createElement method.
This feature can be used to enable these browsers to support HTML5 new tags.
After the browser supports the new tag, you also need to add the default style of the tag: of course, the best way is to directly use a mature framework, and the most used one is the html5shim framework.
- <!--[if lt IE 9]><script> src=http://html5shim.googlecode.com/svn/trunk/html5.js</script><![endif]-->
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.