没有flexbox弹性盒子，但我们还有table

KunMinX 发布于2019-08-28 18:22 / 1954人阅读

摘要：结构左基线向左移动右基线向右移动一定要使用属性自己不熟悉的自行主要是为了好设置宽度都是相对于父元素的即将父元素平均分成了等份。

由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下：

github地址

display:table

源码里面很多将父元素display属性设为display: table。这个时候再将子元素display属性设置为inline-block属性后，运用text-align属性即可进行水平居中，水平靠左，水平靠右。

负margin

负margin的使用技巧和应用场景其实还是挺广泛的，比如使用float和负margin现实圣杯布局，双飞燕布局等等。

具体的使用技巧和参照文章：
由浅入深漫谈margin属性
不要告诉我你懂margin
我知道你不知道负margin

然后在kitecss里面的时候主要是运用在了栅格布局上面。

    html结构：
    
    
        
            .is-4of12
        
        
            .is-4of12
        
        
            .is-4of12
        
    
    
    css：
    .kite {
        font-size: 0 !important;
    }
    .kite--grid.has-gutter {
        display: block;
        width: auto;
        margin-left: -10px;     //左基线向左移动10px
        margin-right: -10px;    //右基线向右移动10px
    }
    .kite_item {
        box-sizing: border-box;     //一定要使用border-box属性(自己不熟悉的自行google)
        display: inline-block;  //主要是为了好设置宽度
        width: 33.3333%;    //都是相对于父元素的33.3333%,即将父元素平均分成了3等份。
        font-size: 1rem;
        vertical-align: top;    //元素在水平线上的对齐方式
        padding-left: 10px;     //左内边距10px
        padding-right: 10px;    //右内边距10px;
    }

看到图上左右2边的线条没，这其实就是父元素.kite--grid的左右边界

3个子元素的宽度都是33.333%，平均的3等份，但是设置padding-left和padding-right的值都为10px的时候，正好和左右负margin抵消，这样就是现实了3列等宽布局。

垂直居中

    html结构：
    
        
            1
        
    
    
    css：
    .kite--position {
        display: block;
        position: absolute;
        top: 0;     //使用绝对定位也可以实现自适应哦~
        right: 0;
        height: 150px;
        text-align: center;//子元素的display属性为inline-block，因此可以实现水平居中
        font-size: 0;
    }
    .kite--position::after{ 
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle;
    }
    .kite__item {
        display: inline-block;
        font-size: 1rem;
        box-sizing: border-box;
    }
    .fixture {
        border: 1px solid #489;
        margin-bottom: 16px;
        min-height: 48px;
        background-color: rgba(108,200,220,0.75);
    }

css当中使用比较巧的是利用.kite--position的伪元素(content属性一定不能省，可以把值设为"")，生成一个行内元素，其高度为100%，即为父元素的高度。同时，.kite--position的子元素也声明为行内元素，因此这个时候可以利用vertical-align属性进行垂直居中.

width:auto

这个属性平时用的不多，看源码的时候看里面用的很普遍，它的用法和width:100%还是有点区别的。
比如遇到这种结构:

    
        123123
    
    
    .parent {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        border: 1px solid #e3e3e3;
    }
    .child {
        width: auto 或者 100%;
        //可以设置不同margin和padding看下效果
        border: 1px solid #e3e3e3;
    }

一般块级元素如果不添加float或者绝对定位或者设定宽度的话，它的宽度默认为100%.这个宽度仅仅是内容的宽度，如果你再设置padding或者margin值，会保持width不变，会出现盒模型伸长或者移动位置的情况。

    width = 内容

但是如果你设置为width: auto，它起到的作用实际上和申明box-sizing: border-box的一样。

    width = 内容 + padding + border;

你再怎么设置padding值和border值都是在width这个宽度里面进行设置。

可以到codepen上看看
codepen.io

GPU云服务器云服务器 linux磁盘满但没有找到弹性公网IP 有没有优惠弹性公网IP 有没有打折活动 flexbox

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111206.html

认识flexbox布局

摘要：对于原有布局很多都是基于和这样的布局，但是新一代问世后出现了现在风靡的布局方案，其布局理解大大的迎合了现在前端开发中的布局需求什么是布局是的简称，可以直观的理解成弹性布局，是对盒子模型的一种灵活表现。对于css原有布局很多都是基于float和display:table这样的布局，但是新一代CSS3问世后出现了现在风靡的flex布局方案，其布局理解大大的迎合了现在前端开发中的布局需求！...

fasss 2019-08-30 14:15 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
CSS学习摘要-布局

摘要：注全文摘自介绍布局页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流周边元素父容器或者主视口窗口的位置。添加此代码将给出以下结果绝对定位绝对定位绝对定位用于将元素移动到页面的任何位置，以创建复杂的布局。注：全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面...

bigdevil_s 2019-04-23 13:39 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0