部分项目案列总结

Mannero

于 2019-08-26 20:39:37 发布

阅读量196

点赞数 1

分类专栏：总结项目技巧前端

本文链接：https://blog.csdn.net/weixin_45100039/article/details/100085451

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

项目技巧

5 篇文章 0 订阅

订阅专栏

总结

4 篇文章 0 订阅

订阅专栏

部分项目案列总结:

背景色与背景图共存问题:

<style>                      			 	 /*css样式*/
        .box{								 /*给原盒子添加背景颜色*/
            width: 400px;
            height: 400px;
            border: 1px solid #f40;
            margin: 100px auto;
            position: relative;
            background: linear-gradient(to right top,#000,rgb(143, 0, 76));

        }
        .box::after{                      	/*添加伪元素,给伪元素添加背景图片*/
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("./bs.png") center ;
        }
</style>

<body>
    	<div class="box"> </div>
</body>

元素在盒子里面居中

//方法一:利用定位加margin
//css样式
<style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid #f40;
            margin: 100px auto;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
           	margin-left: -50px;
           	margin-top: -50px;            //margin影响效率            
        }
</style>

//html结构
<div class="father">
        <div class="son"></div>
</div>

//方法二:利用定位加transform:translate(-50%,-50%)
//css样式
<style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid #f40;
            margin: 100px auto;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);     
        }
</style>

//html结构
<div class="father">
        <div class="son"></div>
</div>

//方法三:利用弹性盒子
<style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid #f40;
            margin: 100px auto;
           	display: flex;                //利用弹性盒子
            justify-content: center;      //横轴对齐方式
            align-items: center;  		  //纵轴对齐方式
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;   
        }
</style>

<div class="father">
        <div class="son"></div>
</div>

Mannero

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
部分项目案列总结

部分项目案列总结:背景色与背景图共存问题:<style> /*css样式*/ .box{ /*给原盒子添加背景颜色*/ width: 400px; height: 400px; border: 1px solid #f40;...
复制链接

扫一扫

专栏目录