css tricks - Githubissues

tiancheng91 / collection

笔记

https://github.com/tiancheng91/collection/issues

21 stars 1 forks source link

css tricks #5

Open tiancheng91 opened 6 years ago

tiancheng91 commented 6 years ago

网站

教程

https://internetingishard.com/
keyframers: livecode

布局

float:
- 包含float的容器变为Block Formatting Context区块，会撑起容器边缘, 包含高度及margin
- float后的元素变为bfc, 会从当前box左上角位置开始创建区块.
flex:
grid

tiancheng91 commented 6 years ago

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

部分框架是这个版本的, 使用时需要注意.

// reset
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

tiancheng91 commented 6 years ago

position: absolute;
left: 50%;
top: 50%;
transform: transform(-50%, -50%);

display: flex;
justify-content: center;
align-items: center;

display: grid;
align-items: center;
justify-content: center;

tiancheng91 commented 6 years ago

.wrapper > div {
  background: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background: #ddd;
}

tiancheng91 commented 6 years ago

grid doc demo

<body>
  <header>...</header>
  <main>...</main>
  <nav>...</nav>
  <aside>...</aside>
  <footer>...</footer>
</body>

body { 
  display: grid;
  grid: "header header"
        "nav nav"
        "content sidebar"
        "footer footer";
  grid-template-columns: 1fr 25%; 
}

header { grid-area: header; }
nav { grid-area: nav; }
footer { grid-area: footer; }

tiancheng91 commented 6 years ago

animation: fade-in .8s ease-out forwards;
transform: translateY(1em);

tiancheng91 commented 6 years ago

html, body {height:100%}
height: 100vh;
width: 95vw;