盒子模型

1 什么是盒子模型

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

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

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

2 盒子的显示模式

2.1 三种基本显示模式

① 块级显示模式

  • 自己单独占一行；设置宽高起作用,在不设置宽度的情况下,和父元素的宽度一样。
  • 具有块级显示模式的元素称之为块级元素。
  • 常见的块级元素有：div、h1-h6、 ul、 ol、 li、 dl、 dt、 dd、 hr、 p、 form 等

② 行内(内联)显示模块

  • 自己不独占一行，一行可以有多个；设置宽高不起作用,宽高靠内容撑开。
  • 具有行内显示模式的元素称之为行内元素。
  • 常见的行内元素有：span、a 、strong、 em、 ins、 del 等

③ 行内块显示模式

  • 自己不独占一行，一行可以有多个；设置宽高起作用；不设置宽度的情况下靠内容撑开。
  • 具有行内块显示模式的元素称之为行内块元素。
  • 常见的行内块元素有：img、input、textarea、select 等

注意：

① 行内元素和行内块元素水平排列的时候由于代码换行会出现一个水平间距。

② 在有些教程中，会把行内块元素也算作行内元素，因为二者皆无法独占一行。

2.2 显示模式转换

可以通过给元素设置 display 属性，来改变元素的显示模式

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）

注意： 设置 display: none, 元素将会被隐藏

3 盒子之间的关系

3.1 document 树

元素在加载过程中会形成一种树状结构

根据元素的位置，元素之间构成如下关系：

  • 父元素
  • 祖先元素
  • 子元素
  • 后代元素
  • 兄弟元素

3.2 标准文档流

  1. 行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。
  2. 块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

4 盒子的组成

img

一个盒子模型有以下四部分组成：

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

注意：

一个盒子实际的大小 = 内容的大小 + padding + border宽度。

外边距不计入盒子的大小。

4.1 内容部分

内容区是盒子模型的中心，它呈现了盒子的主要信息内容。

① 设置内容区尺寸 css 属性

  • width 内容区宽度
  • max-width 内容区最大宽度
  • min-width 内容区最小宽度
  • height 内容区高度
  • max-height 内容区最大高度
  • min-height 内容区最小高度

② 内容区默认大小

  • 如果没有设置宽度，块级元素会根据父元素大小自动计算，行内元素和行内块元素宽度根据内容大小计算。
  • 如果没有设置高度，块级、行内、行内块都会根据内容大小计算。

width 默认是 auto,auto分为4种情况：

  1. fill-available：充分利用可使用空间（块标签）
  2. fit-content: 收缩到合适（浮动，定位）
  3. min-content: 收缩到最小（表格中常见）
  4. max-content:超出容器限制（英文单词较长，或者设置了不换行，就会超出容器限制）

height 的默认值也是 auto，其高度由内部元素堆叠而成，也就是内部元素撑起来的。

块级元素的默认宽度如何根据父元素宽度自动计算：

元素设置了外边距、内边距、边框都会压缩该元素内容区域的宽度。

内容宽度 = 父元素的内容宽读 - margin（子元素） - padding（子元素） - border（子元素）。

③ 设置内容区溢出

  • overflow 设置内容溢出方式

        值          描述                          
visible    默认值。内容不会被修剪，会呈现在元素框之外。      
hidden     内容会被修剪，并且其余内容是不可见的。         
scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto       如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

  • overflow-x 设置水平方向的内容溢出方式，值与overflow属性相同。

  • overflow-y 设置垂直方向的内容溢出方式，值与overflow属性相同。

4.2 内边距 padding

内边距 padding 也叫补白或填充，是边框和内容之间的空间。

① padding 相关属性

  • padding 设置各个方向的内边距，复合属性，可以指定多个值。
  • padding-left 设置左内边距。
  • padding-right 设置右内边距。
  • padding-top 设置上内边距。
  • padding-bottom 设置下内边距。
/* padding的复合属性 */
/* 一个值  上下左右*/
padding:10px;
/* 两个值   上下   左右*/
padding:10px 20px;
/* 三个值  上  左右  下*/
padding:10px 20px 30px;
/* 四个值 上  右    下   左*/
padding: 10px 20px 30px 40px;

② padding 设置规则

  • padding 不支持负值，也不能设置为“auto”。
  • 给行内元素设置 padding 的时候，水平方向非常正常，但是垂直方向设置了 padding 之后不能撑开元素的距离。

4.3 外边距 margin

外边距是元素与父级或其他兄弟级元素的距离。

① 外边距相关属性

  • margin 设置各个方向的内边距，复合属性，可以指定多个值。
  • margin-left 设置左外边距。
  • margin-right 设置右外边距
  • margin-top 设置上外边距
  • margin-bottom 设置下外边距
/* margin 的复合属性 */
/* 一个值  上下左右*/
margin:10px;
/* 两个值   上下   左右*/
margin:10px 20px;
/* 三个值  上  左右  下*/
margin:10px 20px 30px;
/* 四个值 上  右    下   左*/
margin: 10px 20px 30px 40px;

② margin 设置规则

  • margin 可以设置为负值。
  • 对于行内元素，只有水平方向设置 margin 是有效的。ma

margin 为负值的情况：

  • margin-left为负：

    元素向左移动，并且原来的位置不保留（后边元素会紧跟上一起移动）；

    元素向左移动，并不会挤到前边的兄弟元素，而是覆盖前边的兄弟元素。

  • margin-right为负：

    元素视觉大小不发生变化;

    但是元素实际所占用的空间变小，后边元素会跟上来或者是撑不开父级宽度。

  • margin-top为负：

    元素向上移动，并且原来的位置不保留（下边元素会紧跟上一起移动），

    元素向上移动，并不会挤到上边的兄弟元素，而是覆盖上边的兄弟元素

  • margin-bottom为负：

    元素视觉大小不发生变化；

    但是元素实际所占用的空间变小，下边元素会跟上来或者是撑不开父级高度。

③ margin 塌陷

在一个元素里，第一个子元素的 margin-top 会塌陷给父级；最后一个子元素的 margin-bottom 会塌陷给父级。

解决 margin塌陷的方法：

  1. 给父元素设置一个边框 边框的宽度不能为 0 ; 防止影响视觉，可以设置透明（transparent）颜色。
  2. 父元素开启BFC（块级格式化上下文），开启 BFC 的方法很多，如设置 overflow:hidden。

④ margin 合并

左右两个兄弟元素，分别设置 margin-right（前面的元素） 和 margin-left（后面的元素），元素之间的间距是 margin-right 和 margin-left 之和。

上下两个兄弟元素，分别设置 margin-bottom（前面的元素）和 margin-top（后面的元素）, 两个元素之间的间距会取 margin-bottom 和 margin-top 之间最大的那个值，称之为 margin 合并

4.4 边框 border

① 边框相关属性

  • border 复合属性 border-left|border-right|border-top|border-bottom

    border: 边框宽度  边框样式  边框颜色

  • border-style 边框线风格 border-top-style | border-right-style | border-bottom-style | border-left-style

    dotted   点线
dashed  虚线
solid      实线
double 双实线
groove 槽状线
ridge     脊线
inset      内嵌效果
outset   外凸效果

  • border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color

  • border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width

② 边框位置

  • 边框不会显示在 margin 中。
  • 背景颜色在边框中显示（实线的时候，我们看不到）。
  • 背景图片原点没有从边框开始 而是从padding开始的，但是可能会平铺到边框中。

results matching ""

    No results matching ""