CSS(七)用户样式+vertical-align属性+文字省略号显示

文章目录

  • 一、CSS用户界面样式
    • 1.1鼠标样式
    • 1.2轮廓线outline
    • 1.3防止拖拽文本域resize
  • 二、vertical-align属性应用
    • 2.1图片、表单和文字对齐
    • 2.2解决图片底部空隙
  • 三、溢出的文字省略号显示
  • 四、常见布局技巧
    • 4.1.margin负值运用
    • 4.2文字围绕浮动元素巧妙运用
    • 4.3行内块元素巧妙运用
    • 4.4CSS三角巧妙运用

一、CSS用户界面样式

1.1鼠标样式

在这里插入图片描述
CSS(七)用户样式+vertical-align属性+文字省略号显示_第1张图片

1.2轮廓线outline

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

1.3防止拖拽文本域resize

实际开发中,文本域右下角是不可以拖拽的。

textarea{resize :none;}

二、vertical-align属性应用

经常用于设置图片或者表单和文字垂直居中。
CSS(七)用户样式+vertical-align属性+文字省略号显示_第2张图片
CSS(七)用户样式+vertical-align属性+文字省略号显示_第3张图片

2.1图片、表单和文字对齐

CSS(七)用户样式+vertical-align属性+文字省略号显示_第4张图片

2.2解决图片底部空隙

图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决办法:
1.给图片添加vertical-align:middle|top|bottom等。
2.把图片转换为块级元素。

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

CSS(七)用户样式+vertical-align属性+文字省略号显示_第5张图片
CSS(七)用户样式+vertical-align属性+文字省略号显示_第6张图片

四、常见布局技巧

4.1.margin负值运用

CSS(七)用户样式+vertical-align属性+文字省略号显示_第7张图片

4.2文字围绕浮动元素巧妙运用

CSS(七)用户样式+vertical-align属性+文字省略号显示_第8张图片
CSS(七)用户样式+vertical-align属性+文字省略号显示_第9张图片

4.3行内块元素巧妙运用

在这里插入图片描述
CSS(七)用户样式+vertical-align属性+文字省略号显示_第10张图片

4.4CSS三角巧妙运用

CSS(七)用户样式+vertical-align属性+文字省略号显示_第11张图片

你可能感兴趣的:(CSS,css,前端,javascript)