css设置1.5倍行高,css设定行高、绝对定位

设定行高2种方式

使用width、height(假定现宽38,高22 ；目标宽70，高30)

.welcome{

width: 70px;

height: 30px;

line-height: 30px;

text-align: center;

}

使用padding

.welcome{

padding: 4px 16px;

line-height: 22px;

}

补充：

使用width、height 时若文字发生变动会出现bug(显示不全)

使用padding时，目标高度30px减现高度22px得出上下内边距为4px，左右同理；不同机器现行高可能存在差异，通过设置line-height固定值消除bug

绝对定位

思路：

子元素absolute

父元素relative

子元素相对于父元素定位

.welcome{

position: relative;

}

.welcome .triangle{

position: absolute;

left:4px；

top:100%；

}

补充：子元素位于父元素下方(使用top属性)，子元素相对于父元素移动(使用left)

综合应用

效果图：

代码：

.welcome{

background:red;

color:white;

padding:4px 16px;

line-height:22px;

position:relative;

}

.inner{

display:block;

border: 10px solid transparent;

width:0px;

border-left-color:red;

border-top-width:0px;

position:absolute;

left:6px;

top:100%;

}

Hello