欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

clear的值和特点及伪元素before和after的使用

clear:both的特点

  1. 元素需是块级元素
  2. 元素不能带有浮动属性
  3. 元素必须放在最后一个浮动元素的后面
  4. 用户是看不到这个元素的

clearfix清浮动方法的属性

浮动元素的父级选择器{*zoom:1;}/*只有ie7可识别 css hack写法*

浮动元素的父级选择器:

after{
display: block
content:"";
clear: both;
height:0;/*如果是在ie低版本浏览器(ie6、7、8)下展示,有时候浏览器会默认
height元素有1px的高度*/
font-size: 0;
overflow: hidden;
visibility: hidden;/*为了防止元素内有内容显示出来*
}

面试题:如何让一个元素消失在视野中

visibility: hidden-盒子看不到,但是盒子所占的大小依然还在 display:none-盒子完全从页面中消失 opacity:0-透明度为0(完全透明) width/height/line-height+ overflow-宽度/高度/行高+溢出隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
控制台:鼠标右键检查(F12)可以发现在元素之前有::before在元素之后有一个::after
*/
.todady::before{
content: "昨天星期一";
color: red;
}
.todady::after{
content: "明天星期三";
color: magenta;
}
</style>
</head>
<body>
<div class="todady">今天星期二</div>
</body>
</html>

上一篇标题:定位之绝对定位
下一篇标题:如何让元素消失在我们的视野中(面试题)

相关文章

 

文章-clear的值和特点及伪元素before和after的使用发布日期:2021-04-01 17:23作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/258.html