#CSS 盒模型 1.边框2.外边距问题及解决方法(1)兄弟关系外间距塌陷问题（2)父子关系外间距塌陷 3.overflow 4.CSS背景

一，边框

（1）.  border-width:边框的宽度

 注意：只写一个border-width设置不上边框的宽的，得写上边框的线型

（2 ）border-style：边框的线型   1.solid 单实线   2.double 双实线   

3.dashed 条状虚线    4.dotted 点状边框       5.none  没有边框

（3）border-color:边框的颜色 1.关键词   2.十六进制色值     3.rgb()    4.rgba()
          默认边框的颜色为元素本身的前景色

（4） 4.复合写法
          例子：
          border-color: pink； 一个值：四个边框
          border-color: pink gold; 两个值：上下边框  左右边框
          border-color: pink gold greenyellow; 三个值：上边框 左右边框  下边框
          border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)
          border-width和border-style同样效果

（5）上边框 单独设置
        border-top-width: 50px;
        border-top-style: solid;
        border-top-color: yellow;

单边框复合写法：
        border-left: 50px solid cyan;
        边框的宽度 边框的线型 边框的颜色

（6）边框的复合写法
        border:边框的宽度 边框的线型 边框的颜色

（7） 7.去掉边框 border:0;       border:none;

利用边框实现三角形 ，梯形

{ 盒子大小宽高为0
 要那个三角形，他的对边为none，他相邻的边框的颜色为透明色，transparent
 三角形}

{梯形       用边框实现梯形的规律
        盒子大小不能为零
         要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent}

二外边距问题及解决方法

（1）兄弟关系外间距塌陷问题
        现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；
        两个值一样大，取当前值
        两个值不同，取较大值
        原因：并列关系的两个元素共用了一个外间距区域
        解决办法：
        分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

（2）父子关系外间距塌陷
       现象：
       1.元素嵌套关系，子元素的margin-top值会叠加给父元素；
       2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；
       原因：
       父元素和子元素公用一个上外边距区域
       解决方法：
       1.为父元素设置上边框或者上填充
       2.为父元素设置overflo：hidden；
       3.转换思路，巧用padding，规避margin

三、overflow详解

概述：溢出元素内容区的内容会如何处理

取值

overflow: visible;溢出显示，默认值 overflow: hidden;溢出隐藏 overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示 overflow: auto;自动，内容溢出时，显示滚动条

overflow-x 只包括水平方向。          overflow-y 只包括垂直方向

四、CSS背景

（1）、background-color 属性，设置元素的背景颜色

（2）background-image 属性，为元素设置背景图像。

background-image:url(" 图片资源路径 ");

（3）background-repeat 属性，设置是否或如何重复背景图像。

常用的值

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

（4）

background-position 属性，设置背景图像（由 background-image 定义）的起始位置。

语法：background-position: xpos ypos;

一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定 了一个值，另一个值将是 50%。

取值

（5）

background简写

background是背景复合属性，在一个声明中设置所有背景属性。

语法：background:bg-color bg-image bg-repeat bg-position;

background: red url(“bgimage.jpg”) no-repeat left top;

• 当使用简写属性时，属性值的顺序为：:

  • background-color

  • background-image

  • background-repeat

  • background-position

如果某个属性不需要设置，可以省略。