CSS是能实现的,不过有点麻烦。大概是这么实现:
在HTML中为需要“向右偏移15%+22px”的div加上两个辅助定位的div:
<div id="outer"><div id="theMiddel">
<div id="div"></div> <!-- 目的:此div向偏移15%+22px -->
</div>
</div>
2. 在CSS中,首先使最外层的<div id="outer">使用相对定位position:relative,占据15%的父元素的宽度(即width: 15%),高度与目标<div id="div">一样;
3. 在CSS中,使以下两个div
<div id="theMiddel"><div id="div"></div> <!-- 目的:此div向偏移15%+22px -->
</div>
假设目标<div id="div">的宽度是50px。
<div id="theMiddel">使用绝对定位,定位到最上边最右边,这时候目标<div id="div">的位置就是:向右偏移15%减去目标<div id="div">的宽度(15% - 50xp)。
4. 目标<div id="div">使用绝对定位,然后right: -(50 + 22)px。这就是向右偏移15%+22px。
以下代码详细实现
向右偏移15%+22px.html 文件代码清单如下:
<!doctype html><html langj="zh">
<head>
<meta charset="utf-8">
<title>向右偏移15%+22px</title>
<link rel="stylesheet" href="marginRight.css">
</head>
<body>
<p>CSS绝对定位:向右偏移15%+22px</p>
<div id="outer">
<div id="theMiddel">
<div id="div"></div>
</div>
</div>
</body>
</html>
marginRight.css 文件代码清单如下:
#outer {position: relative
width: 15% /* 用宽度15%定位到15%位置 */
height: 50px /* 这行可以去掉,现在是为了看清偏移情况 */
background: rgb(220, 220, 220)/* 这行可以去掉,现在是为了看清偏移情况 */
}
#theMiddel { /* 中间部分使目标div移动到15%位置的最右边 */
position: absolute
top: 0
right: 0
}
#div {
position: absolute
right: -72px
/* 偏移量是:目标div的宽度加上22px。如果目标div宽度变化,这行自己相应变化 */
width: 50px
/* 目标div的宽度,自己设定,如果变化,上一行的负偏移量也要改变 */
height: 50px
background: rgb(18, 48, 168)
}
定义一下padding-left的值就可以了,例如下面这样:文字文字文字~~
文字文字文字~~
文字文字文字~~
不过这样的副作用是div里面的其他元素也会向右偏移。所以也可以把padding定义在段落里面,例如
文字文字文字~~
这是直接把css写在html里面的作法,把它写在css文件里面也可以的,我想你应该知道怎么做的,就不详细说明了~~
1、打开sublime text3,并且新建一个html文档和一个css文档。
2、把最基本的html框架写出来。
3、在html的head部分写上编码字符集并引入css文件。
4、在html的body里面写一个div,打上文字并设置一个class名。
5、在浏览器中打开,查看现在的效果。
6、我们直接在选择的div的class名里面加一个“margin: 0 auto”属性保存。