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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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之第八天
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python脚本后台执行方式
2019/12/21 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Numpy数组的广播机制的实现
2020/11/03 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
高三语文教学反思
2014/01/15 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
项目经理任命书范本
2014/06/05 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
党员民主评议个人总结
2014/10/20 职场文书
交通安全月活动总结
2015/05/08 职场文书
高中政治教师教学反思
2016/02/23 职场文书