css中padding妙用小技巧-如多列等高效果

 浆糊之家   2018-06-16 10:21   467 views 热度值

一、CSS写自适应大小的正方形

代码:

效果图:

css中padding妙用小技巧-如多列等高效果

css中padding妙用小技巧-如多列等高效果

原理:

元素的padding的百分比数值是根据当前元素的宽度来计算的

padding只能取top或者bottom,自适应正方形其值要和宽一致,当然其他不同比例的矩形可以通过设置不同比例的padding就能得到


二、多列等高

代码:

效果图:

css中padding妙用小技巧-如多列等高效果

css中padding妙用小技巧-如多列等高效果

原理:

padding补偿法

在高度小的元素上加一个数值为正padding-bottom和一个数值为负margin-bottom,再在父级加上overflow: hidden隐藏子元素超出的padding-bottom

注:

  1. padding-bottom、margin-bottom之和要等于0(建议值不要太大,够用就行)
  2. 代码中子元素单位用em是为了做gif效果更明显

(用这个解决了很多布局问题)

 

 发表评论


表情