css的梳理

    不知不觉已将上了半个月课了，在这半个月中我也学到了不少知识。现在就对css的知识进行梳理。

    一、css是什么：cascading  style  sheet层叠样式表。主要负责页面的美化。

    二、css的书写样式（3种样式）

            1.行内样式：写在标签内部，这种样式只适用于当前标签，会造成代码的大量冗余。

             2.内嵌样式：在head标签内添加<style>标签。该样式实现了html和css的基本分离。适用于当前页面内所有满足条件的标签，适用性高于行内样式。

            3.外部样式：首先要新建一个后缀名为.css的文件，然后通过link标签导入外部的css文件。能够实现html和css的彻底分离，适用于所有导入该文件的页面，适用性高于行内样式和内嵌样式。

    三、css的基本的基本书写形式：选择器{属性：属性值；}或 者选择器{声明；声明；}（属性和属性值合称为声明）

    四、选择器的分类（简单选择器，复杂选择器）

          1.简单选择器（5种） 

              a、标签选择器（类型选择器）

                        格式：标签名{属性：属性值；}

               b、ID选择器

                                       格式：#ID名{属性：属性值；}

               c、类选择器

                                           格式：.类名{属性：属性值；}（一定要注意类名前有个点不能少写）

               d、通用选择器（通配符选择器）

                                           格式：*{属性：属性值；}

               e、伪类选择器：：link访问前的样式  ：visied访问后的样式  ：hover鼠标放上去的样式 ：active鼠标点击时的样式。

           2、复杂选择器（5种）

                    a、后代选择器

                        格式：选择器  选择器

                   b、子代选择器

                        格式：选择器 > 选择器

                   c、并集选择器

                        格式：选择器 ， 选择器

                   d、并集选择器

                        格式：选择器选择器

                   e、属性选择器

                        格式：选择器[属性]或者选择器[属性=属性值]

       五、元素的分类

             1、行内元素：在同一行显示，不能设置宽高，不会自动换行。

             2、块级元素：能设置宽高，会自动换行，独立占一行，默认的宽度是父级的宽度。

             3、行内块元素：在同一行显示，能设置宽高，会自动换行。

                   4、元素的转换：dispiay   属性值：block 块级  inline 行内  inline-block 行内块。

          5、字体相关的属性

                 a、font-family   调节字体

                           b、font-style  调节样式      属性值：normal正常  ltalic倾斜   oblique特殊倾斜

                 c 、font-size  调节大小

                          d 、font-weight  调节粗细  属性值：normal正常  bold加粗     bolder更粗    lighter变细
                          e 、font的简写：font-style font-weight  font-size  font-family （简写必须有font-family和font-size）
         6、背景相关的属性

                  a、background-color 背景颜色

                            b、background-image 背景图片

                  c、background-repeat 图片是否平铺   属性值repeat ：平铺（默认值） no-repeat ：不平铺 repeat-x ：横向平铺  repeat-y ：纵向平铺

                           d 、background-position  图片的位置  属性值：方位：left，right，top，bottom，center或者写距离单位：第一个代表左边，第二个代表上边

             7、文本相关的属性

                            a 、text-decoration 文字的装饰

                   b、text-aline  文字的水平对齐

                   c、line-height 行高   当line-height=height的值时，文字内容会发生垂直居中

                   d、text-indent：首行缩进

              8、列表相关的属性

                   a、list-style-type 调节列表前的标识

                   b、list-style-image  调节列表前的图片

                   c、list-style-position 调节列表前标识的位置    属性值outside 在列表外面    inside 在列表里面

     六、div

             1、div是一个无任何意义的标签，可以嵌套任何的html标签

             2、div的组成部分：content+border+padding（内边距）+margin（外边距）

             3、div的实际大小=content+border+padding

             4、border 边框

           

            5、padding内边距  margin外边距

           6、垂直外边距合并：在垂直方向上，上面的盒子设置下边距，下面的盒子设置上边距，这时，两个外边距合并后取最大值

            7、垂直外边距塌陷：在子元素中设置上边距（margin-top ）时，父元素也会随之移动

                 解决方案：1.给父元素添加border属性  2.给父元素添加overflow：hidden
       七、浮动  float

             1、标准流：在正常状态下，元素呈现的显示方式以及元素分类状态我们称之为标准流

             2、float 属性值 left right

             3、浮动的特点

                a、浮动是情况下元素会产生脱标（脱离标准流）

                b、发生了元素的转换

                c、浮动不占位置

                d、同级的标签若其他元素产生了浮动，那么同级元素的其他元素也要浮动

             4、浮动的作用

                a、页面的布局

               b、文字的环绕

                c、制作导航条

             5、清除浮动

                a、原因：清除浮动产生的影响

                b、什么情况下需要清除浮动： 在父元素没有设置高度且子元素都产生了浮动

             6、解决方式

                a、给父元素设置高度（最不建议使用）

                b、给父元素添加空标签，并在标签中添加clear属性  属性值为：left right none both

               c、给父元素添加overflow：hidden

                d、伪元素：.clearfix：after{                                    
                                                    content:““；
                                                      height：0；
                                                   line-height:0;
                                                    display:block;
                                                     clear:both;
                                                     visibility:hidden;
                                                     }    
                              .clearfix{
                              zoom:1; } /* 兼容ie浏览器*/
              7、元素的隐藏     

                 a、overflow  属性值有：scroll（加滚动条） h idden 隐藏溢出部分  auto( 自适应)

                 b、display：none  隐藏当前元素  ，不占位隐藏   

                 c、visibility：hidden 隐藏当前元素，占位隐藏

       八、css 的特性

                 a、css的层叠性：当权重相同时，后面定义的属性会覆盖前面定义的属性

                 b、css的继承性：在嵌套关系中，子元素的样式会受到父元素的影响，这时我们称之为css的继承性

                 c、优先级：   标签选择器<类选择器<id选择器<行内选择器<！important       

       九、css 的定位  position

                 a、静态定位：static（默认）不进行任何位置的移动，元素仍然是标准流的显示方式

                 b、固定定位（固执性定位）：fixed  以body为主题进行位置移动，将某元素固定在该位置，固定定位会产生脱标，即固定定位不占位置

                 c、相对定位（自恋型定位）： relative  相对于自己原来的位置进行移动，但是还是以标准流的形式存在

                 d、绝对定位： absolute 相对于body的位置移动，会产生脱标（若想要对于父级进行位置移动则需要给子元素设置绝对定位，给父级设置相对地位）