CSS让百分比和px一起使用

发布网友

共14个回答

热心网友

在CSS中，百分比和px可以一起使用，代码如下：

left: calc(10% + 10px)

.class { width: calc(50% - 100px);
}

注意：设置完left: 10px; 后使用 padding-left: 10px; 盒子内部向右移动10px，如果让盒子整体移动，用margin-left: 10px;

扩展资料：

px的特点：

1、IE无法调整那些使用px作为单位的字体大小；

2、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3、Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核；

4、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,可以定宽、定高；

5、em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸；

热心网友

用js解决定义变量赋值行
用css解决比较麻烦简单说思路吧
三div
第二相与第left：10%
第三相与第二left：10px
第三相与第left：10%+10px

热心网友

left: calc(10% + 10px);
要求浏览器必须支持css3，另外+号两边一定要有空格

热心网友

首先：left:10%+10px 是不行的，行不行其实很简单测试下就O了
其次：左右移动有几种方式可以做到：margin padding 定位后的left right等，一般都是组合使用的
再次：你这个需求有点类似响应式，这个你可以使用媒体查询@media

热心网友

用js可以解决，定义变量赋值就行了
用css也可以解决就是比较麻烦，简单的说一下思路吧，
三个div
第二个相对与第一个left：10%
第三个相对与第二个left：10px
那第三个就相对与第一个left：10%+10px了

热心网友

两个方案：
（1）写成11%：把10px转换成百分比
（2）把10%转换成px,反复测试几次数据，就能得到**px
望采纳！

热心网友

设置完left: 10px; 后使用 padding-left: 10px; 盒子内部向右移动10px，如果让盒子整体移动，用margin-left: 10px;

热心网友

1、用 less，可编程的css，具体请百度 less css；
2、js来控制，先用10%，用js获取坐标，加10px位移；
3、left:10%; margin-left:10px; 效果不佳可以做2层嵌套div，外层10%，内层margin-left:10px （建议）追问js怎么控制

热心网友

结合js来做，具体思路：

js计算出浏览器宽度的10%，会得到一个px值，用这个值加10px后再用js把总值写到样式中追问给个实例

热心网友

两层嵌套
<div class="wrap">
<div class="content"></div>

</div>

.wrap{ left: 10%; padding-left: 10px;}
外层定位用，内容放在内层追问不止是位置，还有高度宽度！！

热心网友

left:10%; 配合 margin-left:10px; 使用，应该可以达到效果

热心网友

<div style="height:100px; width:200px; background:red; position:absolute; left:10%; margin-left:10px;"></div>追问不止是位置，还有高度宽度！！

热心网友

left:calc(10%+10px)

热心网友

采用css中的calc写法，参考网页链接