虽不是CSS3,可是它的寿命却不及他

一个严肃又严重的话题,做为公司里面的h5,不说别的知识如何,最起码个人CSS样式得过关吧,然而,最为今天的话题主义,很显然嘛,我并不合格,今天能够给本身打一个不合格的标签了布局

话题引入

因为后台数据的变动,但是个人样式并无作了那么多的判断,故此,个人问题来了,我须要作改变,因而我作了以下改变设计

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

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

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

以上用法解决了个人需求问题,因而可知,他能够将元素转换成inline-block行内块级元素,一样,也不须要知道元素的大小,可是,兼容性并非太好orm

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

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

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

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

以上是我一直以来用absolute的方式,就是使用position:relative之后才能使用absolute,至于为何本身也搞不明白,只是上课的时候老师是这么说的,我也就这么跟着作了table

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

对于老师说的为何要父元素用relative,子元素才能用absolute的说话form

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

相关文章
相关标签/搜索