div{ /*实现了宽度为父容器宽度减去固定的100像素*/ width:-webkit-calc(100% - 100px); width:-moz-calc(100% - 100px); width:calc(100% - 100px);}
工作
中
用到,
百分比
宽度
减去
固定
宽度
的
写法
记录一下:
使用场景:
宽度
100%-
固定
值布局.(高度设置同理)
width:calc(100% - 300px);//
height:calc(100% - 300px);
在编写
css
时,经常使用
百分比
响应适配,但是时常需要
减去
一部分达到目的,尤其是position:absolute时。所以需要在
百分比
的基础上
减去
px。
css3
已有支持的方法:
height: calc(100%-44px)
在继承父容器高度的同时
减去
44px的高度
margin-left: calc(100% - 53px);margin-left:-webkit-calc(100% - 53px);margin-left:-moz-calc(100% - 53px);
width:calc(64%-15px);width:-webkit-calc(64% - 15px);width:-moz-calc(64% - 15px);margin-right:...
当我们需要在网页
中
插入图片时,为了保证图片的显示效果,通常会使用
CSS
来控制其
宽度
和高度。此时,如果我们希望图片能够等比例缩放,就可以采用
宽度
固定
、高度自适应的方式。
具体实现方式为,在
CSS
样式
中
设置图片的
宽度
为
固定
值,例如200px,然后将高度设置为auto或者不设置高度。这样,当图片的实际
宽度
超过200px时,其高度会自动缩放以保证比例不变。
另外,为了防止图片变形或失真,我们还可以将图片的display属性设置为block或inline-block,并给图片加上max-width属性,如max-width:100%。这样,当图片
宽度
超过容器
宽度
时,图片会自动缩放到容器
宽度
。
使用
宽度
固定
、等比缩放的方式可以让图片在不同尺寸的屏幕上都能够保持优秀的显示效果,不会出现变形或拉伸等问题,让用户可以更好地欣赏图片内容,从而提升网页的用户体验。
在浏览器加载完毕后,自动播放视频:出现play() failed because the user didn't interact with the document first.错误
11285