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实现超炫的loading加载动画效果
May 07 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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和ACCESS写聊天室(四)
2006/10/09 PHP
基于php split()函数的用法详解
2013/06/05 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python列表对象实现原理详解
2019/07/01 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
建筑自我鉴定
2013/10/19 职场文书
中学生打架检讨书
2014/10/13 职场文书
小学生思想品德评语
2014/12/31 职场文书
食品卫生管理制度
2015/08/06 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL