欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> 网页布局 >> css布局基础-盒子模型
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • css布局基础-盒子模型

    来源:本站原创 浏览:3684

    内容提要:网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    网页设计的第一步就是设计版面布局

    用最合适浏览的方式将图片、文字等对象放置在页面的不同位置。

    在设计时必须遵循突出重点、平衡和谐的原则,将网站标志、主菜单等重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。

    css布局基础-盒子模型

    css布局基础-盒子模型

    CSS盒模型是CSS布局的基础,每个网页元素都被抽象为一个盒子,而网页的排版布局可以看作对组成网页的盒子元素按照一定的规则进行摆放后的结果。

    CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    margin也被称为外边距,用来设置网页中元素和元素之间的距离,即定义元素周围的空间范围。

    border(边框)用来设置网页中元素边框的宽度、颜色和样式。

    padding(填充),也称为内边距,用来设置元素的内容与边框之间的距离。

    content(内容)是元素的真正内容部分,用来容纳和显示内容。

    注意:一个元素出现在另一个元素上面时,上面元素的底外边距与下面元素的顶外边距发生叠加

    当元素被设置宽度和高度后,如果元素的区域大小不能容纳元素中的内容,在CSS中需要通过overflow(溢出)属性来控制应该如何显示

    visible:如果元素中的内容超出了元素的大小,则允许内容从元素中溢出。
    hidden:任何溢出的内容将会被隐藏,不会显示出来。
    scroll:元素中会出现水平和垂直的滚动条,可以滚动显示元素中的内容。需要注意的是,即使内容没有溢出元素,元素中仍然会显示水平和垂直滚动条。
    auto:浏览器会根据内容溢出的情况,在需要时才显示水平或垂直滚动条。

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计