css属性用法（22.1.20）

1.20

目录

        1、css三角

**三角强化（直角三角形）**

         2、鼠标样式

        3、去掉表单轮廓线

4、防止多行文本域（textarea）可拖拽（resize）

        5、vertical-align属性运用

 解决图片底部有默认空白缝隙的问题

        6、溢出的文字省略号显示

        7、margin负值的妙用

---

---

1、css三角

首先，创建一个块级盒子（可以确定宽高）

然后将盒子宽高设置为零，然后设置一个边框，例如：

border：50px solid transparent;

（先把四个方向的边框弄成透明隐藏起来），

然后选择一个想要的方向的边框更改颜色，例如：

border-top-color：greenyellow；

则得到以下三角

**三角强化（直角三角形）**

首先定义一个块级盒子如（div），然后在css中设置属性

div {

    width: 0;

    height: 0;（宽高设置为0）

    （把上边框弄大，右边框小一些，左下弄成0）

    border-width:100px 50px 0 0;

    border-style: solid;

    （将上边框隐藏起来）

    border-top-color: transparent;

    border-right-color: purple;

}

得到如下直角三角形：

---

 2、鼠标样式

 鼠标样式如下：

---

3、去掉表单轮廓线

 一般鼠标点击表单时，四周会出现蓝色的边框，使用： 

 outline：none；

即可去除默认边框。

---

4、防止多行文本域（textarea）可拖拽（resize）

一般在使用textarea时，右下角默认有可拖拽的功能，随意拖拽可能导致布局出现错误，所以我们需要取消。

如：

 我们可以在css中使用     

resize：none；

取消拖拽功能

---

5、vertical-align属性运用

        CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)  和  文字垂直对齐。

官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline| topI middle | bottom       

    

值                                                                描述
baseline
                                                        默认。元素放置在父元素的基线上。
top
                                                        把元素的顶端与行中最高元素的顶端对齐
middle
                                                        把此元素放置在父元素的中部。
bottom
                                                        把元素的顶端与行中最低的元素的顶端对齐。

 

 解决图片底部有默认空白缝隙的问题

bug :图片（是行内块元素）底侧会有一个空白缝隙 ,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

1.给图片添加vertical-align:middle | top| bottom；等。 (提倡使用的)
2.把图片转换为块级元素display: block;
 

---

6、溢出的文字省略号显示

1.单行文本溢出显示省略号----必须满足三个条件（css）
 

/*1.先强制一行内显示文本*/
white- space: nowrap;
(默认normal自动换行)

/*2.超出的部分隐藏*/
overflow: hidden;

/*3.文字用省略号替代超出的部分*/
text -overflow: ellipsis;

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

多行文本溢出显示省略号,有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)
 

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

（更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。）

---

7、margin负值的妙用

每个盒子加上边框，然后向左浮动，此时重叠的边框变粗，若想与其他边框一样，则只需

margin-left：-1px；即可。

 没有定位加相对定位能提高层级（高于浮动元素）

有定位可以通过  z-index：1；（默认为0）来提高层级

直接使用浮动，可以实现文字环绕效果