解析解析width:100%;与与width:auto;的区别的区别
本文主要介绍了width:100%;与width:auto;的区别，相信对大家学习网页布局会有很好的帮助，下面就跟小编一
起来看下吧
<div>
<p>1111</p>
</div>
div{
width:980px;<br> background-color: #ccc;<br> height：300px;
}
p{
width:100%;<br> /*width:auto;*/
padding:10px;<br> background-color:#000;<br>
}
如果是p的width:100%，则说明p的width会得到980px就已经充满div区域，然后自己又有padding，所以会超出div。
而当width:auto时它是总体宽度（包括width，margin,padding,border）等于父级宽度（width，不包含父级的
margin,padding,border），所以如果padding已经左右占去10px的空间，那么width给的值就是960px。
但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值.
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
优化这段代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算∑N!</title> <style type="text/css"> table { background-color: #f2f2f2; width: 600px; height: 300px; margin: 20px auto; color: black; border: 20px ridge #9999cc; } td { font-size: 20px; font-weight: bold; text-align: center; } #button { width: 180px; height: 60px; } </style> <script src="sum_factorial.js" type="text/javascript" charset="utf-8"></script> </head> <body>
| 计算∑N! | |||
| 输入整数N的值: | <input type="text" id="n_text" value="" /> | ||
| ∑N!= | <input type="text" id="sum_text" value="" /> | ||
| <input type="button" name="" id="button" value="计算∑N!" onclick="show()" /> | <input type="reset" value="清空" id="button" /> | ||
<!DOCTYPE html> <?php require_once('MkEncrypt.php'); MkEncrypt('1234'); //这个就是密码 ?> <html> <head> <meta charset="UTF-8"> <title>GOLA 2.0</title> </head> <style type="text/css"> .wrapper {width: 1000px;margin: 20px auto;} h2 {text-align: center;} .add {margin-bottom: 20px;} .add a {text-decoration: none;color: #fff;background-color: green;padding: 6px;border-radius: 5px;} td {text-align: center;} </style> <body> GOLA 2.0
ID 用户呀 手机呀 刷新密码 总资 可用 操作 <?php // 1.导入配置文件 require "dbconfig.php"; // 2. 连接mysql $link = @mysql_connect(HOST,USER,PASS) or die("提示：数据库连接失败！"); // 选择数据库 mysql_select_db(DBNAME,$link); // 编码设置 mysql_set_charset('utf8',$link); // 3. 从DBNAME中查询到user数据库，返回数据库结果集,并按照addtime降序排列 $sql = 'select * from user order by id asc'; // 结果集 $result = mysql_query($sql,$link); // var_dump($result);die; // 解析结果集,$row为新闻所有数据，$userNum为新闻数目 $userNum=mysql_num_rows($result); for($i=0; $i<$userNum; $i++){ $row = mysql_fetch_assoc($result); echo ""; echo "{$row['id']} "; echo "{$row['agent_name']} "; echo "{$row['phone']} "; echo "{$row['with_pwd']} "; echo "{$row['user_amt']} "; echo "{$row['enable_amt']} "; echo " 删除 修改 "; echo " "; } // 5. 释放结果集 mysql_free_result($result); mysql_close($link); ?>
<script type="text/javascript"> function del (id) { if (confirm("确定删除这条新闻吗？")){ window.location = "action-del.php?id="+id; } } </script> </body> </html> 美化一下页面
GOLA 2.0
| ID | 用户呀 | 手机呀 | 刷新密码 | 总资 | 可用 | 操作 |
|---|---|---|---|---|---|---|
| {$row['id']} | "; echo "{$row['agent_name']} | "; echo "{$row['phone']} | "; echo "{$row['with_pwd']} | "; echo "{$row['user_amt']} | "; echo "{$row['enable_amt']} | "; echo "删除 修改 | "; echo "
weixin_38685521
- 粉丝: 3
- 资源: 935
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- VMP技术解析：Handle块优化与壳模板初始化
- C++ Primer 第四版更新：现代编程风格与标准库
- 计算机系统基础实验：缓冲区溢出攻击(Lab3)
- 中国结算网上业务平台：证券登记操作详解与常见问题
- FPGA驱动的五子棋博弈系统：加速与创新娱乐体验
- 多旋翼飞行器定点位置控制器设计实验
- 基于流量预测与潮汐效应的动态载频优化策略
- SQL练习：查询分析与高级操作
- 海底数据中心散热优化：从MATLAB到动态模拟
- 移动应用作业：MyDiaryBook - Google Material Design 日记APP
- Linux提权技术详解：从内核漏洞到Sudo配置错误
- 93分钟快速入门 LaTeX：从入门到实践
- 5G测试新挑战与罗德与施瓦茨解决方案
- EAS系统性能优化与故障诊断指南
- Java并发编程：JUC核心概念解析与应用
- 数据结构实验报告：基于不同存储结构的线性表和树实现
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
