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

我就是我 2022-05-19 10:36 251阅读 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 条评论，251人围观）

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

相关阅读

相关 CSS样式中选择器+盒子模型+定位+浮动

CSS样式中选择器+盒子模型+定位+浮动一、选择器 > 选择器，选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html...

短命女/ 2024年04月20日 11:25/ 0 赞/ 72 阅读

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

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

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

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

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

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

相关【CSS】——盒子模型

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

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

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

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

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

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

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

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

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

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

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

相关 css之盒子模型

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

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

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

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

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

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

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

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