CSS之布局

本文最后更新于:19 天前

前言

布局是让你搭架子,然后一点一点实现里面的细节,关键我不会搭架子啊,大部分时候我写页面,都是准备一套现成的,虽说够用,但是还是想学学布局。
前阵子看了看安卓,妈的,安卓布局好舒服啊,会拖组件出来就能布局,回看HTML,淦。好好学,好好看。

加油嗷,哪有什么天才,我只不过把摸鱼的时间用来写博客了。

正文

CSS从来都不简单喔,大家别想的太简单了。现在最简单的可能是HTML了,JS是编程语言嘛,不是很难。CSS的动画,以及布局,感觉是很难的。深造了一段时间,
好吧,前端最难的JS我都会,CSS这种会看就能会啊。哈哈哈,鸽鸽

盒子模型介绍

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,从里到外,每个盒子都有:内容、填充padding、背景background、边框border[圆角border-radius]、边界margin[阴影shadow]等属性;同时也可以定义盒子的透明度opacity

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

每个HTML标记都可看作一个盒子,如最常用的div标签,一个div即为一个盒子,适用于盒子模型:

  • 每个盒子模型包含:内容、填充.padding、背景.bg、边框.border[圆角.radius]、边界.margin[阴影.shadow]、透明度.opacity八个属性;
  • 每个属性都包括四个位置:上top、右right、下bottom、左left;这四个位置可同时设置,也可分别设置;
  • 每个位置都可定义尺寸:微小mini、小small、大big、特大large和默认的五个大小尺寸等级。

举个箱子例子,最里面是存放物品的空间由泡沫(填充)保护着、箱子有颜色(背景)、然后箱子(边框)、最后是箱子离你的距离(边界)以及盒子的阴影,这就是一个完整的盒子模型。

图示

大致了解盒子模型,就可以定义HTML元素的内容、填充、背景、边框[圆角]、边界[阴影]、透明度等相关位置、大小、样式等属性了

平时用的最多的应该是内边距margin,padding和这个属性,千万不要有什么2021年了,还用盒模型布局,简单粗暴,能实现自己想要看的内容就行了,管你用什么布局模式。

好吧我承认

这是一篇水文,额,布局我也不是很懂,而且高深的弹性布局我只能说了解一点点,关键平时都是盒模型布局,布局模式也没有什么优劣之分,能达到你想要的效果就行了。

水了水了,下次不能随便随便新建MD文件,不然又要鸽了

尾声

你不能一边伤害这喜欢你的人,另一边又肆无忌惮的爱着你喜欢的人,不是希望你别这样,是你不能这样。

网抑云语录

封面原图

鬼刀