1. Используйте тег таблицы и его собственные функции.
<style> .parent{ граница: 1 пиксель, сплошной красный; высота: 500 пикселей } .child{ граница: 1 пиксель, сплошной чёрный } </style><body> <!-- --> <table class=parent> <tr> <td class = kild> тестовый тест тестовый тест тестовый тестовый тест тест тестовый тест тестовый тестовый тест тестовый тестовый тест тест тестовый тест тестовый тест тест тестовый тест тестовый тест тестовый тест тестовый тест тестовый тест тест тестовый тест тест тестовый тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест теста тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест </td> </tr> </table></body>Эффект
2. поле слева: -50 пикселей, поле сверху: -50 пикселей;
<style> .parent{ позиция: относительная; цвет фона: желтый; ширина: 500 пикселей; высота: 200 пикселей } .child { ширина: 100 пикселей; высота: 100 пикселей; позиция: абсолютная: 50%; ; слева: 50%; поле слева: -50 пикселей; поле сверху: -50 пикселей } </style>Эффект
3. преобразование: трансляция(-50%,-50%)
<style> .parent{ ширина: 500 пикселей; высота: 300 пикселей; граница: сплошная, 1 пиксель, красная; позиция: относительная; .child { ширина: 200 пикселей; высота: 100 пикселей; граница: 1 пиксель, сплошная черная; позиция: абсолютная; ; влево: 50%; трансформировать: транслировать(-50%,-50%) } </style>Эффект
4. поле: авто;
<style> .p{ ширина: 300 пикселей; высота: 200 пикселей; граница: 1 пиксель, сплошная красная; позиция: относительная; .c { ширина: 80 пикселей; цвет фона: #dedede; позиция: абсолютная; ; вверху: 0; внизу: 0; справа: 0 } </style>Эффект
5. Гибкая коробка
<style> .p{ граница: 1 пиксель, сплошная красная; ширина: 400 пикселей; высота: flex; выравнивание-элементов: центр } .c { ширина: 100 пикселей; высота: 100 пикселей; : красный } </стиль>Эффект
Каковы новые возможности html5CSS3 и какие элементы были удалены? Как решить проблемы совместимости браузера с новыми тегами HTML5? Как отличить HTML от HTML5?HTML5 больше не является подмножеством SGML, в основном речь идет о добавлении изображений, местоположении, хранении, геолокации и других функциях.
Элемент холста для рисования
видео и аудио элементы для воспроизведения мультимедиа
Локальное автономное хранилище localStorage долго хранит данные, и данные не теряются после закрытия браузера;
Данные sessionStorage автоматически удаляются после закрытия браузера.
Элементы контента с лучшей семантикой, такие как статья, нижний колонтитул, заголовок, навигация, раздел.
Элементы управления формой, календарь, дата, время, электронная почта, URL-адрес, поиск
CSS3 реализует закругленные углы, тени, специальные эффекты для текста, а также добавляет больше селекторов CSS и многофоновый rgba.
Новые технологии веб-работника, веб-сокета, геолокации
удаленный элемент
Чисто выразительные элементы: базовый шрифт, большой, центральный, шрифт, s, страйк, тт, ю;
Элементы, которые негативно влияют на удобство использования: 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 Wulin.