css开发记录之固定图片宽高比

图片宽高比固定

例子：

padding-bottom
position

注意点：

1. 对图片的容器进行设置，宽度可以自己设置为A，高度设置为0，此时这个容器因为没有高度就啥也没有
2. 图片设置自己的宽高，图片自己设置宽高都是100%，是相对于它的容器的宽高的

padding-bottom

padding-bottom的值是百分比的话，表示的是其父布局的宽度的百分比，意思是容器要相对于bottom有多少留白空间。

上面的例子中，容器的width是父布局的宽度百分比，padding-bottom也是父布局宽度百分比，一样的话这个容器的宽高就是1：1

position

默认值static

官方解释是：

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

简单来说，你写的每一个没有指定position属性的控件都可以看做是position默认static的，此时写left，top等无意义

relative

假设值是relative的时候：

官方解释是：

生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

意思就是相对于正常位置，通过left等来设置偏移

比如：下面这部分代码，父布局指定flex，纵向


效果：流布局在image-container下面，因为设置了left，所以从左侧偏移20像素开始

absolute

直接位于父布局左上角开始绘制（限制是父布局不能设置position为static），效果

如果设置right而没有设置left：


left和right都设置的时候，只取left

fixed

官方解释：

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

测试得出的结论：其实是相对于整个页面内容所占的范围而言，比如你内容1000px宽，1600px高，那么righit，top都为0的时候，表示位于整个页面的右上角

z-index

表示当前控件要位于其他控件的前面还是后面，是z轴。-1表示在后面，1表示在前面

class标签多个值

中间用空格分割，如下

那么这个class就可以使用到两个style