• 技术文章 >web前端 >css教程

    div+css 盒子模型知识总结,轻松掌握div+css布局

    伊谢尔伦伊谢尔伦2017-06-03 11:18:23原创1053
    朋友们在最初学习css时候,一开始学css基础知识的时候一定学过padding,border和margin,即内边距、边框、外边距。它们组成了最简单的 盒子。一般会使用标准 w3c 盒子模型,就是在网页的顶部加上 doctype 声明。因为加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。对浏览器的兼容性是非常友好的。这里我们就来总结一下盒子模型的相关知识。

    盒子模型学习的相关教程

    1. 可以先了解《CSS 0基础入门教程》中的相关 css盒子模型 内容介绍

    CSS 0基础入门教程

    2. 学习 《企业网站综合布局实战视频教程》 中的 盒子模型 实战课程

    企业网站综合布局实战视频教程

    盒子模型相关知识

    1. CSS的盒子模型介绍

    CSS定义描述了这么一个盒子:

    它的外边距与顶部的距离为3像素、外边距与左右部的距离为5像素,外边距为底部的距离为6像素;

    它的边框宽度为6像素,边框颜色为黑色;

    它的内边距与上下边框的距离为4像素,与左右边框的距离为6像素;

    2. CSS盒子模型知识总结

    CSS盒子模型知识总结

    盒子模型:Box Model,由有内容(element content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个组成部分。一个元素放在页面上究竟需要多大尺寸时,把已经声明内边距,边框,外边距值统统与内容区域加上。当然,如果一个元素没有内边距,边框,外边距的话,也就是它的尺寸仅仅是由它的内容来决定。

    3. CSS盒子模型图文详解

    css盒子模型是css中一个比较核心的概念。在网页中我们可以把所有的网页元素都看成是一个盒子,一个盒子包括外边距、边框、内边距,和内容四个部分组成的。其中,外边距、边框、内边距,都是可以应用元素的上下左右四个边,也可以应用于每个单独的边。尤其是外边距还可以设置为负值,在一些特殊的场合是需要用到外边距为负值的。

    4. CSS盒子模型介绍

    网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面装的东西;而填充就是怕盒子里的东西损坏而添加的抗震材料;边框就是指盒子本身了;至于边界则说明盒子之间要留一定的空隙,保持通风。

    相关问答

    1. 想问一个关于盒子模型的问题?

    2. 关于盒子模型还是有点没明白,求指教?

    3. 关于盒子模型之边界的问题还有点不明白?

    【相关推荐】

    1. php中文网免费教程:《快速玩转CSS3教程》

    以上就是div+css 盒子模型知识总结,轻松掌握div+css布局的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:轻量级高性能的CSS3动画库 下一篇:通过html/css设置超链接字体颜色
    PHP编程就业班

    相关文章推荐

    • 手把手教你CSS架构之SMACSS• 看看图片马赛克风格化效果用CSS怎么实现?• css中圆角属性值能用百分比吗• css3球体怎么实现• 分享12个实用的 CSS 小技巧(快来收藏)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网