CSS基础之盒模型

盒模型

基础知识

box: 盒子, 每个元素在页面中都会生成一个矩形区域(盒子)

盒子类型:

1. 行盒, 即display等于inline的元素
2. 块盒, 即display等于block的元素

行盒在页面中不换行,块盒独占一行,display默认值为inline,且不能继承.

浏览器默认样式表中设置的块盒: 容器元素, h1~h6, p
常见的行盒: span, a,img,video,audio

盒子的组成部分

无论是行盒还是块盒, 都由以下几部分组成,从内到外分别是:

1. 内容 content(上图中蓝色部分)

   width, height,设置的盒子内容的宽高
   内容部分通常叫做整个盒子的内容盒 content-box

2. 填充(内边距) padding(上图绿色部分)

   盒子边框到盒子内容的距离
   有padding-left, padding-right, padding-top . padding-bottom
   可以简写为padding;
   padding: 上 右 下 左 (顺时针)

h1{
padding: 1px 2px 3px 4px;
}

填充区+内容区=填充盒 padding box

3. 边框 border(速写属性,上图中黄色部分)

   边框=边框样式(border-style)+边框宽度(border-width)+边框颜色(border-color)
   默认边框样式为none, 所有显示不出来
   默认边框的颜色为内容区字体颜色

h1{
	border:solid 1px red // 边框样式为实线,宽1像素,颜色红色
}

其他边框样式:
border-style: double; 双线
border-style:groove; 立体

圆角控制:
border-radius:50% (圆)
单独控制:border-top-left-radius:30px
速写: border-radius:30px,20px,10px,1px

边框+填充区+内容区=边框盒 border-box

4. 外边距 margin(上图中橙色部分)

边框到其他盒子之间的距离

margin-top, margin-right, margin-bottom, margin-left

速写属性: margin:10px 20px 30px 40px

5. 外边距合并

两个元素的上下边距交互, 取最大的作为统一的外边距

6. 轮廓线 outline

不占用空间位

基本使用和border相同

7. 元素隐藏
   (1) display: none ; 元素位会消失, 下面的元素会顶上来
   (2) visibility: hidden; 相当于透明度为0, 但是元素位还在

8. 根据内容适应宽度

   width: fit-content;