css及h5技术分析

1. 宽度自适应

    1  不设置宽度，一般给的是最大的盒子，默认继承父元素的宽度，浮动之后无法继承父元素的宽度

    2   width设置%，宽度的单位不用px，用相对单位，比如%，一般都是里面的容器

    3   用min-width ，max-width 设置在响应式布局上

2. 高度自适应

    1  高度设置%(html,body{height:100%}只有一般的界面，min-height/max-height)、

    2  高度不设置，依靠子元素填充高度，子元素浮动会产生高度塌陷

    3  高度的单位不用px ，用相对单位，比如%等

  3. 伪对象（伪元素选择器）

      ：after[ ::after]在后面添加内容

     :before[::before 在前面加内容

     ：first-line[在第一行中添加样式]，必须是块级元素才能生效

  ：first-letter【给第一个文本添加样式】只能用在块级元素中

 ：：selection【在选中之后的样式进行操作，只能改变字体颜色和背景颜色】

4.清除高度塌陷的三种解决方式

   1 给产生高度塌陷的元素，加overflow：hidden；实现原理：触发BFC，BFC在计算高度时，会把浮动的元素高度计算在内

 缺点：如果有定位的元素会隐藏

  2  给产生高度塌陷的元素，最后面添加一个div，并且给他设置高度为0，clear：both；【清除浮动时，对添加的div的影响】

    实现原理：清除浮动带来的影响，缺点：代码的多余

3  万能法

 after{content：”.“;    display:block;    clear:both;    height:0;   overflow:hidden;    visibility:hidden;}

 好处：

  1如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量

  2 避免了定位元素被隐藏

4.表格知识点

   1   语法

  <table>

           <tr>

                   <td></td>

           </tr>

</table>

2 table里面的属性

边框 border    边框与边框之间的距离 cellspacing   默认值为1px

宽度：width     高度：height     表格水平居中     背景颜色  bgcolor  边框与

与文本之间的距离   cellpadding

3  tr里面的属性

   高度 height    文本对齐方式   align   背景颜色  bgcolor  从tr中无法设置宽度

4  td里面的属性

   高度  height   宽度   width     文本对齐方式  align     背景颜色  bgcolor    

5  colspan   代表一行，跨列成行{在同一行中进行单元格合并 它后面的属性值等于删除掉的单元格数+1}     

 rowspan  代表一列，跨行成列{在同一类中进行单元格合并，他后面的属性值等于删除掉的单元格数+1}