CSS之盒子模型基础介绍

最新推荐文章于 2023-06-21 06:45:00 发布

幻阳梦天

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量142

点赞数

分类专栏： CSS 文章标签： css 前端 vscode

本文链接：https://blog.csdn.net/qq_53977993/article/details/127372614

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

为什么本章讲的是盒子模型，我却说起了文档流呢？

答：认识文档流会更方便我们去了解盒子模型。

文档流

我们知道网页是一个多层的结构。设置样式，也是一层一层的设置，最终我们看到的是最上面的一层，文档流是网页的最底层。我们创建的元素默认情况下，都在文档流中，元素分为两种状态：在文档流中、脱离文档流。

元素在文档流中的特点

           块元素
           1:会独占一行
           2:块元素的宽度默认是父元素的100%
           3:块元素的高度默认是被内容撑开的

		   内联元素（行内元素）
           1:不会独占一行
           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

           行内块元素
           1、不会独占一行，可以设置宽高

注意：一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分的元素类型、特点都不复存在！

盒子模型

盒子模型又称盒模型或框模型，英文名称为Box Model。

在学习盒子模型时，你可能会疑惑：什么是盒子模型，为什么要用盒子模型，影响盒子模型的大小因素都有哪些？

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有：padding（内边距）margin（外边距）border（边框）内容（content）[也就是元素本身的width,height] 四个属性，这就是盒子模型。

为什么要用盒子模型？

盒子模型主要是用来针对页面布局，它规范了我们页面所有元素的一个布局规范(是由外向内进行布局)。

影响盒子模型的大小因素都有哪些？

如果将盒子模型比作买冰箱，内容区是冰箱的主体，边框是最外面包裹冰箱的纸盒子，内边距则是冰箱与纸盒子之间的泡沫板，而外边距就相当于冰箱与你的距离。所以内容区，内边距，边框会影响盒子的大小，外边距不会影响。

内容区 (content)

元素中所有的子元素和文本内容都在内容区中排列。默认情况：设置width，height都是内容区宽高。

边框（border）

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。设置边框必须指定三个样式：边框大小：border-width、边框样式：border-style、边框颜色：border-color。

边框的大小

注意：如果省略，必有默认值，大概1-3px ，不同的浏览器默认大小不一样。

border-width:10px 20px 30px 40px; 四个值   上   右  下  左
border-width:10px 20px 30px;      三个值   上  左右   下
border-width:10px 20px;           二个值   上下  左右
border-width:10px;                一个值   上下左右

也可以单独设置某一边的边框宽度

         border-top-width：10px;        上边框宽度
         border-bottom-width：10px;     下边框宽度
         border-left-width：10px;       左边框宽度
         border-right-width：10px;      右边框宽度

边框的样式

border-style：none;      默认值
              solid      实线
              dashed     虚线
              double     双线
              dotted     点状虚线

边框的颜色

注意：如果省略，必有默认值，且默认值为黑色。

border-color:red yellow blue green;  四个值   上   右  下  左
border-color:red yellow blue;        三个值   上  左右   下
border-color:red yellow;             二个值   上下  左右
border-color:red;                    一个值   上下左右

也可以单独设置某一边的边框颜色

border-top-color:red;        上边框颜色
border-bottom-color:red;     下边框颜色
border-left-color:red;       左边框颜色
border-right-color:red;      右边框颜色

border简写

1、可以同时设置边框的大小，颜色，样式，没有顺序要求。

border: 3px solid red;

2、可以单独设置一个边框。

              border-top:3px solid red;     设置上边框
              border-right:3px solid red;   设置右边框
              border-bottom:3px solid red;  设置下边框
              border-left:3px solid red;    设置左边框

3、去除某个边框。

 border:none;         去除所有边框
 border-top:none;     去除上边框
 border-right:none;   去除右边框
 border-bottom:none;  去除下边框
 border-left:none;    去除左边框

内边距 (padding)

内边距是内容区和边框之间的距离，会影响到整个盒子的大小。

padding:10px 20px 30px 40px; 四个值   上   右  下  左
padding:10px 20px 30px;      三个值   上  左右   下
padding:10px 20px;           二个值   上下  左右
padding:10px;                一个值   上下左右

可以单独设置内边距。

 padding-top:10px;     上内边距
 padding-right:10px;   右内边距
 padding-bottom:10px;  下内边距
 padding-left:10px;    左内边距

外边距 (margin)

外边距不会影响到盒子的大小,但可以控制盒子的位置

           margin:10px 20px 30px 40px; 四个值   上   右  下  左
           margin:10px 20px 30px;      三个值   上  左右   下
           margin:10px 20px;           二个值   上下  左右
           margin:10px;                一个值   上下左右

可以单独设置外边距。

           margin-top:;     正值 元素向下移动  负值 元素向上移动
           margin-left:;    正值  元素向右移动  负值  元素向左移动
           margin-bottom:;  正值  元素自己不动，其靠下的元素向下移动，
                            负值 元素自己不懂，其靠下的元素向上移动。
           margin-right:;   正值负值都不动