一次在商城项目中学到，产品说所有的商品缩略图都要展示正方形 上代码 众所周知，一个元素要为正方形， 就可以了。可是，如果高度是不限定的呢？如何自适应的保持正方形呢？ 效果： 原理： 这是一个css小技巧： 当 padding bottom/padding top/margin top/margin ...
分类：
Web程序 时间：
2020-05-10 21:36:08
阅读次数：
328
利用图片的margin属性将图片水平居中，利用div的padding属性将图片垂直居中。 结构代码同上； css代码如下： div {width:300px; height:150px; padding-top:50px; border:#000 1px solid;} img {display:b ...
分类：
Web程序 时间：
2020-05-05 18:00:25
阅读次数：
64
需要实现如下效果 如果仅仅在.small里面加 margin-top的话，因为margin-top具有传递性，会传递到父元素上面，导致两个盒子同时向下移。 解决办法：1. 子元素加上margin-top后，在父元素上增加overflow:hiden； 2. 在父元素加上padding-top值，注意 ...
分类：
其他好文 时间：
2020-04-29 23:40:11
阅读次数：
67
<div class="img_box"> <img src="http://sms-shop.oss-cnbeijing.aliyuncs.com/${item.bannerpic.split(',')[0]}"/> </div> .img_box { position: relative; wi ...
分类：
其他好文 时间：
2020-04-01 16:28:51
阅读次数：
206
首先内边距基本格式 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 缩写形式 padding：上 右 下 左； 上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char ...
分类：
Web程序 时间：
2020-03-18 21:52:28
阅读次数：
121
<style> /*手机*/ @media screen and (max-width:600px){ .box_2 { padding-top: 45px; padding-bottom: 50px; /* background: #fff; */ /* 添加背景图片 */ background- ...
分类：
移动开发 时间：
2020-03-10 16:01:01
阅读次数：
63
1. padding/margin的百分比实现 padding-top/bottom，margin-top/bottom都是基于父元素的宽度为参照的，可以实现高宽比固定的盒子 .box{ width: 50%; padding-bottom: 30%; } 就实现了高宽比为3:5的盒子 然后设定im ...
分类：
其他好文 时间：
2020-03-10 11:48:48
阅读次数：
51
padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left 1、指定一个值时 该值指定内容到四个边的内 ...
分类：
其他好文 时间：
2020-02-23 09:18:12
阅读次数：
48
常见行布局： 导航使用position:fixed固定住 导航会脱离文档流，不占据空间 导致下面的元素上移，因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t ...
分类：
Web程序 时间：
2020-02-01 14:35:40
阅读次数：
92
padding:内边距，border:边框，margin:外边距一个padding属性，相当于padding-left,padding-right,padding-top,padding-bottom一个盒子加上padding,border,margin后，会将盒子撑大；border: 3px so ...
分类：
其他好文 时间：
2020-01-30 20:42:07
阅读次数：
60
