CSS2基础笔记（5）---- CSS盒子模型1

sangyu421

已于 2023-04-26 22:46:39 修改

阅读量217

点赞数 1

分类专栏：前端文章标签： css 笔记 html 前端 vscode

于 2023-04-26 22:40:44 首次发布

本文链接：https://blog.csdn.net/m0_61332945/article/details/130394688

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

一、CSS盒子模型

一、CSS盒子模型

1.CSS长度单位

1.px：像素
2.em：相对元素font-size的倍数
3.rem：相对根字体大小，html标签就是根
4.%：相对父元素计算

注意：在CSS中设置长度的时候，必须要加单位，否则样式无效

2.元素的显示模式

块元素：block，又称：块级元素

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

行内元素：inline，又称：内联元素

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

行内块元素：inline-block，又称：内联块元素

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

3.总结各元素的显示模式

块元素：block

 1.主体结构标签：<html>、<body>
 2.排版标签：<h1> ~ <h6>、<hr>、<p> 、<pre>、<div>
 3.列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
 4.表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
 5.<form>与<option>

行内元素：inline

 1.文本标签：<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
 2.<a>与<label>

行内块元素：inline-block

 1.图片：<img>
 2.单元格：<td>、<th>
 3.表单控件：<input>、<textarea>、<select>、<button>
 4.框架标签：<iframe>

4.修改元素的显示模式

通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：

值	描述
none	元素会被隐藏
block	元素将作为块级元素显示
inline	元素将作为内联元素显示
inline-block	元素将作为行内块元素显示

5.盒子模型的组成

CSS会把所有的HTML元素看成一个盒子，所有的样式也都是基于这个盒子。

 1.margin（外边距）：盒子与外界的距离。
 2.border（边框）：盒子的边框。
 3.padding（内边框）：紧贴内容的补白区域。
 4.content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右padding + 左右border
注意：外边框margin不会影响盒子的大小，但是会影响盒子的位置。

6.盒子内容区（content）

CSS属性名	作用	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度