彻底弄懂CSS盒模型 Box Model

前言
  如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查找相关信息。

理解CSS盒子模型
  什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

时间: 2024-10-21 08:42:01

彻底弄懂CSS盒模型 Box Model的相关文章

JQuery 确定css方框模型(盒模型Box Model)_jquery

如果页面包含有效的DOCTYPE声明,则以严格模式呈现. 如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明,则以兼容模式呈现. 下面将一个两种模式的区别,两种呈现模式的主要差别是对元素width和height样式的计算上.如下面的样式 复制代码 代码如下: { width:180px; height:72px; padding:10px; bording-width:5px; } 在W3C的严格模式下,元素的内容显示的范围是180*72px.内边距和边框在180*72像素的范围之外.

详解CSS中的Box Model盒属性的使用

  页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: content -> padding -> border -> margin 按理来说一个元素的宽度(高度以此类推)应该这样计算: 总宽度 = margin-left + border-left + padding-left + width + padding-right + bord

彻底弄懂CSS盒子模式之三

css 彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 1.彻底弄懂CSS盒子模式一(DIV排版快速入门)2.彻底弄懂CSS盒子模式二(导航栏实例)3.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 一.下面请看float的精彩表演,有请.大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦.因为我的工作对网页设计人员很有用,就像之前align帮助你们定位网页元素一样重要,但是我的功能似乎比align强多了.接下来我将现场给你演示我的

网页制作学习:彻底弄懂CSS盒子模式之四

css|网页 彻底弄懂CSS盒子模式四(绝对定位和相对定位) 1.彻底弄懂CSS盒子模式一(DIV排版快速入门)2.彻底弄懂CSS盒子模式二(导航栏实例)3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 前言 在用CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来,比如CSS相册等等,因此自己杂乱的网页与高手完美的设计形成鲜明对比,这在一定程度上

学习网页技术:彻底弄懂CSS盒子模式之五

css|网页 1.彻底弄懂CSS盒子模式一(DIV排版快速入门)2.彻底弄懂CSS盒子模式二(导航栏实例)3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 在本人上一篇教程<彻底弄懂CSS盒子模式四(绝对定位和相对定位)>中最后有演示一个综合导航实例,那时因为时间关系,同时本人也觉得有必要将这实例分出来单独讲一下,所以没有把实例讲解教程写到上一篇教程中.这个教程可以作为CSS定位学习的强化练习,当然教程我也不只是单一的讲解做的步骤,还会和

进阶:彻底弄懂CSS盒子模式之二

css 作者:唐国辉          实现原理动画演示:http://www.alixixi.com/UploadPic/2007-7/200777204837702.swf 自本人教程<彻底弄懂CSS盒子模式(DIV布局快速入门)>发表以来,一直获得各位网友的好评与支持,今天应各位网友的要求,也为了答谢各位网友的支持,本人将推出续篇教程,以加深各位网友对CSS盒子模式的理解.此教程面向读者还是DIV排版入门者,如果你是高手,那就不要浪费自己时间了. 本人这次将讲解一个纵向CSS导航栏实例的

CSS盒模型制定网页的宽度和高度的原理

  当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的. #test{margin:10px;padding:10px;width:100px;height:100px;} 如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margin-lef

新手 菜鸟 问题-如何处理css盒模型布局关系?

问题描述 如何处理css盒模型布局关系? 如何做到 把嵌套在一个大盒模型中的两个小盒模型一上一下向右浮动? 解决方案 你可以把盒子看成房子里的每个物品,设定他们的宽高,位置和层次,想怎么摆都是可以的.如果需要适配,在最外层加上缩放就好啦 解决方案二: CSS布局模型CSS的布局模型CSS布局模型

彻底弄懂CSS盒子模式系列教程集合_经验交流

blueidea终于可以出点让人惊呀的东西了,一直对clear和position不太理解,没想到这次的系列教程全给提及到了,不错,赞一下. 彻底弄懂CSS盒子模式之一彻底弄懂CSS盒子模式之二彻底弄懂CSS盒子模式之三彻底弄懂CSS盒子模式之四彻底弄懂CSS盒子模式之五