body背景图片(自适应屏幕大小)
20190122,再次使用之前的发现不行,总是提示invalid property value。后来发现是空格的问题,复制后background这一行每一个空格都要重新敲一遍,包括前面的四个空格!!!
html,body { height:100%; overflow:hidden;} /*body的高度和宽度为屏幕大小*
body{margin:0;padding:0; list-style:none;}
body{ background:url(./image/bd.jpg) no-repeat center fixed; background-size:100% 100%; }
移动端开发一定要加上
<meta name="viewport" content="width=device-width, initial-scale=1">
白色透明蒙版,白色透明边框
background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3)
背景图片距离右侧10px(登录框密码框右侧的小图标)
background:url(./image/user.png) no-repeat right 10px center;
将某个div放在底部
#bottom_div{ position: fixed; bottom: 0px; width: calc(100% - 30px); } <!--为了防止覆盖上一个div的内容,可以将上一个div的padding-bottom的值设为底部div的高度--> #pdsaomaPackList{ padding-bottom: 127px; }
让div在父容器中居中
第一种,要写死高度和宽度
800px; height: 454px; position: absolute; /*父容器的position要为relative*/ left: 50%; top: 50%; margin-left: -400px; /*为div的width的一半*/ margin-top: -227px; /*为div的height的一半*/
第二种,不需要高度和宽度,但是不兼容IE7一下
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
第三种,用css3的transform和position配合
.parent{ position:relative; } .child{ position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50%); }
子DIV在父容器中垂直居中
margin: 0 auto; /*水平居中*/ position: relative; top: 50%; /*向下偏移父容器的50%*/ transform: translateY(-50%); /*向上偏移自身的50%*/
子元素跟父元素的高度一致
.parent{ position: relative; } .inner-right { position: absolute; top: 0; right: 0; height: 100%; overflow: auto; }
【absolute:绝对定位】
默认参照浏览器左上角,配合TOP、RIGHT、BOTTOM、LEFT(以下简称TRBL)进行定位,具有以下属性:
(1)无TRBL的情况下,参照父级左上角;无父级,参照浏览器左上角;无父级元素,但存在文本,参照最后最后一个文字的右上角为原点但是不断开文字,覆盖与上方。
(2)如果设定TRBL,并且父级没有position属性(不论是absolute还是relative),都是默认以浏览器左上角开始定位,位置由TRBL决定。
(3)如果设定TRBL,并且父级有position属性(不论是absolute还是relative),默认以父级左上角为原点开始定位,位置由TRBL决定。
以上三点我们就可以总结出:若想使用absolute进行定位,那我们就要明确两点:
第一:设定TRBL
第二:父级设定position属性
【relative:相对定位】
默认参照父级原始点为原始点;如果无父级,以文本的上一个元素的底部为原始点,配合TRBL进行定位;当父级内有padding属性时,参照父级内容区的原始点进行定位。
(1)不存在TRBL,参照父级左上角;没有父级,参照浏览器左上角;没有父级元素,但是存在文本,则以文本的底部为原始点进行定位并将文字断开。
(2)设定TRBL,并且父级没有设定position属性,以父级左上角为原点进行定位
(3)设定TRBL,并且父级设定position属性,以父级左上角为原点进行定位,但是如果父级有padding属性,那么以内容区域的左上角为原点进行定位。
综上所述,relative均以父级左上角进行定位,但是受padding的影响。