评论栏实战
时如逝水,永不回头。一晃,物是人非事事休。
今天重新看视屏从一个案例开始,讲的是简单的评论栏,因该说做的是一个简单的任务栏,,中间有讲,这样去避免使用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的时候,可能会造成父元素坍缩,大多时候我们不希望父级坍缩有时候父级的高度不方便设置高度,这时候就需要清除浮动。