CSS盒子,line-height,padding,margin,background,border

 盒子模型

• padding,margin,border都是可选的.
• padding,margin无法指定颜色,不能装饰.因为它们透明，所以会呈现背景颜色,图像.
• padding,margin的区别丿
• 所有元素:<p><title><blockquote><ul><ol><li><em>…都被当作盒子.

注意

1.区分margin与padding

margin 用来处理多个盒子的相邻距离.

padding又称"填充",指的是盒子里的内容与盒子四周之间的距离(填充)

2.增加p/b/m不影响内容区域的尺寸(w/h),但会增加元素框的总尺寸.如果要维持原尺寸不变,可适量减少w/h.

例:给一个盒子设置左右填充分别为10px和20px后，如果要求盒子在页面中占的总宽度不变，那么应该让盒子的宽度减少多少像素？

增加左右填充后会使盒子总宽度增加10px+20px=30px，因此应该把盒子的宽度减少30px，才能保证盒子在页面中占的总宽度不变

内容区行间垂直距离leading(读作ledding)

line-height:1.6em/120%/30px; 

• 在内容区中，内容与盒子边缘之间没有空间 

内容区四周使用相同的内边距

padding:25px;

也可单独限制padding-left:80px;

注意顺序，如果先用padding-left，那么padding对左侧实施的25px会被80px覆盖。

内容四周使用相同的外边距

margin:

也可单独限制margin-right:80px;

为元素增加背景图像

background-image:url(images/background.gif);                         url可以是完整的http， url 使用（）

• 对比  <imgsrc="/uploadfile/60.jpg" alt="图片显示失败将会显示alt内容" />  src 使用''

background-repeat:no-repeat

                                   repeat(repeat默认图像在水平和垂直方向上重复)

  repeat-x/y(图像只在水平/垂直方向上重复)

      inherit(按父元素的设置来处理)

background-position:top left/top/left/right/bottom/center

boder样式8种

border-style:  solid/dotted/dashed/groove(槽线)/ridge（脊线）/outset(外凸)/inset(内凹)/double

CSS边框圆角（注意这个不属于border-style.）

border-radius:15px;（可以用一个数指定4个角）

boder-方-向-radius:15px;

如boder-bottom-right-radius:15px;

CSS边框宽度

border-width:thin/medium/thick/1-6px;(不同浏览器对thin/medium/thick的大小可能定义不同，最好使用像素来指定)

CSS边框颜色（规则同字体颜色设置.）

border-color：red/rgb(100%,0%,0%)/#ff0000;

CSS指定某边边框

border-方-向-颜色/样式/宽度/圆角

border-top/left/right/bottom-color/style/width/radius:

例如

border-top-color:black;

来自慕课:

块级标签<div><ol><ul><li><p><table><h>都具备盒子模型的特征