CSS盒模型等/外边距合并

圆角边框:
border-radius:左上 右上 右下 左下

盒子的居中对齐:margin:0 auto;
行内元素没有上下外边距和内边距
外边距合并问题,两个块级元素分别margin-botton 100  margin-top 50 那么空隙大小就是100,   避免即可
嵌套元素外边距,有外边距塌陷问题。
<div>
    <div></div>
</div>
如果内部div指定了margin-top 50px 则外面的div会下移50px,内部的div在内部不动
解决方案:1、给大盒子一个外边框 border:1px solid red;
         2、触发BFC 给大盒子加一个overflow:hidden;
计算宽度
div{
	width:74px;
	height:33px;
	line-height: 33px;
	border:1px solid #C1C1C1;
	margin: 200px;
	padding-left:15px;
	/*74+15=89 */
	/*74-15=59 */ 
}
宽度想要最终盒子74px,里面padding-left 15 会把盒子撑大15px也就成了89,办法就是之前宽度就给它指定74-15,这样你撑开15正好是74
*如果一个盒子没指定宽度、高度就不会被影响;继承来的宽高也不会被影响。
CSS3盒模型
可以通过box-sizing指定盒模型,可以指定为content-box、border-box这样计算盒子大小的方式也发生了改变。
1、box-sizing:content-box 盒子大小为:width+padding+border
2、box-sizing:border-box  盒子大小为:width   就是说padding和border是包含到width里面的。

发表评论

邮箱地址不会被公开。 必填项已用*标注