搜索
  • 您还未登录,请
  • 查看: 1888|回复: 1
    打印 上一主题 下一主题
    收起左侧

    div 行内样式style常用属性

    [复制链接]
    • 形象
    • 资料
    • 荣誉
    CooL.泪猪  男性
    发短消息 加为好友

    QQ查看个人网站
    UID: 1
    帖子: 5119
    精华: 33
       积分: 33270
       威望: 2135
       状态: 0
       积极: 9983
       贡献: 644
       魅力: 499
       活跃: 11212
       人气: 1235
       酷币: 23647
       阅读权限:255
       注册时间:2009-9-1
       在线时长:2831小时
       失踪天数: 232 天
       社区经验: 18级 已经发了5119篇文章咯快19级咯
       在线状态:   
    时尚酷族泪猪
    级别: 酷族管理员
  • TA的每日心情
    开心
    2025-10-19 23:58
  • 签到天数: 306 天

    连续签到: 1 天

    [LV.8]以坛为家I

    荣誉勋章

    社区QQ达人 超级无敌新人奖 优秀成员 最佳成员奖 原创者勋章 沙发王勋章 每日签到奖 推广之星奖 宣传大使 极度诱惑勋章 视觉潮人奖 先锋奖 六星奖 音乐天才奖 空间认证奖 YY认证勋章 在线时间王勋章 红人勋章 爱心勋章 社区活动奖 幸福恋人奖(男) 酷Q帅哥奖 精英会员审核团队标志 最具人气奖 水瓶座
    跳转到指定楼层
    #
    CooL.泪猪实名认证 发表于 2017-5-24 18:43:02 | 只看该作者 回帖奖励 |正序浏览 |阅读模式      紫钻仅向指定用户开放  
    +1
    1889°C
    1
    • CooL.泪猪
    过: 他们

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?会员注册

    x
    一、常用属性:
    1、Height:设置DIV的高度。2 G+ C; _8 |( R2 i% E9 W% o. J
    2、Width:设置DIV的宽度。
    例:
    ! D3 x& s9 ?# p  Y$ ?% E
    1.   <div style="width:200px;height:200px;background-color:Black;"></div>
    复制代码
    3、margin:用于设置DIV的外延边距,也就是到父容器的距离。
    例:点击查看效果:& n8 R) F! n, `: e/ O+ E+ D) e
    1. <div style="background-color:Black;width:300px;height:300px;">
      5 ^3 j1 d' V' H" y8 e1 m! m
    2.   <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">: Y5 P  S# N, X. e: _3 G
    3.   </div> 8 a% ^, p8 }8 N# Z3 Y& m8 \
    4. </div>
    复制代码
    说明:margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离,用到的属性如下:
    4、margin-left:到父容器左边框的距离。4 S* N' I' |* R* U, i
    5、margin-right:到父容器右边框的距离。) T9 ~" E1 s) ^3 q1 `
    6、margin-top: 到父容器上边框的距离。
    ' |1 l$ `  L; P7、margin-bottom:到父容器下边框的距离。
      在标准的浏览器中,box模型首先确定的是content的宽度和高度,而margin和padding不会影响content的宽度和高度——如果增加magin和padding尺寸后,content尺寸不变而总的box尺寸会增大。' Q0 P) z1 F3 s* M- P: k2 w' Y- l( b
    6 m1 P: k6 e- E% h* \4 O: q
    在IE中却相反,增加margin和padding的尺寸,则会减小content的尺寸,而box尺寸不变。微软遵循的逻辑是现实世界的框架不变,填充变大,则里面的图片越小。9 k5 d( J, i( `7 o  G9 I/ U
    " @6 V, i4 Z3 y; f" t( ?2 Z
    margin叠加:% ?$ a( g" A: R! t% s; c3 b
    这是一个难点(行内框、浮动框、绝对定位框margin不会叠加), 简单的描述概念就是:两个垂直的margin相遇,则会合并成一个margin,这个margin的高度是前两个高度值大的。
    (1)、元素的顶边界与前面元素的底边界发生叠加
    CooL.泪猪说:
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 转播转播 分享分享 分享淘帖 支持支持 反对反对
         时尚酷族社区:www.coqq.net

    发表回复

    您需要登录后才可以回帖 登录 | 会员注册

    本版积分规则

    欢迎您的光临,如果您觉得本站做得不错的话,请把本站介绍给您的好友,谢谢大家的支持!
    发布主题 上个主题 下个主题 快速回复 收藏帖子 返回列表

    ©2009-2025 时尚酷族社区 http://www.coqq.net/  版权所有 
      

    快速回复 返回顶部 返回列表