盒模型

css盒模型

• 设置边框

border-color:red;    /* 设置顶部边框颜色为红色 */  
border-width:10px;   /* 设置顶部边框粗细为10px */   
border-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */
可以总结为 border:10px solid red;

• 设置内间距

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */
上面的顺序是顺时针，依次是上，右，下，左
也可以为padding：20px 40px 50px 30px;

3、css元素溢出

• overflow的设置项

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。