CSS结构与布局

时间 2019-12-10

标签 css 结构布局栏目 CSS 繁體版

原文原文链接

title: 结构与布局
date: 2016-12-11
tags: CSS Secrets浏览器

0x00 min-content 宽度自适应

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

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，将其简化复用flex

/*定义混合器*/
@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个子元素以外的全部子元素。spa

ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
    /*当列表中至少包含四项时，命中包括该项以后的全部列表项*/
}

固然，不止于此，:nth-child()的玩法彻底取决于你的脑洞。设计

0x02 calc

有时，若须要去实现一个 背景宽度满屏，内容宽度固定 的布局，也许咱们会去这样设计 DOM 结构code

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

CSS 样式:orm

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%);
}

不过，该方法也是存在不足的:
1.在某些浏览器中，可能会致使模糊显示，由于元素有可能被放置在半个像素上。
2.在并不适合使用绝对定位的状况下。并且绝对定位对整个布局的影响也太过强烈。

基于 FlexBox 的解决方案

毫无疑问，这算是目前最佳的解决方案了。而且，现代浏览器对 FlexBox 的支持已经至关高了。

对基于 FlexBox 容器的 items 使用 margin:auto 不只能够在水平方向方居中，垂直方向上亦是如此，即便不指定任何宽度，由于这个元素分配到的宽度等于 max-content.

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;
}

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!