css样式(初学者笔记) 

.div{
 border-radius:50%;
<!-- 确保是圆-->
}

　　

.img{
background-size:cover;　　//完全显示图片，并且超出隐藏
background-position:50% 50%;　　//完全在外框　显示原图中间的部分
 } 
<!--这样可以将图片的中心位置按外部框的百分比居中位置显示 ，即以外框为参考系，否则就是以原图为参考系，以外部框的大小去截取原图-->

　　

.img{
background-position:relative;
}
<!-- 对象补不可层叠-->

　　

<div class="mask">
    <div class ="info">
       <p>看这里</p>
    </div>
</div>

css:
.info{
margin-top:50%;    //最顶的文字在整个页面50%的高度
transform:translateY(-50%);    //文字相对自身提高50%的高度，
　　　　　　　　　　　　　　　　　　//使自身在父级mask里垂直居中
}
.pic{
//垂直居中
background:url() left top no-repeat;
margin-top:(H-h)/2;
//水平居右
float:right;
margin-right:xxx;
}

 

div{
margin:0 auto;　　　　// 0 是指上下边距为0，auto是指左右两边自适应，也就是水平居中了
}

margin:0 auto 在chrome，Firefox等主流的浏览器是可以实现水平居中的，但在IE浏览器里却需要再外边一层的div或者body里加 text-align:center,或者将文档的声明修改为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

    <body>
        <div style="background: red;width: 300px;height: 300px;float:left"></div>
        <div style="background: green;width: 200px;height:60px ;float:left"></div>
        <div style="background: yellow;width: 230px;height: 400px;float:left"></div>
    </body>

//float这个属性非常重要，可以使三个高度不相同的div元素在同一高度排列

posted @ 2015-04-10 11:47  tangwaikei  阅读(126)  评论(0)  编辑  收藏  举报