css3实现百分比宽度减固定宽度展现
2016-07-26 11:31
363 查看
使用css3的calc实现div宽度为父容器宽度减去固定的300像素。
需要注意的是calc(100% - 300px);里运算符号和数值内容间必须要有空格,像是calc(100%-300px);就没有效果了。
需要注意的是calc(100% - 300px);里运算符号和数值内容间必须要有空格,像是calc(100%-300px);就没有效果了。
<!DOCTYPE html> <html> <head> <style type="text/css"> body { width: 100%; max-width: 500px; margin: 0 auto; } .content { background: yellow; /*实现了宽度为父容器宽度减去固定的300像素*/ width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); width:calc(100% - 300px); margin: 0 auto; } </style> </head> <body> <div class="content">test</div> </body> </html>
相关文章推荐
- CSS样式
- Html与CSS快速入门02-HTML基础应用
- css3中word-wrap的用法?
- 利用正则表达式清除内嵌样式
- PostCSS一种更优雅、更简单的书写CSS方式
- 字体样式、文本样式、块级元素和行内元素、伪类、背景、列表
- 为a标签设置行宽高无效?
- CSS基础
- css继承样式怎么控制?用选择器
- DIV+CSS布局
- 为SeekBar滑块设置固定值以及自定义Seekbar,progressbar样式
- CSS高级技巧
- 十步图解CSS的position
- HTML CSS特殊字符总结
- JS+CSS 实现轮播图 (一)
- 单纯使用CSS实现下拉菜单
- Html-样式(css)基础记录
- CSS —— z-index与background重叠研究
- CSS box-shadow
- css中的伪类与伪元素的区别