web前段

css显示模式。

1、垂直对其方式vertical-algin

2、vertical-algin：top；顶端对齐

3、vertical-algin：bottom；底端对齐

4、vertical-algin：middle；中间对齐

应用于图片与图片垂直方向对齐，图片与文字垂直方向对齐，图片与文本框垂直方向对齐。

图片下方间隙问题：父元素没有设置高度，由图片撑开，就会有3px的间隙。为img父元素添加font-size：0；水平方向和垂直方向间隙)或line-height:0。将img标签转换成块级标签（display-block）为img标签设置垂直对其方式（vertical-algin：top、bpttom、middle）。为img标签的父元素添加高度，和图片高度一样。

图片居中1、给父元素添加text-algin：center。2、转换成块级标签display：block；margin：0 auto。

css三大特性总结1、继承性。概念：父元素向后代元素传递属性的机制。表现：后代元素会继承父元素的属性，一般text-,line-,font-,color开头的基本都能继承，a标签不能继承字体颜色color，h标签不能继承font-weight，b.strong不能继承font-weight，i,em不能继承font-style。每个css都可以强行继承这个值inherit，它的作用就是减少代码，减少css样式的复杂性。

2、优先级。概述：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。 样式不冲突，优先级没有意义。当同一个元素有多个冲突声明的时候，优先级才会有意义。行内样式与选择器的优先级，概述：优先级是基于不同种类选择器组成的匹配规则。优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

选择器优先级与权值相关，权值越大，优先级越高，基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器权值（100。权值相同，后写的会覆盖先写的内容，继承样式的优先级为0，子元素设置样式会覆盖继承样式，行间样式权值为（1000），优于id选择器， !important优于行间样式。

样式引入方式优先级。1、行间样式优于内部和外部样式，但是高不过!important。2、内部样式和外部样式就近原则。

总结

css的层叠性是通过继承性 和 优先级实现

1、样式声明不冲突 （同时应用于元素）

2、样式声明冲突

3、同级选择器，css样式中最后定义的声明应用于元素（就近原则）

4、不同级选择器，由选择器优先级决定

css浮动：网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式。浮动的概念：浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。标准流（普通文本流）：文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。

为什么要清除浮动：1、子元素浮动会脱离正常标准流，会导致父元素高度塌陷。2、影响之后元素的布局。

清除浮动的方法：1、给浮动元素的父级盒子设置一个固定的高度，优缺点：不够灵活，适用于高度固定的布局中

2、为浮动元素的父级盒子设置浮动。优缺点：会产生新的浮动问题。

3、为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto。优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁