html 盒子模型与布局设置

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

这里其实需要学习html的盒子模型，还有位置的方式。

 

CSS 盒子模型(Box Model)

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

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

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

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

 

 

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

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

--static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。也就是和没写position一样的效果。

--fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，相当一个壁纸标签一样一动不动像镶嵌在屏幕里一样，在很多网站尤其是购物网站里面经常能看到，你看到页面侧边那静静躺在那的导航栏就是用fixed实现的

--relative与absolute：相对定位元素的定位是相对其正常位置。每个标签的样式设置从来都是针对自己的，但是会对其余标签产生相对影响，html很重要的一点就是嵌套关系即标签里有标签，

为了解决定位，关键就是使用relative与absolute属性。

可以在外面设置一个div块，把内容包在div块里面，设置div的margin值，这样就可以设置好相对位置了。

 

 

 

 

参考资料：

CSS 盒子模型
https://www.runoob.com/css/css-boxmodel.html

CSS position 属性
https://www.w3school.com.cn/cssref/pr_class_position.asp

 

HTML的relative与absolute区别
https://blog.****.net/Toomeout/article/details/81220756

html中相对位置与绝对位置
https://blog.****.net/qq_35360864/article/details/80656270