• HTML 盒子模型


    1 盒子模型

     

    1.1   边框  border

    Border-top-style:  solid   实线

                   dotted  点线

                   dashed  虚线

    Border-top-color   边框颜色

    Border-top-width   边框粗细

    边框属性的连写 

    特点:没有顺序要求,线型为必写项。

    ◆四个边框值相同的写法

    特点:没有顺序要求,线型为必写项。

    2.1   边框合并   border-collapse:collapse;        collapse:折叠      

    3.1   获取焦点

    label  for  id      获取光标焦点

    4.1   内边距

    Padding-left   |   right    |  top  |  bottom

    ◆padding连写

    Padding: 20px;   上右下左内边距都是20px

    Padding: 20px 30px;   上下20px   左右30px

    Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

    Padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

    内边距撑大盒子的问题

    影响盒子宽度的因素

    内边距影响盒子的宽度

    边框影响盒子的宽度

    盒子的宽度=定义的宽度+边框宽度+左右内边距

    ◆继承的盒子一般不会被撑大

    包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

    5.1   外边距

    margin-left   | right  |  top  |  bottom

    ◆外边距连写

    Margin: 20px;    上下左右外边距20PX

    Margin: 20px 30px;   上下20px  左右30px

    Margin: 20px  30px  40px;     上20px  左右30px   下  40px

    Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

    垂直方向外边距合并

    两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

    嵌套的盒子外边距塌陷

    解决方法:  1  给父盒子设置边框

               2给父盒子overflow:hidden;   bfc   格式化上下文

    http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

    6 Fireworks的基本使用

    新建文件   ctrl+n

    打开文件  ctrl+o

    调出和隐藏标尺 ctrl+r

    清除辅助线:  视图---辅助线----清除辅助线

    放大镜  z   放大镜状态下alt+鼠标左键 缩小

    抓手   快捷键   空格

    测量距离      ★先拉出2根辅助线

  • 相关阅读:
    MongoDB安装 & 用户创建增删改查
    MongoDB介绍
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
  • 原文地址:https://www.cnblogs.com/yimian/p/6650928.html
Copyright © 2020-2023  润新知