所有元素使用 box-sizing 是比较推荐的

2017-07-05 09:47:00
admin
原创
333
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
* {
    box-sizing: border-box;
} 

input, textarea {
    width: 100%;
}
</style>
</head>
<body>

<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="ybao"><br>
邮箱:<br>
<input type="text" name="email" value=""><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="提交">
</form> 

<p><strong>提示:</strong> 可以尝试移除样式中的 box-sizing 属性,看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>

</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227