1、用CSS画三角形
首先，需要把元素的宽度、高度设为0。然后设置边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 写一个以顶边为底的三角型 至少设置三条边完成形状*/
.parent {
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 100px solid transparent;
/* transparent透明属性 */
border-left: 100px solid transparent;
}
</style>
<body>
<div class="parent">
<!--空盒子-->
</div>
</body>
</html>
2、用CSS画扇形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 写一个扇形 */
.parent {
width: 0;
height: 0;
border: 100px;
border-style: solid;
border-color: #000 transparent transparent;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="parent">
</div>
</body>
</html>
4、画一个饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现饼图</title>
<style>
.pie,
.pie::before {
/* display: inline-block; */
width: 0;
border-radius: 50%;
}
.pie {
position: relative;
border: solid 75px;
border-color: green green tomato tomato;
box-sizing: border-box;
transform: rotate(45deg);
}
.pie::before {
content: '';
position: absolute;
border: solid 75px;
border-color: tomato tomato transparent transparent;
transform: translate(-50%, -50%) rotate(.33turn);
}
</style>
</head>
<body>
<div class="pie"></div>
</body>
</html>
3、画一个正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(30deg);
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front {
transform: translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
}
.top {
transform: rotateX(90deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.back {
transform: translateZ(-1em);
}
</style>
<body>
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</body>
</html>
4、画一个等宽高的自适应正方形
vw/vh
relative，内层 absolute，与百分比设置宽度,实现里面带内容一起自适应变化<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.outer {
padding-top: 50%;
height: 0;
background: #ccc;
width: 50%;
position: relative;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: red;
}
</style>
<body>
<div class="outer">
<div class="inner">HELLO</div>
</div>
</body>
</html>
5、画一个箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 100px;
height: 100px;
width: 100px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transform: rotate(-0.125turn);
/*指向左*/
/*设置0.375turn就是指向右*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
水平居中可分为行内元素水平居中和块级元素水平居中
1.1 行内元素水平居中
行内元素是指文本text、图像img、按钮超链接a等，只需给父元素设置text-align:center即可实现。
.center{
text-align:center;
}
<div class="center">水平居中</div>
1.2 块级元素水平居中
margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有 .center{
width:200px;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
方法1：设置table
通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现
.center{
display:table;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
方法2：设置inline-block（多个块状元素）
子元素设置inline-block，同时父元素设置text-align:center
.center{
text-align:center;
}
.inlineblock-div{
display:inline-block;
}
<div class="center">
<div class="inlineblock-div">1</div>
<div class="inlineblock-div">2</div>
</div>
方法3：设置flex布局
只需把要处理的块状元素的父元素设置display:flex;justify-content:center;
.center{
display:flex;
justify-content:center;
}
<div class="center">
<div class="flex-div">1</div>
<div class="flex-div">2</div>
</div>
方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；
2.1 单行文本垂直居中
padding-top=padding-bottom;
line-height=height;
2.2 多行文本垂直居中
通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部
2.3 块级元素垂直居中
方法1：flex布局
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值
.center {
width: 200px;
height: 300px;
display: flex;
align-items: center;
border: 2px solid blue;
}
<div class="center">
<div>垂直居中</div>
</div>
方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.parent {
position: relative;
height: 200px;
width: 200px;
border: 1px solid blue;
}
.child {
position: absolute;
height: 100px;
width: 150px;
top: 50%;
margin-top: -50px;
line-height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
</body>
</html>
效果如下：
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto
效果同上
方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局</title>
<style>
.parent {
position: relative;
height: 200px;
width: 200px;
border: 1px solid blue;
}
/* 不用提前知道被居中元素的尺寸 */
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
line-height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">已知高度垂直居中</div>
</div>
</body>
</html>
注：
top/bottom换成left/right
transform方法，可用于未知元素大小的居中
方法1：绝对定位+margin:auto
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方法2：绝对定位+负margin
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
方法3：绝对定位+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
方法4：flex布局
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
方法5：table-cell实现居中
.child {
height: 200px;
width: 200px;
background-color: red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
1、容器的属性
flex-direction 属性决定主轴的方向（即项目的排列方向）。flex-wrap 认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。justify-content 属性定义了项目在主轴上的对齐方式。align-items 属性定义项目在交叉轴上如何对齐。align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。2、项目的属性
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选auto (1 1 auto) 和 none (0 0 auto)。align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。阮一峰老师：Flex 布局教程：语法篇
聊聊Flexbox布局中的flex的演算法
flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？
理想的实现方案有三种：flex布局、圣杯布局、双飞翼布局
1、flex布局
html最开始，保证优先加载flex order属性决定三个盒子顺序，左，中，右flex:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex三栏布局</title>
<style>
.box {
height: 200px;
min-width: 700px;
background-color: gray;
display: flex;
}
.middle {
background-color: tomato;
/* width: 100%; */
flex: 1;
order: 1;
}
.left {
width: 200px;
background-color: yellow;
order: -1;
}
.right {
width: 200px;
background-color: green;
order: 2;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">中</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
圣杯布局和双飞翼布局的实现
事实上,圣杯布局其实和双飞翼布局就是一回事,实现思路都是三个盒子浮动,两边的盒子宽度固定,中间的盒子自适应.实现的效果都是一样的。
差别在于其实现的思想, 敲黑板啦! 这种自适应布局适合边栏宽度为固定的页面!!!, 缺点是当浏览器宽度缩小到一定程度时,布局会乱掉,记得设置页面最小宽度就可以解决了
两者本质
2. 圣杯布局
margin-left:100%，右盒子走负自身的宽度
padding left和right左右盒子宽度
left，right-往回走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
.box {
overflow: hidden;
padding: 0 210px;
/* 防止布局错乱 */
min-width: 300px;
}
.middle {
float: left;
width: 100%;
height: 200px;
background-color: tomato;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
margin-left: -100%;
position: relative;
left: -210px;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: green;
margin-left: -200px;
position: relative;
right: -210px;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
3. 双飞翼布局
margin-left:100%，右盒子走负自身的宽度
margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
.box {
overflow: hidden;
}
.content {
margin: 0 210px;
height: 200px;
background-color: tomato;
}
.middle {
float: left;
width: 100%;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: yellow;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: green;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="middle">
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
圣杯布局双飞翼布局总结：
float:left，中间栏div内容不被遮盖left和right属性div在嵌套一个div，对嵌套的div设置margin-left和margin-right
补充：float和绝对定位实现三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局</title>
<style>
.box {
/* overflow: hidden; */
}
.box::after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: gray;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: gray;
}
.middle {
margin-left: 210px;
margin-right: 210px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
下面de内容
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三栏布局</title>
<style>
.box {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: gray;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
background-color: gray;
}
.middle {
margin-left: 210px;
margin-right: 210px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
下面de内容
</body>
</html>