学习内容总结

一、vertical-align 属性

vertical-align: baseline; 默认值，基线对齐 英文字母x的下端；vertical-align: top; 顶端对齐；vertical-align: middle; 中部对齐；vertical-align: bottom; 底端对齐。vertical-align属性加在图片身上图片与图片垂直方向的对齐；图片与文字垂直方向的对齐 ，图片与文本框垂直方向的对齐。

二、图片下方间隙问题

      图片间隙问题产生的原因：父元素没有设置高度，由图片撑开，就会有图片三像素问题。为img标签的父元素设置font-size:0;(水平方向和垂直方向间隙)或line-height:0；将img标签转成块级元素img{ display: block;} ；为img标签设置垂直对齐方式img{ vertical-align: top|bottom|middle; }；为img标签的父元素设置高度，高和图片的高一样。

三、CSS三大特性

      继承性; 父元素设置css样式，后代会继承（也就是会显示父元素设置的css样式; 一般text-,line-,font-,color开头的基本都能继承；inherit：强制继承； a标签不能继承字体颜色color；h标签不能继承font-weight； b.strong不能继承font-weight； i,em不能继承font-style。

      优先性：选择器优先级与权值相关，权值越大，优先级越高；基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器权值（100）；行间引入：权值（1000）； 行间样式的优先级>id选择器的优先级>类选择器的优先级>标签选择器的优先级>通配符选择器的优先级； !important优于行间样式 大boos。

       层叠性：当一个标签有多个选择器的时候，会发生样式冲突(优先级的问题); 层叠性分为两种情况：1.样式声明不冲突：多个选择器的样式没有冲突的话，所有的样式同时叠加给这个标签  2.样式声明冲突  1. 同级选择器，css样式中最后定义的声明应用于元素,后写的会覆盖先写的（就近原则）2. 不同级选择器，由选择器优先级决定。

四、浮动的特性及清除浮动的方法

       特性：文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。大白话：标签该怎么显示就怎么显示；元素设置浮动后，类似于飘起来； 谁要在一行显示浮动就加在谁的身上。1.元素浮动后不占位，脱离正常标准流，不脱离文本流；2.元素浮动后不占位,导致父元素高度塌陷(高度为0)，影响后续布局；3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行；4.使行级标签支持设宽高；5.提升层级

        清除浮动的方法：因为子元素设置浮动后脱离正常标准流，导致父元素高度塌陷，影响后续布局   1.给浮动元素的父级盒子设置一个固定的高度   优缺点：不够灵活，适用于高度固定的布局中； 2.为浮动元素的父级盒子设置浮动  不用    优缺点：会产生新的浮动问题；3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto   优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁。