网页布局02 盒子模型

基本概念

盒子模型,英文即box model。无论是div、span、还是a都是盒子,他们在网页上都要占据一定的空间,在进行布局的时候需要考虑他们所占据的空间大小。

例外情况:图片、表单元素作为文本处理,不作为盒子模型计算。

盒子模型主要CSS属性

盒子的属性有5个:width、height、padding、border、margin。如下:

width和height:内容的宽度、高度(不是盒子的宽度、高度)。
padding:内边距。
border:边框。
margin:外边距。

盒子模型的类型

通过css的属性box-sizing设置盒子模型的类型,该属性值有两个:

content-box:表示标准盒子模型

border-box:表示IE盒子模型

标准盒子模型

标准盒子模型占据空间计算方式(横向为例):

横向占据空间=width  +  padding-left  +  padding-right  +  border-left  +  border-right  +  margin-left  + margin-right

IE盒子模型

IE盒子模型占据空间计算方式(横向为例):

横向占据空间=width    +  margin-left  + margin-right

原文地址:https://www.cnblogs.com/rask/p/9913070.html

时间: 2024-11-05 20:34:44

网页布局02 盒子模型的相关文章

CSS网页布局:盒子模型

一.盒子模型 标准盒子模型(W3C盒子) 不论是标准盒模型还是IE盒子模型,都有content.padding.border.margin四个部分组成,但从上图也可以看出W3C盒子和IE盒子主要区别在与content宽度上的区别 w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height; iE中的盒子模型

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto. auto 宽高和margin可以设置auto.对于块级元素来说,宽度设置为auto,则会尽可能的宽.详细来说,元素宽度=包含块宽度-元素水平外边距-元素水平边距宽度-元素水平内边距: 高度设置为auto,

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是

浮动布局及盒子模型

今天巩固了一周学的知识,我感觉超链接样式.背景样式.列表样式比较麻烦,还需要多加练习. 学习了盒子模型,内容不是很多,但需要注意的地方很多: 首先在设置css样式的时候先初始化 *{margin:0px:padding:0px:} 学习了div标签:不是功能标签,可以放文字图片以及各种元素的快标签,常用来布局 浮动布局 float属性 属性值 说明 left 元素向左浮动 right 元素向右浮动 clear属性 属性值 说明 left 清除左浮动 right 清除右浮动 both 左右浮动一起

网页设计前端——盒子模型

1.盒子模型的宽高以及padding和border的认识 盒子的宽高不是CSS样式的宽高,CSS样式里的宽高只是内容的宽高,而盒子真实的宽高计算:宽:内容宽+padding+边框的高度    高:内容高+padding+边框的高度.这个地方要有所意识. 2.padding是有4个方向的,要控制这4个方向有两种方法. ①用小属性的方法: padding-left:;左 padding-right:;右 padding-top:;上 padding-bottom:;下 ②综合写法: padding:

CSS初识- 选择器 &背景& 浮动& 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

CSS——(2)盒子模型与标准流

上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品外,还有填充部分的东西.盒子与盒子之间还会有间隙.如下图所示: 对于网页中的大部分对象,实际呈现形式都是一个盒子形状对象,理解了盒子模型才能更好的排版. CSS盒子模式具备的属性: 内容(content).填充(padding).边框(border).边界(margin).从上面的例子来看:内容即对应

有趣的CSS盒子模型——【牛腩新闻发布系统】

前言 传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用css排版后,通过由css定义的大小不一的盒子和盒子嵌套来编排网页.css盒子模型是div排版的核心. 说白了就是以前没用css盒子模型,html中的元素就像一堆散乱的苹果:用了之后,就变成整箱整箱的苹果摞到一起.这种方式排版的网页,代码简洁,更新方便,容易兼容多种浏览器.    css盒子模型元素和计算 通过定义一系列与盒子相关的属性(内容content.填充padding.边框border.边界margin)来控制各个

前端开发HTML&amp;css入门——盒子模型以及部分CSS样式

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局. 盒子模型 一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边距(margin) 盒子和边框   width和height background-color 盒子 设置的盒子内容区的大小 设置背景颜色