Home  >  Article  >  Web Front-end  >  css 负边距 小记_html/css_WEB-ITnose

css 负边距 小记_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:30:441307browse

水平格式化

  当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 margin会增加宽度  W3C标准盒模型  内边距 外边距  边框的宽度都会增加元素的宽度 )  下面我以W3C标准盒模型来讨论负边距对元素的影响 

#test {            width:200px;            background: red;            padding: 20px;            border:10px solid black;            margin: 20px;       }        <p id="test">aaa</p>

上面这个p元素占据的宽度值    =   margin(left+right) + padding(left+right) + border(left+right) + contentwidth    = 20*2 + 20*2 + 10*2 + 200 = 300px

正常流中的块级元素框的水平部分总和等于父元素(父元素一般也为块级元素)的width

在这影响元素的宽度值的7个属性中 只有3个值能设置为auto  元素的contentwidth margin-left margin-right   在说负边距之前还是要对auto进行一下说明

(1)正常的情况下直接设置这三个属性的和等于父元素的宽度

(2)设置auto值的时候 会根据其他的值 自动的使总和等于父元素的宽度值   

#test {            width:200px;            background: red;            margin:0 auto 0 100px;        }            div {            width:500px;        }        <div><p id="test">aaa</p></div>

上面的例子 我们设置父元素的包含元素 margin-left:100px    margin-right:auto   width:200px    父元素的宽度为500px

发现右边距自动的变成了200px   

2.1  左右边距均为auto  width为一定宽度  会将父元素剩余的内容宽度(父元素的内容宽度-子元素的内容宽度) 平均的分配给margin-left margin-right 实现子元素在父元素的居中

2.2  一个外边距为auto 子元素的width为auto   另一个外边距为定长

#test {            width:auto;            background: red;            margin:0 auto 0 100px;        }            div {            width:500px;        }        <div><p id="test">aaa</p></div>

此时设置为auto的外边距会变成0 width会自动的填充剩余的值(尽可能的宽)

2.3 如果都设置为auto    那两个外边距会变成0  子元素的宽度会变成父元素的内容宽度

下面我们来考虑负边距的情况  

     

#test {
  width:auto;
  background: red;
  margin:0 -150px 0 100px;
}
div {
  width:500px;
}

     


aaa

 

上面的例子中父元素的内容宽度为500    子元素的宽度为auto  margin-left为100 margin-right为-150px       我们看一下它实际的内容宽度的值

550 > 500  也就是我们子元素的宽度超出了父元素的内容宽度     其实这是可以的          100 + auto(550) + (-150)  = 500   auto为了满足总的宽度之和等于父元素的内容宽度  变成了550

在考虑负边距对元素的影响的时候,浏览器会认为负边距缩小了元素的宽度  实际上元素的宽度是没有变化的

p {            background: red;            display:inline-block;            width:100px;            margin-right: -20px;        }                <p>aaaaaaa</p><span>aaaa</span>

上面的例子中元素的宽度实际上还是100  但是由于负边距的设置 浏览器认为它的边界变小了 后边的元素就流进了它的里面

下面的图是没有设置margin-right为负的情况

不同于position:relative   position:relative  会使元素相对于原来的位置在文档流中偏移 但是不会丢失原来文档流的位置 

具体的应用可以参考

参考   CSS权威指南

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn