css三角，鼠标样式，溢出文字

                 目录

css三角

鼠标样式

例子：页码模块

溢出文字表示方式

margin负值运用

css三角强化

---

css三角

css三角中：line-height：0和font-size：0是防止兼容性的问题

jd {
    position: relative;
    width: 120px;
    height: 249px;
    background-color:pink;
}

.jd span {
    position:absolute;
    right:15px;
    top:-10px;
    width:0;
    height:0;
    line-height:0;
    font-size:0;
}

鼠标样式

1 更改用户鼠标样式:

2 去除输入框表格蓝色边框outline
 

input,textarea {
    outline: none;
}

3 让textarea无法修改大小

textarea {
    resize:none;
}

4 vertical-align 设置图片或者表单和文字垂直对齐

vertical-align:baseline默认父元素基线对齐；

top,middle,bottom

5 vertical-align: bottom

vertical-align只针对行内或者行内块元素有效
文本域属于行内块元素

textarea {
    vertical-align: middle;
    默认是基线对齐

}

这样能使得当左边是图片右边是文字时候，文字在左边图片中间的位置

bug：图片底侧会有空白缝隙，由于行内块元素和文字基线对齐
解决： 1 给图片添加vertical-align：middle，top，bottom
2 display: block

例子：页码模块

    
    
    
    




    

        <<上一页
        2
        3
        4
        5
        6
        7
        >>下一页
        到第
        
        页
        确定
    

溢出文字表示方式

溢出的文字省略号显示：
1 单行文本溢出显示省略号

white-space: nowrap;
强制一行内显示文本
overflow：hidden
超出部分隐藏
文字用省略号替代超出的部分
text-overflow:ellipsis;
 

    

        abcddddddddddddddd
    

2 多行文本溢出显示省略号

display: -webkit-box;
弹性伸缩盒子模型显示
-webkit-line-clamp: 2;这表示省略号出现在第二行
设置或检索伸缩盒对象的子元素排列方式
-webkit-box-orient: vertival;

overflow:hidden;
text-oveflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

margin负值运用

后面盒子压住前面盒子

ul>li{$}*5

鼠标经过某个盒子后提高当前盒子的层级：

没有定位加相对定位，只能相对定位，其他定位不占位置，有定位，加z-index
position: relative;
border: 1px solid blue;
z-index:1;压住别的盒子

 水平居中：行内块的父亲添加text-align:center

那么这个盒子里所有行内元素和行内块元素都会水平居中

css三角强化

.box {
    把上边框宽度调大
	border-top: 100px solid transparent;
	border-right: 50px solid blue;
	border-bottom: 0 solid blue;
	border-left:0 solid green;
	左边和下边边框宽度为0
}
简写：
width:0
height:0
border-color: transparent red transparent transparent
上右下左
border-style: solid;
border-width: 22px 8px 0 0;

    
    
    
    



    

    
    

        $100
 


        $200