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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP 透明水印生成代码
2012/08/27 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
JS 时间显示效果代码
2009/08/23 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
js的一些常用方法小结
2011/06/29 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python pickle模块用法实例
2015/04/14 Python
Python实现的密码强度检测器示例
2017/08/23 Python
django框架forms组件用法实例详解
2019/12/10 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python自动创建Excel并获取内容
2020/09/16 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
行政专员求职信范文
2014/05/03 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
自荐信模板大全
2015/03/27 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
JavaScript ES6的函数拓展
2022/01/18 Javascript