码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-01-11 11:06:27      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:浏览器   meta   oda   idt   display   play   ie7   鼠标   height   

clear:both的特点

  1. 元素需是块级元素
  2. 元素不能带有浮动属性
  3. 元素必须放在最后一个浮动元素的后面
  4. 用户是看不到这个元素的
  5. clearfix清浮动方法的属性
  6. 浮动元素的父级选择器{*zoom:1;}/*只有ie7可识别 css hack写法*

浮动元素的父级选择器:

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

 

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

visibility: hidden-盒子看不到,但是盒子所占的大小依然还在 display:none-盒子完全从页面中消失 opacity:0-透明度为0(完全透明) width/height/line-height+ overflow-宽度/高度/行高+溢出隐藏

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*
 8 控制台:鼠标右键检查(F12)可以发现在元素之前有::before在元素之后有一个::after
 9 */
10 .todady::before{
11 content: "昨天星期一";
12 color: red;
13 }
14 .todady::after{
15 content: "明天星期三";
16 color: magenta;
17 }
18 </style>
19 </head>
20 <body>
21 <div class="todady">今天星期二</div>
22 </body>
23 </html>

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

标签:浏览器   meta   oda   idt   display   play   ie7   鼠标   height   

原文地址:https://www.cnblogs.com/webaction/p/14251519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!