---
title: 盒子模型
date: 2024-06-06T23:49:22Z
tags: []
---

## 常用的长度单位

1. px(像素)
2. em(相对于当前元素或其父(祖)元素的font-size的倍数)
3. rep(相对于根元素的font-size的倍数)
4. %(相对其父元素的百分比)

## 元素的显示模式

### 块元素(block)

又称:块级元素
特点:

1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列
2. 默认宽度:撑满父元素
3. 默认高度:由内容撑开
4. 可以通过CSS设置宽高

名称:

1. 主题结构标签:`<html>`,`<body>`
2. 排版标签:`<h(n)>`,`<hr>`,`<p>`,`<pre>`,`<div>`
3. 列表标签:`<ul>`,`<ol>`,`<li>`,`<dl>`,`<dt>`,`<dd>`
4. 列表相关标签:`<table>`,`<tbody>`,`<thead>`,`<tfoot>`,`<tr>`,`<caption>`

## 行内元素(inline)

又称:内联元素
特点:

1. 在页面中不独占一行,一个中不能容纳下的行内元素,会在下一个继续从左到右排列
2. 默认宽度:由内容撑开
3. 默认高中:由内容撑开
4. 无法通过CSS设置宽高

名称:

1. 文本标签:``,`<em>`,`<strong>`,`<sup></sup>`,`<del></del>`
2. `<a>`与`<label>`

## 行内块元素(line-block)

又称:内联元素(line-block)
特点:

1. 在页面中不独占一行,一行不能容纳下的内元素,会在下一行继续从左到右
2. 默认宽度:由内容撑开
3. 默认高度:由内容撑开
4. 可以通过CSS设置

名称:

1. 图片:`<img>`
2. 单元格:`<td>`,`<th>`
3. 表单控件:`<input>`,`<textarea>`,`<select>`,`<button>`
4. 框架标签:`<ifeame>`

### 改变元素显示效果

属性名:display
属性值:

1. none:元素会被隐藏
2. block:作为块元素显示
3. inline:作为内联元素显示
4. inline-block:元素作为行内块元素显示

## 盒子模型的组成

1. margin(外边距):盒子与外界的距离
2. border(边框):盒子的边框
3. padding(内容边):紧贴内容的补白区域
   4.content(内容):元素的文本或后代元素都是他的内容

## 默认宽度

总宽度:父的content-自身的margin
内容区的宽度:父的content-自身的左右margin-自身的左右的border-自身的左右padding

## 盒子内边距(padding)

|CSS属性名|功能|属性值|
| :--------------: | :----------: | :---------------------------------: |
|padding-top|上内边距离|长度|
|padding-right|右内边距离||
|padding-bottom|下内边距离||
|padding-left|左内边距离||
|padding|复合属性|长度,可以设置4个值|

padding复合属性使用规则

1. 设置1个值,四个边距
2. 设置2个值,上下,左右
3. 设置3个值,上,左右,下
4. 设置4个值,上,右,下,左

注意点

1. 值不能为负数
2. 行内元素的左右边距没问题,上下边距不能完美设置
3. 块级元素,行块级元素,四个方向的内边距都可以完美设置

## 盒子的边框

|CSS属性名|功能|属性值|
| ----------------| --------------------------------------| ---------------|
|border-width|宽度复合了四个方向的边框宽度|长度,默认3px|
|border-color|边框线颜色复合了四个方向的边框颜色|颜色,默认为黑色|
|boder-left|||
|boder-left-style|||
|boder-left-width|分别设置各个方向的边框|同上|
|boder-left-color|||
|right/top/bottom|||

## 盒子的外边距

|CSS属性名|功能|属性值|
| -------------| --------------------| ------|
|margin-left|左外边距|长度|
|margin-right|右外边距|长度|
|margin-top|上外边距|长度|
|margin-bottom|下外边距|长度|
|margin|复合属性,可以写4个值|长度|

规则

1. 子元素的margin,是参考父元素的content计算的
2. 行内只能设置左右
3. 可以是负值

塌陷问题

1. 什么是塌陷
   第一个子元素和最后一个子元素的margin会作用在父元素上的
2. 如何解决margin塌陷?
   1. 给父元素设置不为0的padding
   2. 给父元素设置不为0的border
   3. 给父元素设置css样式`overflow:hidden`

合并问题
什么是margin合并?
上面兄弟元素的下外边界的下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加
如何解决margin塌陷?
无需解决,布局时上下的兄弟元素,只设置一个上下外边距就行

## 处理内容溢出

|CSS属性名|功能|属性值|
| ------------| ----------------------------| ---------------------------------------------------------------------------------------------|
|overflow|溢出内容处理方式|​`visible`​:显示,默认值`hidden`​:隐藏`scroll`​:显示滚动条,无论是否溢出`auto`​:自动显示滚动条.内容不溢出不显示|
|overflow-x|水平方向溢出内容的处理方式|同overflow|
|overflow-y|纵向方向溢出内容的处理方式|同overflow|

## 元素隐藏的两种方式

方式一:visibility属性
默认为`show`,设置`hidden`会隐藏,会占位
方式二:display属性
设置`none`,会隐藏，也不会占位

## 布局小技巧

1. 行内元素,行内块元素都可以被父元素当作文本处理
2. 如何让子元素,在父元素中水平居中
   - 若子元素为块元素,给父元素加上:`margin:0 auto`
   - 若子元素为行内元素,行内块元素,给父元素加上:`text-align:center`
3. 如何让子元素,在父元素中垂直居中
   - 若子元素为块元素,给子元素加上:`margin-top`,值为:(父元素content-子元素盒子总高)/2
   - 若子元素为行内元素,行内块元素
     让父元素的`height=line-height`,每个子元素都加上:`verticall-align:middle`
     补充:若想决定垂直居中,父元素`font-size`设置为`0`

## 元素之间的空白问题

产生的元素:
行内元素,行内块元素,彼此之间的换行会被浏览器解析为一个空白字符
解决方案:

1. 去掉换行和空格
2. 给父元素设置`font-size:0`,再给需要显示的文字,程序设置字体大小

## 行内块的幽灵空白元素

产生原因:
行内块元素与文本的基线对齐,而文本的基线与文本最低端是由一定的间距
解决方案

1. 给行内块设置`vertical`,值不为`baseline`即可,设置为`middel`,`bottom`,`top`均可
2. 若父元素中只有一张图片,设置图片为`display:block`
3. 给父元素设置`font-size:0`,如果该元素有文本,则需要单独给该文本设置大小
