元素的隐藏特性
1.设置了float为(left/right)或者position为absolute/fixed的元素将自动变为块级元素,可直接设置宽高,无需再添加:display:block;
2.伪元素:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素。
注意:(1)需要和content属性一起使用,
(2)这个伪元素默认是行内元素,不过可以使用display改变这一点。
3.隐藏元素的八种方法
overflow:hidden; /* 占据空间,无法点击 */
opacity:0; /* 占据空间,可以点击 */
visibility:hidden; /* 占据空间,无法点击 */
display:none; /* 不占据空间,无法点击 */
position:absolute; /* 不占据空间,无法点击 */
clip(clip-path):rect()/inset()/polygon(); /* 占据空间,无法点击 */
z-index:-1000; /* 不占据空间,无法点击 */
transform:scaleY(0); /* 占据空间,无法点击 */
4.清除浮动的几种方法
问题描述:
一个父元素div,两个子Div,父不设宽高,会被子元素撑起高度。
当给两子元素设置float(浮动,不占文档流的位置)后,父元素没有高度了————即高度塌陷
解决办法:
①伪元素清除
.clearfix:after{
display: block; /* 使其成为块级元素后*/
content: ""; /*为伪元素加入空内容,以便伪元素中不会有内容显示在页面中*/
height: 0; /* 为使伪元素不影响页面布局,将伪元素高度设置为0*/
clear: both; /* 清除浮动*/
}
.clearfix { *zoom:1; } /*兼容IE6、IE7 */
②在需要清除浮动的元素后面添加一个空的div
clear:both /*与伪元素异曲同工*/
③给父元素添加overflow属性(一般不用这个方法)
.clearfix{ overflow:hidden/auto } /*overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条*/