浏览器宽高自适应，宽高自适应

浏览器宽高自适应，宽高自适应

宽的自适应：

块状元素当不设置width 或者是设置width:100%; 当前元素宽度跟随父元素发生变化。

高度自适应：

a : 如果height:auto； 或者是不设置height的时候。 元素的height被子元素或者其内容撑开。

需求：

1：当内容大于容器的时候。让内容撑开容器
2：当没有内容或者是内容偏少，让容器 保持一个最小高度。

最小高度的设置：

注：
ie低版本解析 height 默认就是最小高度。
min-height:200px;

高度塌陷：

出现场景：子元素有浮动，父元素没有设置高度的时候，父元素会出现高度塌陷。

解决高度塌陷的方法：

1：给塌陷的元素，添加属性

 	overflow:hidden;

原理：

overflow:hidden;     //触发了BFC （ 块级格式化上下文 ）。

BFC布局规则之一：计算BFC高度的时候，浮动元素也参与计算！
缺点： 会隐藏掉定位在父元素之外的内容。

原理：

clear:both;     //( 清除两侧浮动  、  忽略上方浮动元素留出的空间)

3： 万能清除法：

css选择符:

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

解决兼容思路（ 最小高度 ）

如果考虑IE低版本的兼容（ IE6 ）

min-height iE6不能识别。

 _height:300px;            //下划线"_"为IE6浏览器专用过滤器，且height为IE6的最小height
 min-height:300px;        //高版本浏览器解析为最小高度(如：谷歌，火狐浏览器 )
 min-height:300px;height:auto!important;height:300px;

元素隐藏

display:none；    //将整个元素隐藏，不占据空间
visibility: hidden;    //将整个元素隐藏,占据空间。留出一片空白区域。

伪元素（伪对象）选择器： ( 用在块状元素上面 )

标签：after{ content:''}      //在某个元素里面子元素的后面添加内容
标签：before{ content:"" }     //在某个元素里面子元素的前面添加内容
标签：first-line	             //选择元素的第一行
标签：first-letter           //选择元素的首字母

css3伪类

标签::selection{ 
		background:red;  //改变背景颜色
		color:white:	//改变字体颜色
}      	

文章最后发布于: 2019-10-26 15:41:40