html-盒模型

1:css控制border的颜色为透明:

color_name 规定颜色值为颜色名称的边框颜色(比如 red)。
hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。

2:padding主要控制内部文字,margin用来控制布局位置。所以如果有一个父div里面有子div,那么是用父元素的padding,还是用子元素的margin呢?应该用子元素的margin,因为这是布局了,而且不是文字。调整div内部图片的位置用margin

3:padding的颜色从属于div的背景色

4:如果布局已经完成,这时候增加了padding,可能导致内部浮动div撑出父div,或者布局被打乱。也就是横向和竖向都会变化。这个时候要注意调整div的尺寸。

5:利用margin:0 auto实现元素的水平居中。此种方法不可用于竖直居中,因为竖直方向是无限的。

6:上下相邻的普通元素,他们的上下边距,不是普通的相加,而是取其中的较大值。同时如果这是浮动元素的话,就是相加了。那么如果是左右相邻的呢?他们就是margin合计起来的边距了。

7:

只设置子元素的margin,结果父元素一块移动了?

  所有毗邻的两个或者多个盒元素的margin会合并为一并共享之。毗邻的意思是同级或嵌套的盒元素,并且他们之间没有非空内容、padding或者border分隔。

看到这个就可以想到几个解决的方法了,一个是增加一个子元素的同级元素并放在该元素之前,也就是:

<div class="big">
    <div class="add">增加的内容</div>
    <div class="small"></div>
</div>

还有就是给父元素增加padding属性或者border属性(必须有类型属性哦!!),给子元素加是没有效果的。

当然还有其他的方法,比如父元素增加overflow:hidden属性,给父元素增加浮动或者position:absolute属性也是可以的。

原文地址:https://www.cnblogs.com/JingWeiBird/p/8497064.html