php盒子模型,CSS的盒子模型介绍

一、margin与padding的区别：

当我们把网页想像成一面墙时，网页中的内容总可以概括为由一个个的盒子所构成的，如图：

这里单独地把一个盒子拿出来，就会发现由外边距、边框、内边距和内容四部分构成：

这里面红线所标识的为外边距(margin)、再向里灰色的标识为边框(border)、蓝色线所标识的为内边距(padding)、再向里是具体的内容(content)，是否与照片非常相似？此时也可以认为盒子模型中的盒子就是一个块(div)，它是由相片框、相片及相片框与外面墙的距离、相片框和相片之间的距离所构成。

二、举例：

1、

div

{

margin:3px 5px 6px;

padding:4px 6px;

border-width:6px;

border-color:black;

width:500;

heigth:300;

}

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

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

它的边框宽度为6像素，边框颜色为黑色；

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

照片的大小为500*300

2、盒子缺省值的说明，以margin为例：

margin:4px;

表示盒子与上右下左边距的距离均为4像素；

margin:4px 6px;

表示盒子与上下边距的距离为4像素，右左边距的距离为6像素；

margin:4px 5px 6px;

表示盒子与上边距的距离为4像素，与右左边距的距离为5像素，与下边距的距离为6像素；

margin:4px 5px 6px 7px;

表示盒子与上边距的距离为4像素，与右边距的距离为5像素，与下边距的距离为6像素，与左边距的距离为7像素；

php盒子模型,CSS的盒子模型介绍相关推荐

html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子. 哪些因素控制了这些 ...
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F1 ...
CSS基础学习-8.CSS盒子模型_标准盒子9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
css层叠样式表盒子模型,CSS层叠样式表-盒子模型
盒子模型作用:实现网页布局,在网页中画盒子组成: 边框 border 内边距 padding 外边距 margin 1.边框 .test{ width: 300px; height: 300px; ...
html盒子有哪些属性,盒子模型有哪些属性在html5中哪些元素具有盒子模型
HTML盒模型基本属性有哪些 CSS盒子模型就是在CSS技术所使用的一种思维模型.CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个 ...
CSS 弹性盒子布局使用方法介绍
标题 CSS 弹性盒子布局 CSS 属性应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...
CSS学习—盒模型和布局模型
最近做的小项目需要搭建一个小网站,因此从慕课网上学习HTML+CSS的基础知识,将接触到的知识点用这个博客总结出来. 一.盒模型 1.元素分类在CSS中,html中的标签元素大体被分为三种不同的 ...
标准盒模型与怪异盒模型
盒模型 css 中盒模型有两种,分别是标准模式和怪异模式. 两种模式的区分使用document.compatMode将会得到"CSS1Compat"或"BackComp ...

php盒子模型,CSS的盒子模型介绍

php盒子模型,CSS的盒子模型介绍相关推荐

最新文章

热门文章