style样式问题

透明度的问题
1、带透明度的十六进制颜色
用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在末尾添加两个额外的数字。
2、带透明度的RGBA 颜色 ，如#p1 {background-color: rgba(255, 0, 0, 0.3);}

line-height
normal:默认。设置合理的行间距
number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length:设置固定的行间距。
%:基于当前字体尺寸的百分比行间距
inherit:规定应该从父元素继承 line-height

何为行距，这里的行距不是每行之间的距离，而是每行顶部和底部的高度距离，也就是行高
nunber设置为1，则所有文字结尾一行，也就是说，如果其值为2的话，其行高就是字体尺寸乘以2了。
从上到下四条分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。尤其记得基线不是最下面的线，最下面的是底线。
行高 是指上下文本之间的基线间的垂直距离，即图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
参考 ：https://www.cnblogs.com/dolphinX/p/3236686.html

盒子问题
一般的，一个元素的width被定义为从左内边界到右内边界，height则是从上内边界到下内边界的距离。
不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。
弹性盒子
弹性盒子是css3的一种新的布局模式
css3弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保原色拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

3、图片与文本对齐的问题
解决办法：一个父容器中有两个元素，一个是text组件,一个是image组件，这两个组件都是行内元素，但怎么都不能对齐，只能把父容器设置爱为display:flex;align-item:center;那两个子元素才能对齐居中。

4、margin和padding对于border-radius的影响
margin不会对border-radius有影响，但padding会对border-radius会有很大的影响的，padding会加上所在这个元素的宽度的，而border-radius是会加在padding上的。所以设置border-radius时就会出有padding的那个角没有圆角。
5、css画一个三角形

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}