前端-css盒子模型与布局设置

有时候自己开发个java web程序，需要使用网页，功能是能够实现的。但是，元素的布局和相对位置，不好设置，界面很混乱。

这里其实需要学习css的盒子模型、位置设置。

 

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

 

 

位置设置，则是使用postion属性，先来说一下postion常用的5大属性值：

--sticky：基于用户的滚动位置来定位。也就是以sticky标签定义的标签会随着页面上下移动，但是其内容却不会超过屏幕比如在网站侧边那些移动导航栏。

--static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影