布局
1. 三列布局，左右側欄固定300px，三列高度統一給定，中間自適應
此簡單問題，答上三種及格，答上五種優秀，分別為：
- float
- position: absolute
- tablecell
- flexbox
- grid
重點：
- 塊級元素默認寬度為父容器100%無需多余設置。
- flex-direction默認為row，flex-wrap默認nowrap。
- grid布局務必要掌握，可查閱grid實現布局, https://gridbyexample.com/examples/
響應grid布局,張鑫旭 display: grid布局教程, Grid入門精通教程 、 A Complete Guide to Grid (需科學上網) 或 Grid布局指南 - 簡書
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平布局</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout {
margin-top: 10px;
}
.layout article div {
min-height: 100px;
}
</style>
</head>
<body>
<section class="layout float">
<style>
.layout.float .left{
float: left;
width: 300px;
background: lightcoral;
}
.layout.float .right{
float: right;
width: 300px;
background: aquamarine;
}
.layout.float .center{
background: antiquewhite;
overflow: hidden;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮動解決</h1>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
<p>1. 三欄布局中間部分</p>
</div>
</article>
</section>
<section class="layout absolute">
<style>
.left-right-center {
height: 100px;
}
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
width: 300px;
background: lightcoral;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: aquamarine;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>絕對布局</h1>
1. 三欄布局中間部分
2. 三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout flexbox">
<style>
.layout.flexbox .left-right-center {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: lightcoral;
}
.layout.flexbox .right {
width: 300px;
background: aquamarine;
}
.layout.flexbox .center {
background: navajowhite;
flex-grow: 1;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>flexbox</h1>
1. 三欄布局中間部分
2. 三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style>
.layout.table .left-right-center {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-right-center>div{
display: table-cell;
}
.layout.table .left {
width: 300px;
background: lightcoral;
}
.layout.table .right {
width: 300px;
background: aquamarine;
}
.layout.table .center {
background: lightsalmon;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>table-cell</h1>
1. 三欄布局中間部分
2. 三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style>
.layout.grid .left-right-center {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
background: lightcoral;
}
.layout.grid .right {
background: aquamarine;
}
.layout.grid .center {
background: orange;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>grid</h1>
1. 三欄布局中間部分
2. 三欄布局中間部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
ps： tablecell也可以實現帶多行文本的div垂直居中。
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
}
.son {
display: table-cell;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
image
2. 三列布局，上下固定高度，中間自適應（移動端常見）
目前實現了三種，分別為：
- position：absolute
- flexbox
- grid (稍微做了下變形）
答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直布局</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout .top-center-bottom {
height: 100vh;
}
.layout {
margin-top: 20px;
}
.layout article div {
width: 100%;
}
</style>
</head>
<body>
<section class="layout absolute">
<style>
.layout.absolute .top {
height: 100px;
background: lightcoral;
position: absolute;
top: 20px;
}
.layout.absolute .bottom {
height: 150px;
background: aquamarine;
position: absolute;
bottom: -20px;
}
.layout.absolute .center {
height: 100%;
background: antiquewhite;
padding: 100px 0 150px;
box-sizing: border-box;
}
</style>
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h1>絕對定位</h1>
<p>1. 中間填充的文字</p>
<p>1. 中間填充的文字</p>
</div>
<div class="bottom"></div>
</article>
</section>
<section class="layout flex">
<style>
.top-center-bottom {
display: flex;
flex-direction: column;
}
.layout.flex .top {
height: 100px;
background: lightcoral;
}
.layout.flex .bottom {
height: 150px;
background: aquamarine;
}
.layout.flex .center {
background: antiquewhite;
flex-grow: 1;
}
</style>
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h1>flexbox</h1>
<p>1. 中間填充的文字</p>
<p>1. 中間填充的文字</p>
</div>
<div class="bottom"></div>
</article>
</section>
<section class="layout grid">
<style>
.layout.grid .top-center-bottom {
display: grid;
grid-template-rows: 100px auto 150px;
grid-template-columns: 1400px;
grid-auto-columns: auto;
}
.layout.grid .top {
grid-area: 1/1/2/3;
background: lightcoral;
}
.layout.grid .bottom {
background: aquamarine;
grid-area: 3/1/4/3;
}
.layout.grid .center {
grid-area: 2/1/3/2;
background: antiquewhite;
justify-self: center;
}
</style>
<article class="top-center-bottom">
<div class="top"></div>
<div class="center">
<h1>grid</h1>
<p>1. 中間填充的文字</p>
<p>1. 中間填充的文字</p>
</div>
<div class="bottom"></div>
</article>
</section>
</body>
</html>
3. 用flex和grid繪制帶有hover高亮邊框效果的九宮格
九宮格
<style>
.line {
display: flex;
}
.gezi {
width: 100px;
height: 100px;
/* position: relative; */
border: 5px solid #ccc;
display: inline-block;
line-height: 100px;
text-align: center;
box-sizing: border-box;
}
.gezi+.gezi {
/* border-left: 0px; */
margin-left: -5px;
}
.line+.line .gezi {
margin-top: -5px;
}
.gezi:hover {
z-index: 1;
border-color: crimson;
}
</style>
<div class="line">
<div class="gezi">1</div>
<div class="gezi">2</div>
<div class="gezi">3</div>
</div>
<div class="line">
<div class="gezi">4</div>
<div class="gezi">5</div>
<div class="gezi">6</div>
</div>
<div class="line">
<div class="gezi">7</div>
<div class="gezi">8</div>
<div class="gezi">9</div>
</div>
<style>
.jiu {
display:grid;
width: 300px;
height: 300px;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
margin-left: 0;
margin-top: 20px;
padding: 0;
}
.jiu .box {
list-style-type:none;
border: 5px solid #ccc;
margin-top: -5px;
margin-left: -5px;
line-height: 90px;
text-align: center;
}
.jiu .box:hover {
z-index: 1;
border-color: crimson;
}
</style>
<ul class="jiu">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
<li class="box">7</li>
<li class="box">8</li>
<li class="box">9</li>
</ul>
盒模型
- 標準模型寬高不計算padding和border；IE模型寬高計算padding和border。
box-sizing : content-box(標準模型-默認)/border-box(IE模型) - JS獲取寬高
dom.style.width只能取內聯寬高.
window.getComputedStyle(dom).width瀏覽器渲染之后的取值，兼容性更好. IE使用dom.currentStyle.width.
dom.getBoundingClientRect().width/height/left/top/bottom/right,返回所在ViewPort左頂點的絕對位置，常用于計算位置.
BFC (塊級格式化上下文)
BFC布局規則：（引用自 - 關于CSS-BFC深入理解 )
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之如此。
6.計算BFC的高度時，float元素也參與計算創建BFC
1.position 為 absolute 或 fixed (position不為static或relative)
2.浮動元素 (float不為none)
3.display為inline-block | table | flex | grid
4.overflow不為visible
5.<html>標簽
零碎小技巧
- 妙用background：
background: url(...) no-repeat center 0;保持圖片在父容器大小變化時，時刻保持水平居中。 - 清除浮動時，mdn上最新推薦的clearfix寫法：
/* new clearfix */
.clearfix::after {
content: "";
display: table;
clear: both;
overflow: hidden;
visibility: hidden;
}
動畫
CSS3
SVG
Convas
多行文本省略號
.element {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; // 截斷在第二行
-webkit-box-orient: vertical; // 方向垂直
// height: 50px;
}
字體
查看網站引用字體 開發者工具-Application-Frames-Fonts
.woff格式
字體文件
自定義字體
字體圖標
