CSS之——盒子模型、盒子的定位与浮动

我就是我 2022-05-19 10:36 234阅读 0赞

### 一、CSS盒子模型 ###

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

![70][]

*  **Margin(外边距)** \- 清除边框外的区域，外边距是透明的。
 *  **Border(边框)** \- 围绕在内边距和内容外的边框。
 *  **Padding(内边距)** \- 清除内容周围的区域，内边距是透明的。
 *  **Content(内容)** \- 盒子的内容，显示文本和图像。

### 二、网页布局与盒子模型 ###

**1，标准文档流**

标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则；

**2，块级元素 VS 行内元素**

块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>； 行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

### 三、盒子再标准流中的定位 ###

1，行内元素之间的水平 margin

marin-right+margin-left

2，块级元素之间的竖直 margin

Margin-bottommargin-top 以大的为标准

3，嵌套盒子之间的 margin

子块的 margin 将以父块的内容为参考

4，margin 属性可以设置成负值

### 四、盒子的浮动与定位 ###

**1，盒子浮动 float**

Float 属性： 默认是 none ，按照标准流来定位；

Left：左悬浮；

Right：右悬浮；

**2，使用 clear 清除浮动的影响**

Clear 属性： 默认是 none，允许两边都可以有浮动对象；

Left： 不允许左边有浮动对象

Right：不允许右边有浮动对象

Both：不允许有浮动对象

**3，盒子定位 position**

Position 属性： 默认是 static，按照标准流来定位；

Relative：相对定位，相对于原本的标准位置偏移指定的距离；

Absolute：绝对定位，以它的*包含框*为基准进行偏移；（包含框是指含有posistion属性的盒子）

Fixed：固定定位，以浏览器窗口为基准进行定位

**4，z-index 空间位置**

Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

**5，盒子 display 属性**

Display： Inline：把元素变成内联元素；

Block：把元素变成块级元素

[70]: /images/20220519/20c21cabf38c42ac80d59642b0f8d77a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端】深入理解CSS盒子模型与浮动

目录一、前言二、盒子模型 1、盒子模型组成 1.1、border边框 1.1.1、边框的三部分

迷南。/ 2023年10月15日 07:53/ 0 赞/ 120 阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 61 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 265 阅读

相关 CSS复习之盒子的浮动和定位

今日目录 1、盒子的浮动float 2、使用clear消除浮动的影响 3、盒子定位postion

亦凉/ 2022年05月25日 10:12/ 0 赞/ 304 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 281 阅读

相关 CSS之——盒子模型、盒子的定位与浮动

一、CSS盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元

我就是我/ 2022年05月19日 10:36/ 0 赞/ 235 阅读

相关【CSS】【9】CSS盒子的浮动

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会有所不同了。 CSS有一个

雨点打透心脏的1/2处/ 2022年04月25日 05:26/ 0 赞/ 247 阅读

相关 css之盒子模型

cs盒子模型在布局中起到了相当重要的作用。不仅能过灵活的布置界面，而且相当方便。在了解盒子模型之前首先了解一下什么是行级元素以及块级元素。常用行级元素：a，input，

小咪咪/ 2021年12月12日 13:21/ 0 赞/ 297 阅读

相关 CSS核心内容：标准流、盒子模型、浮动、定位

目录一、标准流块级元素行内元素与HTML元素之间的区别二、盒子模型三、浮动(Float) 四、定位(Position) --------------

Dear 丶/ 2021年09月24日 16:58/ 0 赞/ 364 阅读

相关 css 怪异盒子模型(ie盒子)

标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距怪异盒子设置方式:box-sizin

àì夳堔傛蜴生んèń/ 2021年07月24日 14:07/ 0 赞/ 571 阅读