9.宽度自适应和解决浮动塌陷

锚点

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
	1)给元素定义命名锚记名
	语法：<标记   id="命名锚记名">    </标记>	
	2)命名锚记连接
	语法：<a href="#命名锚记名称"></a>

宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）

高度自适应

1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）

2)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

高度自适应第一种情况：
height不设置 或者 height:auto; 元素的高度是被内容撑开的。
但是height不去设置或者是设置height：auto; 存在问题：当内容极度减少容器的高度不会被撑开，影响整个版式的布局。
上述问题解决方法：当内容没有或内容极度减少，让容器保持一个最小高度

高度自适应第一种情况的需求：
a：当内容增加，要内容撑开容器的高度
b: 当内容极少，要让容器保持一个最小高度。

最小高度的设置：
    属性：min-height:;

扩展(了解)：
min-height:; 现代高版本浏览器都能支持，但是ie低版本（ie6）不认min-height
height在现代主流浏览器里面，就是固定高度，但是在ie6里面默认把height 解析成最小高度。

解决浮动塌陷

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

高度塌陷的解决方法
法一：
给父元素添加声明overflow:hidden;(触发一个BFC)
法二：
在浮动元素下方添加空div,并给该元素添加
声明：div{clear:both; height:0; overflow:hidden;}
法三：万能清除浮动法
选择符::after {
/* 内容可以是空格、点等，这个内容最后会被隐藏 /
content: “.”;
/ 将元素转换为块级元素 /
display: block;
/ 高度为0，内容被挤出去了 /
height: 0;
/清除两侧浮动/
clear: both;
/ 溢出隐藏 ，隐藏点*/
overflow: hidden;
/* 隐藏元素、占据空间 */
visibility: hidden;
}

visibility:hidden/隐藏

visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

伪对象选择符

1）、::after :  与content属性一起使用，定义在对象后的内容。

语法：选择符:：after{content:”文字”;}
	 选择符:：after{content:url(图片路径)；}
	
如：div::after{content:url(logo.jpg);}
   div::after{content:"文本内容";} 
   
   
   2）、::before:     与content属性一起使用,定义在对象前 的内容。
div::before{content:"在其前放内容";}


3）、::first-letter 定义对象内第一个字符的样式。
说明：
*(该伪元素只能用于块级元素)

4）、::first-line:定义对象内第一行的样式。
	*(该伪元素只能用于块级元素。)

拓展

 min-height:; 现代高版本浏览器都能支持，但是ie低版本（ie6）不认min-height
height在现代主流浏览器里面，就是固定高度，但是在ie6里面默认把height 解析成最小高度。
   
如果考虑IE6兼容：最小高度怎么设置？
  a: 
     min-height:300px;
      _height:300px;
      执行逻辑：
          非IE6浏览器：能识别min-height,不认_height
          iE6浏览器：能识别_height 默认解析成最小高度，不识别min-height;
 b：
      min-height:300px;
      height:auto!important;
      height:300px;
     执行逻辑：
          非IE6浏览器：执行min-height, height:auto权重最高，会把height:300px用auto覆盖，auto为height默认值。
          ie6浏览器：不识别min-height, 不认为height:auto为权重最高,后写的是height:300px  执行的就是height:300px;