html表格网页自适应居中,web前端:css自适应居中方法总结
下面来看一个最简单的小案例,在浏览器窗口居中一个小盒子:
就这样一个很简单的小案例,你能够想到多少种方法来实现呢?对块元素盒子的左右居中相信大家都不陌生,{margin:auto;}就能够实现,但是对于垂直自适应居中就不起作用了,下面就从最简单的说起。
标签结构如下:
方法一:大伙熟知的居中方法
这种方法很简单,也很直观,但是有一定的局限性,就是固定了盒子的宽高,写死了margin值,而且需要一定的计算。
方法二:少部分人知道的居中方法
这种方案比较取巧,而且与盒子的宽高等无关,也不需要计算,不过经过测试发现IE7及其以下并不支持这种方案,如果项目不要求兼容到IE7及其以下的话可以作为首选,如果要考虑的话第一种方案兼容的蛮好。
方法三(1):flex弹性盒模型
学习过css3盒模型的伙伴应该深有感觉,这玩意简直太爽了,不过他的兼容性可不容乐观,所以只是大量的运用在了移动端或者是pc端不考虑低版本浏览器兼容的项目。
方法三(2):box弹性盒模型
这哥们常常配合flex盒模型做一些不同版本浏览器的兼容性处理,不过这哥们本身的兼容性可没有flex那么好了,功能也稍微逊色于flex,不过作为资深的css玩家,这东西还是需要懂的。
方法四:table布局(鲜有人熟悉的居中方法)
通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了,不过对于IE7及其以下的浏览器是不支持的!不过对于IE7及其以下浏览器的固执,我们来看看下面一种方案配合起来解决这个兼容。
方法五:font-size居中(不可思议吧,IE7、IE6)
这种方案需要知道父元素的宽高,然后把父元素的font-size值设置为父元素的高度除以1.14,这样在IE7及其以下的浏览器能够做到居中,当然这里不是自适应了,如果需要自适应的话可以结合js来实现,即js动态获取父元素的宽高值然后计算出父元素font-size的值,大伙可以自己试试。
笔者:清心
QQ :564537488
html表格网页自适应居中,web前端:css自适应居中方法总结相关推荐
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
- web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码 在阿里iconfont中创建项目 新建项目 搜索自己想要的图标并添加入库 点击购物车 添加至项目 回到"我的项目" ...
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
- 给你一份详细的web前端CSS布局指南,请查收
我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难点,这篇文章就尽可 ...
- 大二Web课程设计——家乡主题网页设计(web前端网页制作课作业) 四川旅游网页设计制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 大二web期末大作业——家乡主题网页设计(web前端网页制作课作业) 四川旅游网页设计制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
最新文章
- Git 各指令的本质,真是通俗易懂啊!
- 关于 ng-template 通过 @input 传入另一个 Component 不能工作的问题调试
- 盼达用车:由于公司经营原因 2月1日起暂停运营
- vue打包配置的详细说明【config/index.js的build部份】
- 错误描述: plugin scala is incompatible
- cpu风扇声音大_小米游戏本风扇声音大的处理方法
- cygwin--简单备忘
- Sort代码详解学习
- 记录 网上搜集的自动获取银行卡信息工具类
- 9大开源云管理平台(CMP)
- 粉刷匠计算机音乐,音乐《粉刷匠》
- 计算机网络基础实验报告--利用数据包嗅探器Wireshark捕获数据包实验
- data[i] is underfined
- 基于Arduino、ESP8266的物联网项目开发方案整理、毕业设计(第一波)
- 获取已安装或未安装的apk签名
- 有一种温暖,若春风细雨
- 使用Qt开发的软件一览
- 请查阅和请查收的区别_拯救尾款人!这份宠粉攻略请查收
- 一文揭秘:「政府之眼」与「加密世界透视者」Chainalysis
- 计算机技术含量,有哪些看似简单却技术含量高的操作?