css样式(初学者笔记)

最新推荐文章于 2024-08-09 06:13:01 发布

weixin_30426065

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量118

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/tangwaikei/articles/4405318.html

版权

.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元素在同一高度排列

转载于:https://www.cnblogs.com/tangwaikei/articles/4405318.html

weixin_30426065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式(初学者笔记)

.div{ border-radius:50%;}　　.img{background-size:cover;　　//完全显示图片，并且超出隐藏background-position:50% 50%;　　//完全在外框　显示原图中间的部分 } <!--这样可以将图片的中心位置按外部框的百分比居中位置显示，即以外框为参...
复制链接

扫一扫