CSS3-盒模型基本样式

来源：互联网发布：dm500刷机软件编辑：程序博客网时间：2024/06/08 01:30

padding

padding 内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景，background-position的原点是padding的左上角)
padding-top
padding-right
padding-bottom
padding-left

可视宽(高)=border+padding+width(height);

margin

margin 外边距(margin元素的边框之外不显示元素背景)，上下左右
margin:10px 20px; 上下，左右
margin:10px 20px 40px;上，左右，下
margin:10px 20px 40px 60px;上，右，下，左
margin-top
margin-right
margin-bottom
margin-left

margin叠加相邻两个元素的上下margin是叠加在一起
这里写图片描述

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0px;padding:0px;}.box1{background:red;width:100px;height:100px;margin:30px;border:10px solid #000;}.box2{background:blue;width:100px;height:100px;margin:40px;border:10px solid #B4A6A6;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>

margin布局

这里写图片描述

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0px;padding:0px;}.box1{width:100px;height:100px;background:red;margin-left:auto;}</style></head><body><div class="box1"></div></body></html>

从上个例子我们可以知道，auto的意思是尽可能的占用空闲空间。
下面经过多次试验总结:
margin:0 auto;左右有效果，能够居中。但是对于上下，上边有效果，下边却没效果。
margin:auto;左右有效果能居中，上下没效果。距离上边距和margin:0 auto;是一个效果。
和padding的设置效果不一样。

练习:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0px;padding:0px;}.box{width:380px;border:1px solid #999;padding:9px 10px 10px;font:14px "宋体";text-indent:2em;margin:100px auto;color:#666;}.box .b-b1{width:340px;padding:0px 20px 12px;border-bottom:1px dashed #999;line-height:30px;}.box .b-b2{width:340px;line-height:24px;padding:12px 20px 0px;}</style></head><body><div class="box"><div class="b-b1">从上个例子我们可以知道，auto的意思是尽可能的占用空闲空间。下面经过多次试验总结。</div><div class="b-b2">padding 内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景，background-position的原点是padding的左上角)</div></div></body></html>

总结:一般模仿别人写东西的时候，左边和右边的间距一般是对称的。这是经验。上边和下边不一定对称。如果左边和右边多出来那么几个像素点一般是字体无法在那几个像素中被容纳。

0 0