CSS盒子模型的理解

标准的CSS盒子模型包括:内容(content)、填充(padding)、边框(border)、边界(margin)

这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。那么内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框 (BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。

时间: 2024-10-12 05:46:11

CSS盒子模型的理解的相关文章

CSS盒子模型的理解及其计算方式汇总

一.盒模型的分类 二.标准模型与 IE 模型的区别 从上图可看出,两者的区别在于宽度和高度的计算方式不同: 标准模型计算的是 content 的宽/高 IE 模型计算的是 content + padding + border 的宽/高 三.标准模型与 IE 模型的设置 1.标准模型(默认) box-sizing: content-box; 2.IE 模型 box-sizing: border-box; 四.盒模型宽高的计算 1.计算宽高的 6 种方式汇总 获取 dom 的宽度 width 只计算

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

css 盒子模型理解

盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最

&lt;转&gt;HTML+CSS总结/深入理解CSS盒子模型

原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方

(5)css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

详细认识一下CSS盒子模型

定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域(例如文本,图像等)"."内容周围填充的区域"."边框" 和"边界区域"的方式. PS: 为了方便区分概念,通常也会把"填充"叫做"内边距",把"边界"叫做"外边距&qu

聊聊css盒子模型

css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素内容(element content).内边距(padding).边框(border)

CSS速成教程—CSS盒子模型——6

1.CSS 盒子模型概述 我们先来看看盒子的组成包括: margin(外边距);border(边框);padding(内边距);content(内容) 正文框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.从上面的图中可以看出,宽度(width) 和 高度(height) 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的