CSS三角和用户界面的学习

Root_src

已于 2022-04-01 22:56:53 修改

阅读量77

点赞数 1

分类专栏： CSS 文章标签： css html 学习前端

于 2022-04-01 22:47:08 首次发布

本文链接：https://blog.csdn.net/weixin_53317758/article/details/123909909

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

发现前面写的播客内容太冗杂了，不好具体问具体思考

分两个知识点记录

CSS三角强化

做法：

左边和下边的边框宽度设置为0
把上边框宽度调大
只保留右边的边框有颜色

或者写代码：

width: 0;

height: 0;

border-color: transparent red transparent transparent;

border-style: solid;

border-width: 22px 8px 0 0;

类似于秒杀价，会出现梯形形状

先创建一个大盒子和一个小盒子span ，再利用上面的方法给小盒子设置定位和边框

CSS 用户界面

什么是界面样式？

所谓界面样式，就是更改一些用户操作样式，一边特高更好的更好的用户体验

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式cursor

li (cursor:pointer; )

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

default 小白默认

pointer 小手

move 移动

text 文本

not-allowed 禁止

轮廓线outline

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

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的

textareal{ resize: none};

vertical-align 属性应用

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

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

语法：

vertical-align: baseline | top | bottom

baseline 默认，元素放置在父元素的基线上

top 把元素的顶端与行中最高元素的顶端对齐

middle 把元素放置在父元素的中部

tottom 把元素的顶端与行中最低的元素顶端对齐

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐

<style>

img {

/* vertical-align: bottom; */

/* 让图片和文字垂直居中 */

vertical-align: middle;

/* vertical-align: top; */

}

textarea {

vertical-align: middle;

}

</style>

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

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

主要解决方案：

给图片添加vertical-align: middle | top | bottom 等（提倡使用） 只要边框和图片不以基线对齐就行
把图片转换成块级元素：display: block; （可能会影响其他布局）

<style>

div {

border: 2px solid red;

}

img {

/* vertical-align: middle; */

display: block;

}

</style>

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

先强制一行内显示文本 withe-space: nowrap; (默认 normal 自动换行)
超过的部分隐藏 overflow: hidden;
文字用省略号代替超出的部分 text-overflow: ellipsis;

<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字
</div>

多行文本溢出的部分用省略号显示

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

overflow: hidden;

text-overflow: ellipsis;

弹性伸缩盒子模型显示

display: -webkit-box;

限制在一个块元素显示的文本的行数

-webkit-line-clamp: 2;

设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient: vertical;

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

Root_src

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三角和用户界面的学习

发现前面写的播客内容太冗杂了，不好具体问具体思考分两个知识点记录CSS三角类似于秒杀价，会出现梯形形状先创建一个大盒子和一个小盒子span ，再利用上面的方法给小盒子设置定位和边框 CSS 用户界面什么是界面样式？所谓界面样式，就是更改一些用户操作样式，一边特高更好的更好的用户体验更改用户的鼠标样式表单轮廓防止表单域拖拽鼠标样式cursorli (cursor:pointer; )设置或检索在对象上移动的鼠标指针采用何种系统预
复制链接

扫一扫