盒子的标准流
块级元素:与同级的兄弟依次竖直排列,左右撑满。如<div>
行级元素:横向排列,到最右端自动折行。如<span>
盒子定位:margin用于指定盒子之间的距离。
行元素之间的距离为:margin right+margin left
块元素之间的距离为:max(margin bottom,margin top)即两者之间的最大值。
嵌套盒子之间的margin:
在一个<div>之中包含另一个<div>
一个块级元素的盒子水平方向的宽度会自动延伸至上一级盒子的限制。
高度方向自动收缩到能够包容下内容的最小高度。
宽和高的自动伸缩都是在没有设定width和height的情况下的表现。
如果设定width和height,则盒子的实际宽度和高度都会按照实际值来确定。盒子的实际大小width(height)+padding+border+margin
IE中如果父容器的高度值小于子容器的高度加上margin值,父容器会自动扩大。
margin的属性设为负值时,会使块向相反的方向移动,甚至覆盖在另外的块上。
盒子的浮动与定位
在标准流中,一个块级元素在水平方向会自动伸展直到包含它的元素的边界,而在竖直的方向和兄弟元素依次排列,不能并排。使用浮动后,会有所不同。
css中有一个float属性,默认为none,也就是使用标准流的情况。
如果将float属性,设定为left或right,元素会向其父元素的左侧或右侧靠紧,同时盒子的宽度不再伸展,而是收缩,根据盒子里面的内容的宽度来确定。
分享到:
相关推荐
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素(图片、段落、单元格等)进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本节主要介绍...
**CSS盒子模型详解** 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,其中CSS盒子模型是理解布局和元素尺寸计算的关键概念。本资料将深入探讨CSS盒子模型,帮助你掌握这一核心知识。 **一、基本概念...
**CSS盒子模型详解** 在网页设计中,CSS(层叠样式表)盒子模型是一个至关重要的概念,它定义了网页元素如何占用空间并与其他元素交互。理解盒子模型对于精确控制页面布局至关重要。本篇文章将深入探讨CSS盒子模型...
CSS 盒子模型结构剖析 CSS 盒子模型结构是 div+css 技术的基础组成部分,它主要解决了传统的 table 表格嵌套问题。盒子模型可以看成是网页的一个区块,也可以看成是大区块中的一个“区块元素”。既然是区块,...
**什么是CSS盒子模型?** CSS盒子模型由四个主要部分组成: 1. **内容(Content)**:这是盒子内的实际内容,如文字、图像等。 2. **内填充(Padding)**:位于内容区域和边框之间的空间,用来增加元素内部的距离,...
CSS盒子模型是网页布局的基础,它是CSS(Cascading Style Sheets)中用于描述网页元素在屏幕上如何显示的关键概念。在CSS中,每个元素都可以被看作一个矩形的盒子,包含内容区、内边距、边框和外边距四部分,这四个...
CSS盒子模型是CSS布局的基础,理解和掌握它对于网页设计至关重要。"京东快报"可能是一个项目或者课程,涉及到使用CSS来构建符合京东风格的页面布局。在这里,我们将深入探讨CSS盒子模型及其在实际应用中的运用。 **...
CSS盒子模型有两种不同的解析方式:标准盒模型(W3C Box Model)和IE盒模型(IE Quirk Mode)。在标准盒模型中,元素的总宽度和高度计算公式为:内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
这个模型包括四个主要部分:内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解这个模型对于精确控制元素的尺寸和...因此,深入理解和熟练掌握CSS盒子模型是每个前端开发者必备的技能之一。
### CSS盒子模型详解 #### 一、引言 在网页设计领域,随着技术的发展和标准的不断演进,越来越多的设计者开始放弃传统的表格排版方式,转而采用更灵活、强大的CSS(Cascading Style Sheets)来实现网页的布局与...
CSS 盒子模型 CSS 盒子模型是 CSS 的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互。在网页设计中,每个 HTML 元素都可以看作是一个装了东西的盒子,这个盒子由元素的内容、填充、边框和边界组成...
CSS 盒子模型 CSS 盒子模型,也称为框模型,是一种将 HTML 元素表示为一个矩形区域的模型。这个模型由多个部分组成,包括元素内容、内边距、边框、外边距等。 一、什么是盒子模型? CSS 盒子模型是将 HTML 元素...
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
CSS 盒子模型详解 CSS 盒子模型是 CSS 中一个基础概念,网页中大部分的元素都能构成一个盒子模型。盒子模型无非就是描述元素的尺寸跟位置,只要掌握好这两点就可以灵活的运用盒子模型来布局了。 一、基本元素和...
### CSS盒子模型详解 #### 一、概述 CSS盒子模型是网页布局的基础,它定义了元素如何占据空间以及元素间的相互关系。理解CSS盒子模型对于前端开发者来说至关重要,因为这直接影响到网页的设计与布局。 #### 二、...
CSS 盒子模型和排版 CSS 盒子模型是前端开发技术中的重要概念,它是 CSS 布局页面元素所使用的一种思维模型。在盒子模型中,所有页面中的元素被看做是一个个盒子,它们占据一定的页面空间,在其中放着特定的内容。...
**DIV CSS 盒子模型详解** 在网页设计中,DIV CSS是构建页面布局的重要工具,而盒子模型(Box Model)则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点,帮助初学者掌握网页设计的基础。 首先,...
CSS盒子模型教程学习教案.pptx