前端小技巧(一)

最新推荐文章于 2025-06-25 23:16:36 发布

原创最新推荐文章于 2025-06-25 23:16:36 发布 · 832 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

WEB前端专栏收录该内容

24 篇文章

订阅专栏

CSS常用的一些设置小技巧

几乎经常用到

一、特殊情况下position的定义

比如这个例子，背景是张图片，输入框，提交按钮、以及下边的六个按钮的单击事件都是固定在图片之上的。

(图1) (图2)

设置技巧：

1）背景用的是background:url();链接的图片

2）将背景设置position:relative; 背景之上的元素设置position:absolute;并设置相应的left,top值；

3）一般弹窗都会使元素上下、左右都居中显示，这时position属性应定义为fixed;

★ 解决定位问题——>>见图1

<span style="font-size:18px;color:#333333;"><div class="back-box">
	<div class="six-wrap">
		<a class="six first" onclick="show(1)"></a>
		<a class="six second" onclick="show(2)"></a>
		<a class="six third" onclick="show(3)"></a>
		<a class="six forth" onclick="show(4)"></a>
		<a class="six firth" onclick="show(5)"></a>
		<a class="six sixth" onclick="show(6)"></a>
	</div>
</div></span>

<span style="font-size:18px;color:#333333;">.back-box{<span style="color:#ff0000;"><strong>position:relative;</strong></span>width:640px;height:1703px;background:url(img/back.jpg) no-repeat 0 0;-webkit-background-size:640px auto;overflow:hidden}
.six-wrap{width:514px;height:380px;<span style="color:#ff0000;"><strong>position:absolute;</strong></span>left:64px;bottom:65px}
.six{cursor:pointer;<span style="color:#ff0000;"><strong>position:absolute;</strong></span>width:140px;height:156px;top:0;left:0}</span><span style="font-size:14px;">
</span>

★ 解决弹窗定位问题——>>见图2

<span style="font-size:18px;color:#333333;"><div class="wrapper">
	<div class="one six-wrap"><h3 class="six-title">1</h3></div>
	<div class="two six-wrap"><h3 class="six-title">2</h3></div>
	<div class="three six-wrap"><h3 class="six-title">3</h3></div>
	<div class="four six-wrap"><h3 class="six-title">4</h3></div>
	<div class="five six-wrap"><h3 class="six-title">5</h3></div>
	<div class="six six-wrap"><h3 class="six-title">6</h3></div>
</div></span>

<span style="font-size:18px;color:#333333;"><pre name="code" class="css">
</span>

<span style="font-size:18px;color:#333333;">.wrapper{width:526px;height:650px;top:85%;left:50%;margin-left:-282px;margin-top:-677px;padding:20px;</span>

<span style="font-size:18px;color:#333333;">color:#fff;background:#549DFC;overflow:hidden;
<span style="color:#ff0000;"><strong>position:fixed;</strong></span>border:solid 3px #0f5ec8;border-radius:10px;z-index:100}
.six-wrap{line-height:37px;padding:15px;text-align:justify;z-index:100}</span>

</pre><p></p><pre>

备注：针对要弹出的窗口使用position:fixed;属性，此时的fixed属性比position:absolute；要管用的多，为了兼容移动端各尺寸，用fixed只设置top,left，即可兼容，如果使用absolute,则兼容性不如fixed好调一些。

二、background:url()；<img>标签分别在什么时候使用

背景图片一般用background:url();像上边的例子背景就用的background设置兼容性更好些，加载图片时也具有整体性(图3)。

装饰图片一般用<img>标签，上图中提交按钮，就可以用img标签设置(图4)。

(图3，图4)

三、巧用伪类

1）下边的例子中，文字下边的红色下划线用:after伪元素就实现的比较好。

<span style="font-size:18px;color:#333333;">.underline:after {
    content: " ";
    position: absolute;
    background-color: #ffdcfd;
    left: 0;
    bottom: -2px;
    height: 7px;
    width: 100%;
    z-index: -1;
}</span>

2）下边这种，左右箭头<>，用:after,:before实现起来比较方便。

<span style="font-size:18px;color:#333333;">.duotive-modal .pp_arrow_previous:before {
    content: " ";
    width: 15px;
    height: 17px;
    top: 32px;
    bottom: 0;
    margin-right: 18px;
    background: url(../img/left-arrow.png) no-repeat center center;
    background-size: 75%;
    display: inline-block;
}
.duotive-modal .pp_arrow_next:after {
    content: " ";
    width: 15px;
    height: 17px;
    top: 32px;
    margin-left: 18px;
    background: url(../img/right-arrow.png) no-repeat center center;
    background-size: 75%;
    display: inline-block;
}</span>

3）特殊情况下，hover和伪类一起使用 .div a:hover::after{}

一般导航条hover时用这种伪类结合伪元素用的较多

<span style="font-size:18px;color:#333333;">li.menu-item a::after{
    content: " ";
    position: absolute;
    display: block;
    width: 0;
    left: 50%;
    bottom: 0;
    border-bottom: solid 2px #FF9800;
    opacity: 0;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
}
li.menu-item a:hover::after{
    opacity: 1;
    left:0;width:100%;
}</span>

四、flex布局在什么时候用最合适

推荐大家一个flex效果现成的网站，根据想要的效果，直接生成代码。

http://flexboxin5.com/

大概说下flex的常用功能吧，如下：

<span style="font-size:18px;color:#333333;"><div class="flex-container">
	<div class="flex-items-default flex-item-1"></div>
	<div class="flex-items-default flex-item-2"></div>
	<div class="flex-items-default flex-item-3"></div>
	<div class="flex-items-default flex-item-4"></div>
	<div class="flex-items-default flex-item-5"></div>
</div></span>

<span style="font-size:18px;color:#333333;">.flex-container{
	display: flex;
	/*flex容器方向主要有水平和纵向两种,纵向显示为column*/
	flex-direction: row;
	/*flex项目在容器中按一行或多行排列,多行wrap,一行nowrap*/
	flex-wrap:wrap;
	/*flex项目在容器水平方向显示的对齐方式。
	flex-start,flex-end,center,space-between,space-around*/
	justify-content: center;
	/*flex项目在容器垂直方向显示的对齐方式。
	flex-start,flex-end,center,space-between,space-around,stretch*/
	align-content: center;
	/*flex项目在容器垂直方向显示的对齐方式。
	flex-start,flex-end,center,baseline,stretch*/
	align-items: center;
}
.flex-items-default{
	width:300px;
	height:250px;
}</span>

不适合用flex布局的页面：

请仔细对比下，上下两张图片的区别，flex布局，适合单行应用，如果多行，上下左右都居中，且多行item是左对齐，向下边这种，左右，上下距离相等，且每小项换行时都是居左的，flex就做不到这种布局。

这时就要利用@media兼容不同尺寸的分辨率了。

这里简单列举下几个pc端常用的尺寸设置：

<span style="font-size:14px;">      </span><span style="font-size:18px;color:#333333;"> ol.layouts {
		padding:0;
		max-width: 2000px;
		margin: 0 auto
	}

	@media screen and (max-width: 2059px) {
		ol.layouts {
			max-width: 1750px
		}
	}

	@media screen and (max-width: 1809px) {
		ol.layouts {
			max-width: 1500px
		}
	}

	@media screen and (max-width: 1559px) {
		ol.layouts {
			max-width: 1250px
		}
	}

	@media screen and (max-width: 1309px) {
		ol.layouts {
			max-width: 1000px
		}
	}

	@media screen and (max-width: 1059px) {
		ol.layouts {
			max-width: 750px
		}
	}

	@media screen and (max-width: 809px) {
		ol.layouts {
			max-width: 500px
		}
	}

	@media only screen and (max-width: 870px) {
	    .wrap-inner {
	        padding:15px;background:none;
	    }
	}
	@media screen and (max-width: 520px){
		ol.layouts li.group{
			width:47.5%;
			margin:0 5% 5% 0;
		}
		ol.layouts li.group:nth-of-type(2n){
			margin-right:0;
		}
		ol.layouts li ul.tools{display: none;}
	}</span>