Css盒子模型及属性

目录

什么是Css盒子模型？

一、宽度（width）和高度（height）

二、外边距（margin）、边框（border）及内边距（padding）

三、position定位和浮动

---

---

什么是Css盒子模型？

其本质是一个盒子，用来封装周围的HTML元素，它不光有宽度（width）、高度（height）、外边距（margin）、边框（border）、内边距（padding）、五种属性，还有position定位和浮动两种定位方法。

一、宽度（width）和高度（height）

每个盒子都可以设置不同的宽度和高度，我们想要多宽、多高的盒子就可以设置它们的宽度（width）和高度（height），代码如下所示：

 <div style=" width: 200px; height: 200px;">

 </div>

通过行内样式我们可以将盒子宽度、高度都设置成自己想要的大小，代码中设置的宽度（width）是200px，高度（height）也是200px

二、外边距（margin）、边框（border）及内边距（padding）

外边距是盒子与页面边距的距离，如图中的外边距（margin）所示

内边距是盒子内的内容与盒子边框的距离，如图中的内边距（padding）所示

边框是盒子的四条线，如图中的边框（border）所示

设置外边距、内边距元素的示例和含义如以下代码、注释所示： 

margin: 5% 30%;(2%代表上下外边距，5%代表左右外边距)		
<!-- 只有两个数值时表示上下、左右同时改变外边距 -->
margin-top(top可以换位right、bottom、right): 5%;		
<!-- 表示分别设置上、下、左、右内边界的外边距 -->
padding: 2% 5%;
<!-- 2%代表上下内边距，5%代表左右内边距。只有两个数值代表上下，左右同时改变内边距 -->
padding-top: 5%;		
<!-- top可以换成right、bottom、right，分别表示上、下、左、右内边界的内边距 -->
padding: 2% 2% 2% 2%;					
<!-- 同时设置四个内边距，顺序必须为上、右、下、左 -->

这里还有一些盒子中可以使用的元素，如下代码、注释所示： 

overflow: auto;						    <!-- 溢出的内容会自适应 -->
overflow: hidden;						<!-- 溢出的内容会隐藏 -->	
overflow: visible;						<!-- 溢出的内容依然会显示(默认) -->
overflow: scroll;						<!-- 溢出的话会显示滚动条 -->
box-sizing: border-box;					<!-- 不让盒子撑开(不让左右滑动) -->

三、position定位和浮动

position定位如下代码及注释所示：

position: relative; 	
<!-- 相对定位（relative）：元素相对于自己默认的位置来进行位置上的调整 -->
position: absolute;	
<!-- 绝对定位（absolute）：元素相对于自己父类的位置来进行位置上的调整，父类也必须设置一个位置定位 -->
top: 15%;		
<!-- 偏移量：在相对定位或绝对定位下设置四个方向的偏移量 -->
position: fixed;	
<!-- 固定定位（fixed）：滑轮滑动时固定在一个地方 -->
bottom: 5%;	
<!-- 在固定定位下设置滑轮滑动时该标签与下方的距离 -->

浮动如下代码及注释所示：

float: left;		 
<!-- 设置盒子向左浮动 -->
float: right;	
<!-- 设置盒子向右浮动 -->
clear: both;	
<!-- 清除浮动 -->
clear: left;		
<!-- 清除左浮动 -->
clear: right;	
<!-- 清除右浮动 -->

---