css设置元素 网页高度自适应,CSS宽高自适应（浮动元素的父元素高度自适应）...

说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；怎么去解决？(只要解决高度他显得问题，父元素就能实现高度自适应了)

1、可以个固定高度去解决解决高度塌陷问题

弊端：但是不能让元素高度自适应了 。

2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；(遵循BFC的显示原则)

3、在浮动元素的下方添加一个空元素，并且给他设置一下属性： 空标记：

clear:both;height:0;overflow:hidden;

弊端：会添加很多空标记，增加结构负担，产生代码冗余；

4、display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；

弊端：会改变当前元素的元素类型；

5、万能清除法(规范写法)：

:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 说明：推荐使用万能清除法；

弊端：单词太多，不好记；

其他方法：伪元素(对象)选择器：(这几个伪元素选择器前面的冒号可写一组，也可以写两组；)

1)、::after : 与content属性一起使用，定义在对象后的内容。(必须具有属性content：“”；)

语法：选择符: ：after{content:”文字”;}

选择符: ：after{content:url(图片路径)；}

2)、::before : 与content属性一起使用,定义在对象前 的内容。

语法：选择符: ：before{content:”文字”;}

选择符: ：before{content:url(图片路径)；}

3) ::first-letter 定义对象内第一个字符的样式。

说明：*(该伪元素只能用于块级元素)

4) ::first-line:定义对象内第一行的样式。

说明：*(该伪元素只能用于块级元素。)

隐藏属性：visibility:visible 显示/hidden 隐藏;

visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域；

而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

总结： visibility:hidden；让元素隐藏；元素的位置是保留的；

display:none：让元素隐藏； 元素的位置不保留，也被隐藏了；

Like

Like

Love

Haha

Wow

Sad

Angry