本文已参与[新人创作礼]活动，一起开启掘金创作之路。
1. 三角形
效果图：
（1）思路1
<style>
div{
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 0px solid transparent;
border-right: 100px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
（2）思路2
<style>
div{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-left-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
2. 块级盒子水平垂直居中
效果图：
思路1：margin
position 元素已知宽度 绝对定位+margin反向偏移margin: -50px 0 0 -50px;
思路2：translate
将盒子的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
思路3：flex布局
display：flex
justify-content：center//子项目主轴居中
aligin-items：center//子项目子轴居中
思路4：子绝父相
父:position：relative
子:上下左右相同即可
position：absolute
top：0
bottom：0
left：0
right：0
margin：auto
思路5：利用 display:table-cell
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
水平居中
跟上面差不多就直接上图了
3. 文本超出
1
2
4. 圣杯布局
思路1：flex布局
父盒子设置display：flex，左右子盒子设置死宽度，中间的子盒子设置flex：1
思路2：定位
父盒子相对定位padding为子盒子宽，左右子盒子绝对定位，中间盒子宽高100%
定位方法有很多种，这里只举了其中一种
思路3：BFC块级格式化上下文
左右盒子固定宽高，进行浮动,中间盒子 overflow: hidden;
思路4：float
中间盒子装满父盒子，左右盒子分别左浮动右浮动
思路5：margin
左中右三个盒子使用margin进行布局操作
- 5
- 6
- 7
- 8
