css负边距小记_html/css_WEB-ITnose

水平格式化

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

#test {            width:200px;            background: red;            padding: 20px;            border:10px solid black;            margin: 20px;       }        
aaa
 

上面这个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;        }        
aaa

      
查看更多关于css负边距小记_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110446