虽不是CSS3，但是它的寿命却不及他

geekidentity 发布于2019-08-29 12:52 / 3337人阅读

摘要：一个严肃又严重的话题，作为公司里面的，不说别的知识如何，最起码我的样式得过关吧，然而，最为今天的话题主义，很显然嘛，我并不合格，今天可以给自己打一个不合格的标签了话题引入由于后台数据的变更，可是我的样式并没有做了那么多的判断，故此，我的问题

一个严肃又严重的话题，作为公司里面的h5，不说别的知识如何，最起码我的CSS样式得过关吧，然而，最为今天的话题主义，很显然嘛，我并不合格，今天可以给自己打一个不合格的标签了

话题引入

由于后台数据的变更，可是我的样式并没有做了那么多的判断，故此，我的问题来了，我需要做改变，于是我做了如下改变

{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

以上是我解决的样式定位absolute后居中的问题，但是，按照UI的设计，当前DIV模块并不要求填充完整个屏幕，由此可见，以上方法使用的环境是在不要求宽高的时候，适宜用当前方法

{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

以上用法解决了我的需求问题，由此可见，他可以将元素转换成inline-block行内块级元素，同样，也不需要知道元素的大小，但是，兼容性并不是太好

{
    width:100px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-50px;
}

以上方法其实最古老的方法，因为他有种种的不全才会被一一代替，由于此方法必须要知道元素的大小，否则就只能用js来获取，这并不是我们的初衷，于是乎，有了transform这个方法，好了，对于position定位之后的居中我已经说完了，接下来该说说relative和absolute了。

今天老大的一席话真得让我惊讶了，原来我一直以来都是用书本上的知识，并没有全力拓展开，更没有说细心研究过，对于样式我觉得并没有太多的要求，代码不要总重复就好了，但是显然不是这个样子的，既然CSS是美化页面的，那就应该按照页面的标准流去行走，而我，并没有注意到这些

graph LR
position-->relative
relative-->absolute

以上是我一直以来用absolute的方式，就是使用position:relative以后才能使用absolute，至于为什么自己也搞不明白，只是上课的时候老师是这么说的，我也就这么跟着做了

relative	absolute
相对定位，跟着父级元素	绝对定位，以整个网页为坐标系
相对其它元素可以随意调整位置，但位置依然在	脱离文本流，位置已然不存在
总是相对于最近的父元素定位，而不论其父元素是何种定位方式	，参照的是最近的、position值设置为relative或者absolute的元素来进行定位

对于老师说的为什么要父元素用relative，子元素才能用absolute的说话

在设置父级元素position属性的时候，将其设置为static(其实默认值即为static)，其中的子元素将像第一种情况一样定位；如果将父级元素的position属性设为absolute，那么将会破坏父级元素的原来的布局，父级元素将会以父元素的父元素为参照，并根据top等值进行定位；只有在将父级元素的position设置为relative时，才不会破坏这个父元素的布局，而且其中的子元素将参照父元素的左上角，通过top等属性值来对子元素定位

私有云专线服务迫不及待它的访问地址为 python ?却? 亲却服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112202.html

数据中心运维祖训“没有折腾，就没有故障”

摘要：数据中心运维也喜静不喜动，少动慎动，这能最大程度减少故障发生。不过，的确是应该最大限度地去主动降低数据中心操作频率，尽量少动，这样可极大降低故障发生概率。作为数据中心的运维人，要时刻牢记祖训。没有折腾，就没有故障这句话虽糙，但却很有道理，尤其在运维上。据有关咨询机构统计，数据中心的故障中有百分之七十是人为故障，也就是与人的活动强相关，可见人对于数据中心来说是多么可怕。人为故障其中也可以分为有...

FleyX 2019-04-28 19:36 评论0 收藏0
游戏虽易，游戏云不易，且行且珍惜

摘要：发布会选在了高大上的北京盘古七星酒店，创业邦杂志手册茶馆游戏葡萄等十余家行业媒体和上百名游戏云计算行业知名人士出席。借用即将流行的一句话作为本篇的结尾游戏虽易，游戏云不易，且行且珍惜。结束了半个多月的北京之行，UCloud市场部的女汉子们和男苦力都回到了上海大本营。回首这半个月的活动犹如过江之鲫。今天就简单回顾一下3月份的活动。 0320：UCloud移动游戏开发者沙龙这是今年U...

CoffeX 2019-06-28 10:47 评论0 收藏0
“蝉原则”与CSS3随机多背景随机圆角等效果

摘要：那蝉原则对我们网页设计有什么启示呢那就是可以以最小成本实现更自然的随机效果。本文就演示两个借助蝉原则和特性实现随机效果的例子。一、什么是蝉原则？蝉原则，英文称作cicada principle，是一种让事物的重复出现符合自然随机性的规则，为什么这么说呢？蝉原则源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7...

crossoverJie 2019-04-23 13:44 评论0 收藏0
由浅入深的前端面试题和矫情的“浪漫主义”诗句

摘要：好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人，其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。传统的佛学经典里，被世人熟知的有这样一句话：一花一世...

JerryZou 2019-08-21 11:33 评论0 收藏0
由浅入深的前端面试题和矫情的“浪漫主义”诗句

摘要：好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人，其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。好吧，我承认太标题党了，这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。传统的佛学经典里，被世人熟知的有这样一句话：一花一世...

lk20150415 2019-08-01 16:27 评论0 收藏0