Html5新增标签与样式及让元素水平垂直居中


Posted in HTML / CSS onJuly 11, 2019

元素的水平垂直居中

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>

效果

Html5新增标签与样式及让元素水平垂直居中

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>

效果

Html5新增标签与样式及让元素水平垂直居中

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>

效果

Html5新增标签与样式及让元素水平垂直居中

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>

效果

Html5新增标签与样式及让元素水平垂直居中

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>

效果

Html5新增标签与样式及让元素水平垂直居中

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]-->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 #HTML / CSS
html通过canvas转成base64的方法
Jul 18 #HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 #HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 #HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 #HTML / CSS
把富文本的回车转为br标签
Aug 09 #HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 #HTML / CSS
You might like
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php除数取整示例
2014/04/24 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Python列表(List)知识点总结
2019/02/18 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python和Sublime整合过程图示
2019/12/25 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
自我评价中英文语句
2013/11/30 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
企业党员一句话承诺
2014/05/30 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
地方白酒代理协议书
2014/10/25 职场文书
行为规范主题班会
2015/08/13 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server