css总结

CSS

CSS的作用；使页面更加美化，能够使样式和结构的分离；

CSS的样式有1；行内样式； 2；内嵌样式；  3；外部样式；

CSS的基本结构；选择器{ 属性：属性值；}

CSS选择器的分类；基本选择器；1；标签选择器  p{ 属性：属性值；}；  2；id选择器  #id{属性：属性值；}  3 类选择器  .类名{属性：属性值；}  4；*通用选择器   *代表所有标签；5伪类选择器  

复杂选择器；1；后代选择器；  基本选择器  基本选择器{属性：属性值；}

                      2；子代选择器； 基本选择器>基本选择器{属性：属性值；}

      3；并集选择器；选择器,选择器{属性：属性值；}

                      4；交集选择器； 选择器选择器{属性：属性值；}

      5；属性选择器； 选择器[属性]

  元素分类：1，行内元素；2，块级元素；3，行内块元素；

  元素转换；display   属性值有；block 块元素； inline-block 行内快元素； inline 行内元素；

元素隐藏：overflow：hidden  隐藏内容；  scroll  滚动条     auto  自适应（溢出的部分）

       display：none 隐藏当前元素，不占位置隐藏；

visibility：hidden  隐藏当前元素，占位置隐藏；

相关属性：字体的相关属性；1;font-faliy 文字的字体；2  ;font-size 文字的大小（属性值可以是px） 3； font-style文字的样式（a）normai 正常（b）itlic 倾斜（c）oblique 特殊倾斜；   4；font-weight  文字的粗细 （a）normal 正常（b）bold 加粗（c）bolder 更粗（d）lighter 变细；

 背景的相关属性；1  ； background-color  背景颜色；

2   ；background-repeat  背景重复   （a） repeat重复  （b）no-repeat 不重复； （c）repeat-x 横向重复  （d）repeat-y 纵向重复；

3；  background-image  背景图片    url 路径

4；  background-position  背景位置；

  list-style  列表钱前的标识（type）（image）（position）

  line-height 行高；   当line-height=height 是文字会发生垂直居中

  text-alight 文字的水平对齐方式；（left）（center）（right）（justify）

  text-decoration  文字的修饰  （none 无修饰）（blink 闪烁）（overline 上划线）（underline 下划线）（line-through 贯穿线）  

div  是一个无意义的标签这个标签可以嵌套任何的html标签；

组成部分（content+border+padding+margin)

boeder边框1；border-color 边框颜色  

    2；border-style 边框样式（solid 实线）（dotted 点线边框）（dashed 虚线）

   3；border-width 边框宽度

   4；border  （left）（right）（top）（bottom）

  padding  内边距    margin 外边距  

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

垂直外边距塌陷：原因；在子元素中设置margin-top，父元素也会随之移动；

                 解决方式：1；给父元素添加border 属性；

                                   2；给父元素添加overflow-hidden属性；

浮动；  float属性值    left 左边，  right  右边；

浮动特点：1 ；浮动的情况下，元素会产生脱标；

                  2；发生了元素转换；

  3；浮动不占位置；

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

浮动的作用：1；制作导航条；   2； 文字环绕；   3； 页面布局；

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

     什么情况下产生浮动：1；在父元素没有定义高度；

 2；子元素都产生了浮动；

解决方法：1，给父元素添加高度；

2；给父元素添加一个空标签，并在标签中添加clear属性；

3；添加overflow：hidden属性；

4；伪元素；.clearfix:before,.clearfix:after{

content:"";

height:0'

line-height:0;

display:block;

clear:both;

visibility:hidden;}

css的特性：1；层叠性：在同一标签定义多个样式，样式发生冲突，后面定义的样式胡覆盖前面定义的样式；

css的继承性：

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

  2； 宽高属性不具有继承性；

 3；具有继承性的属性有：color ， font-size， font-weight 。font-style， font-family；line-height     

4；特殊的有； a 标签不能继承父元素的颜色属性，因为a标签有自己默认的颜色；

    h1标签成2倍继承；

优先级：

1；标签选择器<类选择器<id选择器<行内样式<!important

2;继承的优先级几乎是最低的，权重几乎为0；

3；权重是可以叠加的；

CSS定位的属性是position
CSS的定位有：
1；静态定位    static
static默认不进行任何位置的移动，元素任然是标准流的显示；
2；固定定位  fixed （固执型定位）
fixed  以body为主题进行位置移动，将某元素固定在该位置，固定定位会产生脱标，即固定定位不占位置；
3；相对定位； relative  （自恋型定位）
relative  相对于自己原来的位置进行移动，只是进行了位置的移动，但还是已标准流存在；
4；绝对定位  ；absolute
absolute   相对于body 的位置进行移动，会产生脱标；
  若想要相对于父级进行位置移动则需要给子元素设置绝对定位，给父元素设置相对定位，（子绝父相）