前端进阶（5）CSS

1、css样式表特征

      继承性

      层叠性

      优先级：内联>外部样式表或内部样式表>浏览器设置

       提升有限级：  !important     h1{  color:red;!important}

2、选择器

      1、通用选择器：*

      2、元素选择器（标签选择器、标记选择器）：

      3、类选择器（类样式）：.classname   通过标签的class属性进行引用

      4、分类选择器

             元素选择器 .类选择器

             p.current{}

       5、id选择器{id样式}

            #idName 通过元素的id值进行引用

        6、 群组选择器

               使用逗号分开的多个选择器，多个选择器可以共享一个样式

        7、后代选择器

               通过元素的层次关系找元素（没有层数限制）

                选择器 选择器  

          8、子代选择器      

                通过元素的层次关系（下一级）

                选择器>选择器 例子：h1>span  h1的子元素span

          9、伪类选择器，多数使用在a标签

                  ：link 

                  ：visited

                  ：hover

                  ：active  

         10、选择器优先级

                  高：  内联样式

                          ID选择器

                           类或伪类选择器

                   低： 元素选择器

3、 单位

            1、尺寸单位

                  px：像素

                  %: 占据外部元素的百分之多少

                   em：倍数

              2、颜色

                    英文单词表示

                    rgb

4、尺寸属性

           宽度 ：width   min-wight  max-wight

           高度：height     min-height   max-height

8、溢出

          overflow ：

                    visible：可见

                     hidden:隐藏

                     scroll:滚动条

                     auto：自动（自己决定应不应该有滚动条）

           overflow-x：

           overflow-y:

9、边框

           属性:    border:大小  样式   颜色；

                        border-方向：大小  样式 颜色；

                        border-left-width：左边框大小

                        大小：width

                         样式：style

                         颜色:color

10、边框倒角

              border-radius：控制四个角的圆角半径

               border-bottom-left-radius：左下角半径

11、阴影

                box-shadow: h-shadow 水平 v-shadow 垂直  （必须）

            可选：     blur:模糊程度

                           spread:尺寸

                           color:颜色

                           inset：内阴影

12、图片边框

       border-image:url(地址)   宽度  

       repeat:     repeat(平铺，横纵向平铺)

                        round

                        stretch 拉伸

13、轮廓

 框模型

    框模型：定义了元素框处理元素内容、内边距、边框和外边距的方式

    增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸

    对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

    例子：

           div.box{

             width:200px;

             height:100px;

             padding:20px;

             margin:40px;

             border:1px solid black;

         }

        <div class="box">this is content.</div>

        该div宽度=40+1+20+200+20+1+40=322

外边距 margin  紧紧围绕元素外围的空间

     外边距：与下一个元素之间的空间量

                 -margin：value；四个方向的margin

                单边设置：margin-top,margin-right,margin-left,margin-bottom，

                 以左上为优先，先满足左上的设置

         外边距的属性值可能为px，%或auto，也可以设置为负值

         默认情况下，以下HTML块级元素都存在外边距

                 -body

                -h1,h2,h3,h4,h5,h6

                -p..

           声明margin属性，可以覆盖默认样式

                  body,p,div,h1,h2,h3,h4,h5,h6,pre{

                   margin:0 

                   }   或   *{margin：0；}

             margin可取值为auto，由浏览器计算外边距

                -实现水平方向居中显示的效果

        外边距简洁写法

               margin：value(四个方向相同)

               margin：5px 10px；  上下5px  左右10px

                margin：5px 10px 5px；   上5px ，左右10px，下5px（更多用于上下不一样，左右居中）

                margin： 5px 10px 5px 10px ；上 右 下 左，从上开始顺时针

2、外边距合并

       当上下外边距相遇时，它们将形成一个外边距，称之为合并外边距。最终的边距距离，以数值大的为准。

3、内边距-padding

           1、什么是内边距：内容区域与边框之间的空间，注意：会扩大元素边框所占用的区域

           2、赋值

                 padding:value;   内边距属性值可以为像素、百分比、不能为负数，外边框可以为赋值

                 padding-left:

                padding-right:

                  padding-bottom:

                  padding-top:

                 padding简单赋值：  padding:value(上下) value（左右）；    padding：v1（上）v2（左右） v3（下）； padding：v1（上）v2（右） v3（下）v4（左）；

            3、CSS重写

                  清楚样式

                  方式：将margin padding 全部重置为0