CSS构造与规划

2019年8月31日 101次阅读 来源: onejustone404

title: 构造与规划
date: 2016-12-11
tags: CSS Secrets

0x00 min-content 宽度自适应

CSS3 新增宽度属性值 width:min-content 能够将容器的宽度值设置为容器内最大的不可断行的宽度(最宽的单词，图片，或许具有牢固宽度的盒元素)

figure{
    width:min-content;
    margin: auto;    
}

0x01 依据兄弟元素的数目来设置款式

我们晓得伪元素挑选器 :only-child,实在，它能够等效于:first-child:last-child，即是第一项的同时也是末了一项，所以从逻辑上来说它是唯一的。而:last-child 也是:nth-last-child(1)的快速写法。

那末接下来思索一个题目，li:first-chidl:nth-last-child(4) 代表什么?结果是 _一个恰好有四个列表项的列表中的第一项_,ok,再连系兄弟挑选符~来掷中它今后的每一项，就能够到达如许一个目的在恰好包含四个列表项的时刻，掷中它的每一项

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  
    background: red;
}

连系 SASS，将其简化复用

/*定义混合器*/
@mixin n-items($n){
    &:first-child:nth-last-child(#{$n}),
    &:first-child:nth-last-child(#{$n}) ~ &{
        @content;
    }
}

/*挪用*/
li {
    @include n-items(4){
        /*属性与值写在这里*/
        background: red;
    }
}

:nth-child()

nth-child()的壮大的处所在于以接收an+b情势的表达式，那末天然便能够运用其变种 nth-child(n+4) 这类情势，它将会挑选除了第1,2,3个子元素以外的一切子元素。

ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
    /*当列表中最少包含四项时，掷中包含该项今后的一切列表项*/
}

固然，不止于此，:nth-child()的弄法完整取决于你的脑洞。

0x02 calc

偶然，若需要去完成一个 背景宽度满屏，内容宽度牢固 的规划，或许我们会去如许设想 DOM 构造

<footer>
    <div class="wrapper">        
    </div>
</footer>

CSS 款式:

footer{
    background: #333;
}

.wrapper{
    max-width: 900px;
    margin: 1em auto;
    height: 200px;
}

运用 calc() 要领今后，就没必要云云麻烦了，我们只需三行代码即可完成:

footer{
  background:#333;
  padding:1em calc(50% - 50px);
 }

运用了 clac() 便能够在 CSS 中举行简朴的算术运转，这使得 DOM 构造变得异常简约，没有任何的冗余，固然，瑕玷也是不言而喻的，这里的代码只会在 footer 元素的父级凌驾 900 px 才会看出结果。

calc() 中的百分比是基于其父级举行剖析的

但，我们首次相识到了CSS3 中cacl() 这个魔法技能。

0x03 垂直居中

基于相对定位的处理方案

CSS 中有一个很罕见的征象，真正的处理要领每每来自于我们最意想不到的处所。比方，能够连系 positon:absolute 和 transform:translate() 属性来完成垂直居中

由于 translate() 变形函数中的百分比是依据这个元素本身的宽度和高度为基准举行换算的，云云一来，便能够完全消除对牢固尺寸的依靠。

示例:DOM 构造

<body>
    <div class="main">
        <h1>Am i center?</h1>
        <p>Center me ,please!</p>
    </div>
</body>

CSS代码:

.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

《CSS构造与规划》

不过，该要领也是存在不足的:
1.在某些浏览器中，能够会致使隐约显现，由于元素有能够被安排在半个像素上。
2.在并不合适运用相对定位的情况下。而且相对定位对全部规划的影响也太甚猛烈。

基于 FlexBox 的处理方案

毫无疑问，这算是现在最好的处理方案了。而且，当代浏览器对 FlexBox 的支撑已相称高了。

对基于 FlexBox 容器的 items 运用 margin:auto 不仅能够在程度方向方居中，垂直方向上亦是云云，纵然不指定任何宽度，由于这个元素分配到的宽度即是 max-content.

《CSS构造与规划》

FlexBox 的另一个优点是能够文本也举行垂直居中， 只需对运用display:flex 的元素增加 align-items:center 和 justify-content:center。

.main{
    background: deeppink;
    width: 50%;
    height: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

《CSS构造与规划》

0x04 紧贴底部的页脚

偶然，我们希冀页头和页脚的高度由其内部因夙来决议，而内容区块的高度能够自动压缩并占满一切可用的空间。一样，应用 FlexBox 这很轻易。

body {
    min-height: 100vh;
    display:flex;
    flex-flow: column;

    header{
        /*heaer style*/
    }
    
    .main{
        flex:1;
    }

    footer{
        /*footer style*/
    }
}

我们给了 body 一个 min-height:100vh 的高度如许它最少会占有全部视口的高度，然后给予 main 一个大于 0 的 flex 值就能够了。

题目:假如页脚是牢固在屏幕的底部的呢?怎样处理当页面转动到末了的时刻保证页脚不会掩盖内容区？

关于这个题目，纯属个人主意，能够在 footer 今后增加一个 div#_footer。

此时的 DOM 构造以下：

<body>
    <header><header>
    <div class="main"></div>
    <footer></footer>
    <div id="_footer"></div>
</body>

而关于 div#_footer 而言，不需要为个中增加任何的内容和款式，只需要它的高度即是 footer 的高度就能够了，而关于这点，运用 jQuery 就能够轻松搞定。

$('#_footer').height($('footer').height())

云云，关于相应规划也能够不必忧郁了，虽然有点点hack，但也算圆满的处理了，Bingo!

    原文作者：onejustone404
    原文地址: https://segmentfault.com/a/1190000007777061
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞