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

Dear 丶 2021-09-24 16:58 381阅读 0赞

**目录**

一、标准流

块级元素

行内元素

与HTML元素之间的区别

二、盒子模型

三、浮动(Float)

四、定位(Position)

--------------------

## 一、标准流 ##

**标准流**指的是元素排版布局过程中，元素会**默认**自动从左往右，从上往下的**流式排列方式**。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

### 块级元素 ###

*  霸占一行，不能与其他任何元素并列
 *  能设置宽与高

### 行内元素 ###

*  与其他元素并列、
 *  不能是指宽与高，默认的宽度就是文字的宽度

### 与HTML元素之间的区别 ###

![20200920100813829.png][]

标准流里面的限制特别多。标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

## 二、盒子模型 ##

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

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

一张图解释一下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70][]

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

## 三、浮动(Float) ##

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

img{
        float:right;  //左浮动
        float:left;  //右浮动
        clear:boty;  //清除浮动
    }

## 四、定位(Position) ##

position 属性指定了元素的定位类型。

position 属性的五个值：

*  static：默认值，即没有定位，遵循正常的标准流对象
 *  relative：相对定位、相对于某元素
 *  fixed：元素的位置相对于浏览器窗口是固定位置。
 *  absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
 *  sticky：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 **position:relative** 与 **position:fixed** 定位之间切换。

博文至此，关于div+css的核心内容就写完了，**如果本篇博客对您有一定的帮助，大家记得留言+点赞哦。**

[20200920100813829.png]: /images/20210923/854208a3bc1c455cb0a544bfb13467fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70]: /images/20210923/f5852d0882434de38fe87b9be642fa2d.png