CSS属性+盒模型

css属性

    css 边框属性

           border： 
           属性值   width   宽度
                   style    样式   solid（实线）  dashed(虚线)  dotted(点状线) double（双线）
                   color     transparent(透明色)
                   none     取消边框



            用css边框属性   制作一个三角形
                            div{
                                        width: 0;
                                        height: 0;
                                        border: 30px solid ;
                                        border-color: blue red gray orange;
                                        border-bottom: none;
                                        border-left:30px solid transparent;
                                        border-right:30px solid transparent;
                            }


                    border 一个值   四个方向
                    border 两个值   上下   左右
                    border 三个值   上  左右  下 
                    border 四个值   上右下左




    css列表属性     ul  ol  dl

            list-style-type  
               属性值   disc  （实心圆）  circle（空心圆）  square（方块）
            
            list-style-position  
               属性值   outside    在外面
                        inside     在里面
            
            list-style-image  
            属性值   url（路径) 

            list-style 
                       none   取消列表样式   
                       

    css背景图     
                  background  
                      属性值    color   颜色
                                image   url(路径) 插入背景图
                                repeat  
                                        no-repeat 不平铺 
                                        repeat-x  水平  
                                        repeat-y  垂直方向平铺
                                position  位置 
                                        水平 （left  center  right)
                                        垂直（top  center  bottom)
                                attachment  
                                        fixed  固定 
                                        scroll  滚动

                 
                  简写  background：color image repeat position;


          背景图和 img插入图片的区别

          背景图不占据空间  img属于html标签的一种占据空间

          背景图用来渲染网页 

          jpg    通过改变像素点   缩小图片
          gif    通过改变色彩    缩小图片 能透明 能动画
          png    通过改变色彩    缩小图片 能透明    都是有损

盒模型

           有里到外   内容 内填充 边框 外边距

           1  padding属于 边框和内容之间  在盒子内部
           2  padding是为了调整子元素在父元素之间的间距
           3  padding 加了间距会把盒子撑大 要想让盒子保持不变 需要在原有的高度和宽度减去加上的间距
           4  padding 
                          left    左
                          right   右
                          top     上
                          bottom  下
           5 padding     一个值   四周
                         两个值   上下  左右
                         三个值   上   左右   下 
                         四个值    上右下左 
           6 padding 和背景图没有冲突
           7 padding  不能设置负值
           8 如果盒子没有固定的宽高  添加padding是不用减的

怎么用css边框属性做一个三角形

       div{
           width: 0;
           height: 0;
           border: 30px solid ;
           border-color: blue red gray orange;
           border-bottom: none;
           border-left:30px solid transparent;
           border-right:30px solid transparent;
             
       }