HTML—CSS问题小集合

1.常用到的块状元素如：（自带换行）

<p>     <ul>      <ol>        <li> 
 <div>   <h1>~<h6>       <table> 
 <menu>   <hr>  < form>   <nav>  
  <selection>  <article>  < aside>

行级行行级元素有：

<input>.<span><a><br><b> <strong>
<img > <sup>上标<sub> 下标<i>斜体<em>.
 斜体<del> 删除线<u> 下划线

2.多行文本如何垂直居中？
div margin padding vertical-align
<1>table布局 display：table+display:table-cell 缺点：不兼容ie6,ie7。
CCS中的verticle-align属性只对拥有vertical-align特性的HTML标签起作用，但是在CSS中有个display属性可以模拟table，就可以使用这个让div模拟table运用vertical-align属性，使用display：table和display:table-cell,在这里需要注意的是，前者需要设置在父标签中，后者设置在子标签中。

<div class="box">
    <span class="box_span">
        父元素使用display:table和子元素使用display:table-cell属性来模拟表格，
        子元素设置vertical-align:middle即可垂直居中
    </span>
</div>

.box{
    display: table;
    width: 400px;
    height: 200px;
    border: 1px solid red;
}
.box_span{
    display: table-cell;
    vertical-align: middle;
}

<2>使用display:inline-block
父元素设置对应的height和line-height，
对子元素设置vertical-align:middle属性和display:inline-block属性，转换成行内块元素，
相当于变成多个单行文本。
添加line-height属性，覆盖继承自父元素的行高。
缺点：文本的高度不能超过外部盒子的高度。

<!--方法2：使用display:inline-block-->
<div class="a_box1">
    <span class="a_box_span">
        父元素设置对应的height和line-height，
        对子元素设置vertical-align:middle属性和display:inline-block属性，转换成行内块元素，
        相当于变成多个单行文本。
        添加line-height属性，覆盖继承自父元素的行高。
        缺点：文本的高度不能超过外部盒子的高度。
    </span>
</div>

.a_box1{
    width: 400px;
    height: 200px;
    border: 1px solid red;
    line-height: 200px;
}
.a_box_span{
    vertical-align: middle;
    line-height: 20px; /*单独设置子元素行高，覆盖父元素*/
    display: inline-block;/*使其转换为行内块元素*/
}

3.垂直居中
1、line-height 在单行里能用
2、设置padding （最佳）

4.行级元素和块级元素的特点
特点：
（1）可设置宽高
（2）在没有设置宽高的时候独占一行（内容决定高度）
（3）换行

行级元素 不换行的 内嵌元素
特点：
（1）不可设置宽高
（2）宽高就是内容宽高
（3）不换行
img是一个特殊的内嵌元素，是一个有块元素属性的内嵌元素

4.父元素塌陷
解决办法： 清除父元素塌陷带来的危害
1.给父元素设置高度，只是通过CSS的解决（不能接触父元素塌陷的危害，一般不用）
2.给父元素设置末尾一个最小的“儿子”，给父元素里面设置一个div,属性设置为clear:both
设置div很麻烦，设置一个伪类.clear：after（方法4）
3.给父元素设置overflow：hidden (溢出隐藏)（非常规方法）
4.给父元素设置一个after 给after设置clear：both （最佳）

5.在给子元素设置margintop的时候，margintop会作用与父元素
解决办法：
1.子元素设置float，让子元素脱离文档流
2.给父元素添加overflow：hidden
3.给父元素添加一个内容
4.给父元素一个上内边距
5.给父元素一个边框

6.外边距在使用过程中会遇到问题:
1.左右外边距相加
2.上下外边距取最大 如果脱离文档流上下依旧相加
3.子元素设置上下外边距会将这个外边距作用于子元素

隐藏方式：
1.overflow 溢出隐藏 不占据位置
2.visbility：hidden 是否可见 占据位置
3.display:none 消失 不占据位置
4.opacity 透明度 占据位置

7. 背景图片展示不完全。
a.宽度设置100%，用margin设置内容，内容多高背景展示多高

8.背景透明的两种方式
rgba 背景透字不透
opacity 全部内容透明

层叠页面下拉，尾部出现成叠的效果，先写好footer，看好高度，再设置body里下外边距


z-index:-1