ACE模板知识积累-CSS部分-1-.space

最新推荐文章于 2022-03-10 08:26:36 发布

无名大强

最新推荐文章于 2022-03-10 08:26:36 发布

阅读量945

点赞数

文章标签： HTML css ace bootstrap

本文链接：https://blog.csdn.net/wumingxiaoqiang/article/details/50674813

版权

本文介绍了ACE框架中的一系列CSS样式，如.space和.vspace，用于在垂直方向上创建不同大小的间隔。这些样式通过设置max-height、min-height、overflow和margin实现，提供了从2px到32px的间距选择。然而，存在一个疑问：为何每个样式先设定margin:12px 0，再用另一个margin覆盖？同时，每个.space样式都有对应的.vspace，其作用是什么？

摘要由CSDN通过智能技术生成

ace中有一类样式用来做垂直div之间的间隙

之前我在bootstrap框架中都会添加一个.mt10(margin-top:10px)

但ace显然比我的做法要高级得多，它定义了一套间隙样式：（取自ace.min.css美化后第686到922行）

.space {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   margin:12px 0
}
.vspace-xs,.vspace-sm,.vspace-md,.vspace-lg {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   display:none;
   margin:12px 0
}
.space-32 {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   margin:12px 0;
   margin:32px 0 31px
}
.vspace-32,.vspace-xs-32,.vspace-sm-32,.vspace-md-32,.vspace-lg-32 {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   margin:12px 0;
   margin:32px 0 31px 0
}
.space-30 {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   margin:12px 0;
   margin:30px 0 29px
}
.vspace-30,.vspace-xs-30,.vspace-sm-30,.vspace-md-30,.vspace-lg-30 {
   max-height:1px;
   min-height:1px;
   overflow:hidden;
   margin:12px 0;
   margin:30px 0 29px 0
}
.space-28 {
   max-height:1px;
   min-height:1px;
   overflow:hid