css3 重要属性,css3强大属性详解（一）

css3强大属性详解(一)

发布时间：2020-03-26 15:59

前端接触最多的是html和css,但是自从有了html5，css3也一起捆绑的出现了，自此，想知道css3到底是什么？

其实css3也是一种样式表，它和css一样，也是可以控制页面的布局、字体、颜色、背景等，只要对相应的代码做一些修改，就可以改变页面的外观和格式，但是css3提供了更多的新途径去改善新设计，也是一大重要变化，css3是向着模块化发展，它包含了盒子模型、列表模块、超连结方式、语言模块、背景和边框、文字特效、多栏布局，从css3增加了更多的选择器，目的是为实现更强大的功能。

css3盒模型即为弹性盒模型，它决定一个盒子在其他盒子中的分布方式及如何处理可用空间，使用改模型，可以很轻松的创建自适应浏览器窗口的流动布局或适应字体大小的弹性布局。通常盒模型基于html的排布是垂直向上的，但是弹性盒模型可以规定顺序，也可以反转，一般开启

此功能，只要在css3中设置display属性为box(或者inline-box)便可以实现。

盒子尺寸一般情况下，盒子是不具有弹性，只有box-flex属性为1，才会富有弹性，如果盒子不具有弹性，它的大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)，如果盒子有弹性，它的大小按width、height、min-width、min-height、max-width、max-height计算。

所有盒子都是有弹性的，使用盒模型，增加一个盒子，不需要计算它的大小。在弹性盒子和非弹性盒子混排的时候，有可能出现盒子尺寸大于或者小于父盒子尺寸，此时就要处理如何在空间多余的时候该如何处理，这个主要在于两个属性值(box-align和，box-pack)。

box-align管理水平方向上的空间分布，它包含四个属性(start、end、justify、orcenter)；

start表示：所有盒子在父盒子的左侧，余下的空间在右侧；

end所有盒子在父盒子的右侧，余下的空间在左侧；

justify余下的空间在盒子间平均分配；

center可利用的空间在父盒子的两侧平均分配。

box-align管理垂直方向上的空间分布，它包含五个属性(start、end,、center、baseline和stretch)；

start每个盒子沿父盒子的上边缘排列，余下的空间位于底部；

end每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；

center可用空间平均分配，上面一半，下面一半；

baseline所有盒子沿着它们的基线排列，余下的空间可前可后；

stretch每个盒子的高度调整到适合父盒子的高度。

如果空间不足又该如何处理：

一般在css中，可以通过overflow来将其隐藏，但是css3可以通过设置box-lines为multiple使其换行显示。

css3对做前端来讲，对解决网页中表单布局、垂直居中等功能都有非常方便的解决之道。