mysql padding_margin,padding之我见

在网页布局中,margin和padding绝对会占很重要的作用,但是在实际的项目中,很多新手前端程序员们往往不能正确的使用它们,导致会出现一些不必要的麻烦,下面是我在前几天的项目中遇到的一些问题,以及个人总结的一些方法,仅供参考。

想比margin,padding则是要乖巧的多,几乎没有让你不省心的地方,我们知道,简单的padding语法有四种:

eg:1.div1{padding:1px;}  (表示上下左右的内边距都是1PX)

2.div2{padding:1px 2px}; (上下边距是1PX,左右边距是2px);

3.div3{padding:1px 2px 3px};  上边距是1px,左右边距是2px,下边距3px;

4.div4{padding:1px 2px 3px 4px};  依次为上边距1PX,右为2px,下3px,左4px

其实总结就是一句话,从上边距开始,顺时针旋转赋值。其次,需要注意的话,padding没有负值,及时你给定值为负,也会当0处理。

margin情况要比Padding复杂一些,语法也和Padding一样,但是需要注意的主要有下面几个地方:

1.margin是允许负边距的,这在做一些叠加效果或是处理inline-block留白的时候很好用。

2.margin的外边距合并只存在垂直方向上。

3.行内元素只有左右两边的margin值,但须记住非可置换元素如img,textarea,select,button.,label,object也是可以设置垂直方向的margin的。

4.有一些情况垂直方向上的margin是不会合并的,比如:1.绝对定位元素不会与任何元素的外边距合并;2.浮动元素不会与任何元素的外边距合并;

3.inline-block不会与任何元素的外边距合并。

4.overflow取值为visible以外的元素与它的子元素不会合并

5.处理塌陷时的几种方法(一个盒子如果没有上补白和上边框,那么这个盒子的上边距会和哎内部文档流中的第一个子元素的上边距重叠,设置子元素margin-top,就会产生塌陷)。

1.给父元素加overflow:hidden;

2.设置父元素或子元素浮动;

3.给父元素加绝对定位;

4.父元素加padding或border;

5.将margin-top改为padding-top;

最后总结一下,在网页开发中,margin和padding都是经常使用的,那么我们应该何时用padding呢:1.希望在border内侧加空白时。2.空白需背景色时。3.上下两个盒子的空白,希望等于两者之和时。如果情况与上诉三种相反,那么我们不妨试试margin这个万能的东东吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!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> <div class="wrapper"> <h2>GOLA 2.0</h2> <div class="add"> <!--<a href="adduser.html">增加新闻</a>--> </div> <table width="960" border="1"> <tr> <th>ID</th> <th>用户呀</th> <th>手机呀</th> <th>刷新密码</th> <th>总资</th> <th>可用</th> <th>操作</th> </tr> <?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 "<tr>"; echo "<td>{$row['id']}</td>"; echo "<td>{$row['agent_name']}</td>"; echo "<td>{$row['phone']}</td>"; echo "<td>{$row['with_pwd']}</td>"; echo "<td>{$row['user_amt']}</td>"; echo "<td>{$row['enable_amt']}</td>"; echo "<td> <a href='javascript:del({$row['id']})'>删除</a> <a href='editnews.php?id={$row['id']}'>修改</a> </td>"; echo "</tr>"; } // 5. 释放结果集 mysql_free_result($result); mysql_close($link); ?> </table> </div> <script type="text/javascript"> function del (id) { if (confirm("确定删除这条新闻吗?")){ window.location = "action-del.php?id="+id; } } </script> </body> </html> 美化一下页面
06-06

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值