【前端】CSS三角做法、用户界面、vertical-align、溢出的文字省略显示、布局技巧

三角做法

网页中常见的三角形可以直接使用CSS画出来，不必做成图片或者字体图标

用户界面

所谓的界面样式，就是更改一些用户操作样式以便提高用户体验感

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标样式

li {cursor:pointer;}

轮廓线outline

给表单添加outline：0；或者outline：none；样式之后就可以去掉默认的蓝色边框

input { outline:0;}
input {outline:none;}

防止拖拽文本域resize

实际开发中，文本域的右下角是无法拖动的

textarea {resize:none;}

vertical-align属性应用

CSS的vertical-align属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐

vertical-align：baseline | top | middle | bottom；

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。此时将此属性设置为middle就可以让文字和图片垂直居中对齐了

小bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决办法

1. 给图片添加vertical-align：middle | top | bottom等

2. 把图片转换为块级元素：display：block；

溢出的文字省略显示

单行文本溢出显示省略号

1. 强制一行内显示文本

2. 超出部分隐藏

3. 文字用省略号代替超出部分

white-space: nowrap; /*默认normal自动换行*/
overflow: hidden;
text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适用于webKit浏览器或移动端（大部分为webKit内核）

overflow： hidden;
display： -webkit-box;/*弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;/*限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical;/*设置或检索伸缩性盒对象的子元素的排列方式*/

布局技巧

margin负值

作用：让盒子margin往左侧移动使其正好压住相邻盒子，防止出现粗边框的效果

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，就加相对定位（保留位置），如果有就加z-index）

文字围绕浮动元素

在一个盒子中，将文字设置为标准流，图片设置为浮动

.img {
    float: left;
    width: 100px;
    height: 100px;
}

行内块元素

    
    
    
    
    


    

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

* {
    margin: 0;
    padding: 0;
}
.box a {
    display: inline-block;
    text-decoration: none;
    border: 1px solid rgb(255, 255, 255);
    background-color: #f7f7f7;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #333;
}
.box .s {
    width: 85px;
}
.box {
    text-align: center;
    margin-top: 10px;
}
input {
    height: 36px;
    width: 45px;
    border: 1px solid #ccc;
    outline: none;
}
button {
    height: 36px;
    width: 40px;
    line-height: 36px;
    border: 1px solid #ccc;
}