2018年4月22日 关于近期写小米商城遇到的前端问题的总结

1.绝对定位与相对定位的区别,在使用时会相互影响。

什么是绝对定位和相对定位:

absolute 绝对定位使元素的位置与文档流无关,因此不占据空间。

absolute 绝对定位的元素可以和其他元素重叠。

上面的效果是通过简单地使用一个应用了clip-path属性的元素来完成的。

.clipClass{
  -webkit-clip-path:polygon(0100%, 50% 0, 100% 100%);
}

首先,和位置属性非常相像,我们需要考虑XY的值。X:0 以及 Y:0 表示从元素的左上角开始,并从那里移动。 X:100% 表示元素右边, Y:100% 表示元素的底部。

Got it~所以,上面创建的路径,它实际上创建了如下的点:

x: 0, y:100%
x: 50%, y: 0
x: 100%, y: 100%

这条简单的路径从左下角的坐标点开始,水平移动到50%的位置,然后垂直向上到达顶部的坐标点,接着水平移动到100%的位置,最后垂直向下回到底部,到达第三个坐标点。这样子用三个点就完成了一个三角形!

所以边界之外的所有东西都会被直接剪裁,无法显示。而元素本身仍然保持其尺寸,只是它的表示层改变了。

在用百分号来定义宽度和长度时,绝对定位的盒子会找离他最近的相对定位的盒子为父,如果都没有,那就一body为父,所以使用百分号和定位一定要注意。

使用绝对定位时,如何想改变盒子的外边距可以用top,left,bottom,right来做规定,当四个属性值都为零时就是盒子居中了。

使用相对定位则要利用margin-top,margin-bottom,margin-left,margin-right来规定外边距。


2.关于浮动的使用

在我做小米网页时,遇到了这样的问题,有时盒子内部的浮动会影响到盒子外部的浮动,遇到这样的情况可以给盒子加上overflow属性,属性值为hidden.

3 关于块标签和内敛标签

块标签默认情况下会单独占用一行,内敛标签则是接着前面的元素的后面不会换行,但是当我们给他定义display:block时,他就会变得跟快标签一样,拥有快标签的各种属性。

4 关于透明的使用

透明我暂时接触到两种,一种是背景和盒子里面的内容全透明,一种是只透明背景,但是盒子里面的内容不会透明,在我写网站时遇到这个问题,想了好久才解决。如果只是背景透明,那么我们可以给background设置rgba()的颜色属性值,其中rgb代表了颜色,而a则代表了透明度,默认的透明度是1。全透明为0。

5 实现按压效果

主要是利用css里面的选择器active(活动链接) 在选择器里面写transfrom属性让他旋转:当transalteY(2px)表示向上移动两个px,当点击事件结束时就会恢复原样这样就实现了按压的效果。


6 单行或多行文本的垂直居中问题

 line-height的约束条件,它只适合给里面只有一行字的盒子设置上下居中,当超过一行字时就会出现错误。

那么如何实现多行字体居中呢:

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的 
padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下 
面的代码: 如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的 
padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

多行文本固定高度居中

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素: 这个方法应该是很理想了,但是不幸的是InternetExplorer6并不能正确地理解display:table和display:table-cell,因此这种方法在InternetExplorer6及以下的版本中是无效的。

阅读更多
换一批

没有更多推荐了,返回首页