布局
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格式
字体文件
自定义字体
字体图标
