元素的高度根据宽度动态设置

作者: 折木丶青梵 | 来源:发表于2019-03-18 20:06 被阅读0次

元素的高度根据宽度动态设置
CSS-尺寸样式属性
两栏布局
移动端隐藏横向滚动条
弹性盒
outerWidth、innerWidth、width
动态的适配UIlabel的宽高
元素布局
css盒子模型的宽度和高度
14.WXSS特性之响应式像素

occasionally我们只想设置图片的宽度，比方说宽度是一个百分比的时候。
那这个时候想要高度也根据宽度动态变化，就可以使用以下方式设置其样式

const imgs = document.querySelectorAll('.img');

[].forEach.call(imgs, (img) => {
    // 利用判断是否支持currentStyle（是否为ie: 只有ie使用currentStyle）来通过不同方法获取style
    const finalStyle = img.currentStyle ? img.currentStyle : document.defaultView.getComputedStyle(img, null);
    img.style.height = `${finalStyle.width}`;
});

元素的高度根据宽度动态设置
occasionally我们只想设置图片的宽度，比方说宽度是一个百分比的时候。那这个时候想要高度也根据宽度动态变化...
CSS-尺寸样式属性
代码：注意：标签不能设置宽高，因为span是行内元素，不可以设置宽度和高度。块级元素才能设置宽度和高度。
两栏布局
flex布局父元素设置 display:flex，固定元素设置固定的宽度和高度，另一个元素设置flex:1;宽度...
移动端隐藏横向滚动条
解决思路：父元素设置高度100px 并设置overflow：hidden，子元素高度= 父元素高度+滚动条宽度（8...
弹性盒
1、什么是弹性盒？弹性盒可以根据某些子元素设置的宽度或者高度自动为其他的子元素设置宽和高。 2、将元...
outerWidth、innerWidth、width
定义 width() - 设置或返回元素的宽度height()- 设置或返回元素的高度innerWidth() -...
动态的适配UIlabel的宽高
//宽度不变，动态设置label的高度 - (CGFloat)setLabelHeightWithSizeFont...
元素布局
块元素 1.独自占一行，可以设置宽度高度等行内元素 1.只占自己自身的大小。不可以设置宽度高度。行内块元素 1...
css盒子模型的宽度和高度
1内容的宽度和高度就是通过标签的width height设置的宽度和高度 2元素的宽度和高度宽度 = 左边框+左内...
14.WXSS特性之响应式像素
width:是用来设置元素的宽度 height:是用来设置元素的高度 position: 是用来设置元素它的定位方...