评论栏实战
时如逝水,永不回头。一晃,物是人非事事休。
今天重新看视屏从一个案例开始,讲的是简单的评论栏,因该说做的是一个简单的任务栏,,中间有讲,这样去避免使用margin,应为margin会带来很多的bug。在已有一行文字下面接着块级元素的时候呢,可以用切片量一下,从文字的顶部到块级元素顶部讲的距离,用这个距离当做文字的高,根据元素的特性,会自动的把会计元素定下去,哼完美。
<html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>评论栏</title> <style rel="stylesheet" type="text/css"> *{ padding:0; margin:0; } .message{ width:960px; margin:10px auto; border:1px solid #ccc; padding:20px; } .message h4{ height:55px; } .message a{ text-decoration:none; color:#f00; } .message textarea{ width:800px; height:300px; border:1px solid #0cc; color:#eee; padding:20px; margin-bottom:35px; border-radius:5px; } p{ height:40px; line-height:40px; font-size:20px; font-family:"黑体"; float:right; } </style> </head> <body> <div class="message"> <h4>评论<img src="image/top.png"/><a href="#">点我提交</a></h4> <textarea>请输入您的宝贵意见</textarea><br /> <input type="image" src="image/top.png" /> <p>更多</p> </div> </body> </html>
中间没有太多的细节处理,所以页面不完美,其中有一个属性名忘记了拼写的方式,就是圆角属性名:radius,这个标签全部是:border-radius。
浮动并不是一个很好的属性,因为他会影响其他元素,所以我们需要清除浮动。为什么要浮动?为什么要清除浮动?为什么要用定位?
为什么要浮动?
因为我们需要把块级元素同一行显示,这时候就要用浮动,但是问题来了,当你使用float的时候,可能会造成父元素坍缩,大多时候我们不希望父级坍缩有时候父级的高度不方便设置高度,这时候就需要清除浮动。