8.29笔记

一.兄弟关系外间距塌陷问题

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

二.父子关系外间距塌陷问题
         1.当子元素设置上外间距时,此时子元素与父元素不会产生上外间距，上外间距会叠加给父元素
         2.当子元素和父元素都有上外间距时
         原因：
            父元素和子元素公用一个上外边距区域,子元素与父元素还是不会产生上外边距,此时父元素的上外间距取值:
           子元素与父元素上外间距的值一样大,取当前值
           子元素与父元素上外间距的值不一样大,取最大值
        解决办法：
        1.给父元素设置overline：hidden
        2.给父元素设置上内填充或者上边框
        3.规避margin，巧用padding

三.overflow详解

          溢出隐藏：overflow: hidden;
          溢出显示  默认值 ： overflow: visible;
          溢出显示滚动条 不管有没有溢出 ,都会显示滚动条： overflow: scroll;
          溢出自动 自动识别计算：overflow: auto;

四.overflow单方向

          水平方向的溢出情况
            溢出显示 ：overflow-x: visible;
            溢出隐藏 ：overflow-x:hidden ;
            溢出scroll：overflow-x: scroll;
            溢出auto ：overflow-x: auto;

           垂直方向的溢出情况 
            overflow-y: hidden;
            overflow-y: scroll;
            overflow-y: visible;
            overflow-y: auto;

五.边框

             围绕着内容和padding的一条线
             border:宽度 线性 颜色

        单独：
             border-top:宽度 线型 颜色
             border-bottom:宽度 线型 颜色
             border-left:宽度 线型 颜色
             border-right:宽度 线型 颜色

            border-width:
            px
        border-style:
                 solid:实线
                 dashed:虚线
                 double:双实线
                 dotted:点状线
                 没有边框：none

        border-color：
                 reg
                 #000
                 rgb
                 rgba

        复合：
          border：宽度 线型 颜色

        复合写法:一下设置四个边框 
            border: 30px solid peru;
         某条边框不要
            border-top: 0;
            border-top: none;

六.梯形

        1. 用边框实现梯形的规律
             盒子大小不能为0
             要那个梯形，它的对边为none，它相邻的边框的颜色为透明色，transparent
         
            上梯形
            实现上梯形，对边为none，也就是下边框为none。左右边框的颜色为透明色

        2.用边框实现三角形的规律：
              盒子大小宽高为0 要那个三角形 ，它的对边为none，它的相邻的边框的颜色为透明色,transparent
              上三角形 
              实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色
         
七.css背景颜色

         背景颜色所绘制区域：
          content + padding + border

          red
          rgb
          rgba
          #000

八.css背景图片

        多背景属性，逗号隔开，顺序在前显示在前 
        背景图片：
            background-image:url();
            从元素左上角开始显示，
            显示的区域：content + padding + border
            图片默认在水平方向和垂直方向平铺

九.css背景平铺方式

        默认值 平铺： background-repeat:repeat;
        不平铺： background-repeat:no-repeat;
        在水平方向平铺：background-repeat:repeat-x
        在垂直方向平铺：background-repeat:repeat-y

十.css背景图片定位

           background-position
           background-position 属性，设置背景图像(由background-image 定义)的起始位置
           背景图片大小要写在复合写法下面，否则无效
     语法：background-position: xpos ypos;
        一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定了一个值，另一个值将是50%。
        取值
    1.关键字:top、bottom、left、right和center:
        指定图像放置于内边距区域的位置，一个对应水平方向，另一个对应垂直方向。
        左上角:left top;
    
    2.长度值
        指定图像 相对于元素内边距区的偏移量。
        固定的px值，可以为负值 正值向右向下 负值向左向上

    3.百分比
       指定图像相对于元素内边距区的偏移量。
       百分比，是以父元素宽高度为参考的
       左上角是 0% 0%；右下角是 100% 100%
       如果设置为50% 50%，图像的中心点将与元素的中心点对齐显示