CSS盒子模型、定位方式及其他CSS属性

一：盒子模型

CSS盒子模型是HTML中用于布局和样式的一种模型。它将一个HTML元素看作是一个矩形盒子，由四个部分组成：

1. 内容区（content）：包含实际的文本或图像内容。
2. 填充区（padding）：围绕内容区的空间，用于控制内容与边框之间的距离。
3. 边框区（border）：围绕填充区的线条，用于边框的样式、宽度和边框的颜色。
4. 外边距区（margin）：围绕边框区的空白区域，用于控制元素与其它元素之间的距离。

通过设置这些不同的属性，可以对元素的大小、位置、颜色、边框样式等进行调整。在CSS中，可以使用box-sizing属性来控制盒子的大小，分为content-box和border-box两种模式。默认的content-box模式保留元素的宽度和高度属性，而border-box模式将它们包括在盒子的计算中，将填充和边框的空间计算为盒子的大小。

二：定位方式

CSS定位方式包括以下几种：

1. 相对定位（relative）：相对于元素自身原来的位置进行偏移定位。
2. 绝对定位（absolute）：相对于最近的已定位的父元素（半透明的块）进行偏移定位。
3. 固定定位（fixed）：相对于浏览器窗口进行偏移定位，不随页面滚动而变化。
4. 粘性定位（sticky）：介于相对定位和固定定位之间，根据滚动情况吸附在指定的位置上。

以上四种定位方式可以通过top、bottom、left、right等属性来设置元素的位置偏移。此外，还可以使用z-index属性来控制元素的堆叠顺序。

常用取值：

三：其他CSS属性

 1.浮动

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

常用取值：

• left：左浮动
• none：不浮动，默认值
• right：右浮动

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

2.清除 

通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素

常用取值：

• left左侧不出现浮动元素
• right右侧不出现浮动元素
• both两侧不出现浮动元素
• none默认值，两边出现浮动

3.元素的显示与隐藏 

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

• none不显示
• inline显示为内联元素，行级元素的默认值
• block显示为块级元素，块级元素的默认值
• inline-block显示为内联元素，但是可以设置宽和高

注释：行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了

4.轮廓属性

•  
• outline-width:轮廓宽度
• outline-color:轮廓颜色
• outline-style:轮廓样式
• outline简写

5.其他属性

5.1.设置宽高

• max-width:设置元素的最大宽度
• max-height:设置元素的最大高度
• min-width设置元素的最小宽度
• min-height设置元素的最小高度

5.2.overflow属性 

常用属性：

• visible溢出时可见，显示在元素外，默认值
• hidden溢出的部分不可见（常用）
• scroll无论是否出现溢出始终出现滚动条
• auto溢出时自动出现滚动条