CSS常用代码总结
1. CSS实现各种形状
1. 三角形
画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。但是在写div时，会发现，div是的边框是直线。那么，我想到，要是给div的高和宽设置为0，然后设置四个border不同的颜色，那么这个颜色会重叠覆盖么？ps：当然会想到设置padding或者margin值，但是这两种属性无法设置颜色。
#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
因为我们只想要一个三角形，如果把其他三个三角形的颜色变白，那就只剩下一个，等等，如果背景颜色不是白色呢？css中有这样一个属性，transparent，背景透明。这样便可以达到我们的目的了。
#triangle03{
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid blue;
}
#triangle04{
width: 0;
height: 0;
border: 50px solid transparent;
border-right: 50px solid red;
}
#triangle05{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid green;
}
#triangle06{
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid yellow;
}
上面的代码就可以实现，四个不同方向的三角形了。
2. 半圆
.semi{
margin:100px;
width:100px;
height:100px;
background:black;
border-radius:100px 100px 0 0;
height:50px;
}
先画宽高相等的正方形，然后加圆角，左上和右上的圆角值等于宽高值，左下和右下无圆角。半圆：再把高度减半。
3. 扇形
.shan1{
margin:50px;
width:50px;
height:50px;
background:black;
border-radius:50px 0 0 0;
}
圆角值和宽高值相等。四分之一扇形。
4. 弧形
.semi{
margin:100px;
width:100px;
height:100px;
background:black;
border-radius:100px 0 100px 0;
transform:rotate(45deg);
}
先正方形，对角加圆角，而且值是宽高值。比如，左上角 和右下角
2. 三栏布局，两侧定宽，中间自适应
<div class="box">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
1. flex布局
.box {
display: flex;
}
.left {
height:300px;
width: 100px;
background-color: yellow;
}
.center {
height:300px;
flex-grow: 1;
background-color: red;
}
.right {
height:300px;
width: 50px;
background-color: pink;
}
使用flex布局，两侧设置好宽度，中间设置flex-grow: 1;即可。如果有多余空间，就全给中间。两侧默认是0.
2. float布局
.left, .right, .center {
height: 300px;
}
.left {
width: 100px;
float: left;
background-color: yellow;
}
.right {
width: 50px;
float: right;
background-color: pink;
}
.center {
background-color: red;
}
这种布局方式，DOM结构必须是先写左右两侧浮动部分，然后再写中间部分，否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。这种布局的特点就是浮动对旧浏览器兼容性好，缺点就是主体内容需要放到最后加载，当页面元素较多时候可能会影响体验
3. grid布局
.box {
display: grid;
grid-template-columns: 100px auto 50px;
grid-template-rows: 300px;
}
.left {
background-color: yellow;
}
.center {
background-color: red;
}
.right {
background-color: pink;
}
设置父元素的属性，比如第一列宽度占100px，第二列auto，第三列50px.这样就把父元素分成了三列，然后三个子元素自动分布。
4. 绝对定位
<div class="box">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
.box{
border:1px solid black;
background:pink;
position:relative;
}
.left{
width:100px;
background:yellow;
height:300px;
position:absolute;
left:0;
}
.right{
width:100px;
height:300px;
background:red;
position:absolute;
right:0;
}
.center{
background:green;
height:300px;
position:absolute;
left:100px;
right:100px;
}
父元素相对定位。三个子元素都绝对定位，让他们都相对box定位。左元素设置宽度，并且设置left为0。右元素也设置宽度，right为0.中间的不设宽度，但是设left和right属性等于它左侧元素的宽度和右侧元素的宽度。 可以看到三个元素都脱离了box的文档流。
3. 如何垂直居中
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是爸爸的高度写死时，儿子垂直居中的方法。
忠告：能不写 height 就千万别写 height。
1、 flex
2、 flex布局，column排列
3、 绝对定位，margin:auto
爸爸relative，儿子absolute,上下左右都是0，margin auto 这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然也可以设为 99999px 或者 -99999px 无论什么，只要两者相等就行，这一步做完之后再将要居中元素的 margin 属性值设为 auto，这样便可以实现垂直居中了。
4、 绝对定位，translate -50%
5、 绝对定位，margin-left和margin-top -自己的一半
6、 table标签自带垂直居中功能
7、 display table
vertical-align 属性只对拥有 valign 特性的 html元素起作用，例如表格元素中的
<td> <th> 等等，而像<div><span>这样的元素是不行的。valign 属性规定单元格中内容的垂直排列方式
8、 line-height 单行文字垂直居中
把要垂直居中的元素，高度和行高设为相同，必须是单行文字，才能把文字垂直居中
9、 line-height 和 vertical-align 对图片进行垂直居中
HTML
<div id="box">
<img src="smallpotato.jpg">
</div>
CSS
#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
#box img {
width: 200px;
height: 200px;
vertical-align: middle;
}
父元素的高度和行高一样。图片的vertical-align:middle
4. 画一条0.5px的线
方法一：tansform
#line1 {
border-bottom: 1px solid black;
transform: scaleY(0.5);
}
方法二：initial-scale
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<style>
#line3 {
border-bottom: 1px solid #000;
}
</style>
5. css实现文本溢出显示省略号
单行文本
单行文本溢出显示省略号比较简单，主要就三行代码。
p {
width: 300px;
overflow: hidden;
/*文本不会换行*/
white-space: nowrap;
/*当文本溢出包含元素时，以省略号表示超出的文本*/
text-overflow: ellipsis;
}
效果：
多行文本
对于多行文本，一种方法是使用webkit的css扩展属性，该方法适用于Safari、chrome和大多数移动端浏览器。
p {
width: 300px;
overflow: hidden;
/*将对象作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*设置子元素排列方式*/
-webkit-box-orient: vertical;
/*设置显示的行数，多出的部分会显示为...*/
-webkit-line-clamp: 3;
}
效果：
