WEB前端学习:CSS学习_用户界面样式

最新推荐文章于 2022-07-24 15:41:46 发布

Dream_ruins

最新推荐文章于 2022-07-24 15:41:46 发布

阅读量448

点赞数

分类专栏：前端学习 CSS 笔记文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43662760/article/details/105599486

版权

前端学习同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

笔记

14 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

用户界面样式

文章目录

用户界面样式
持续更新...

该篇讲的是用户界面样式，用于提高网站的美观性和特点

一、鼠标样式

cursor

cursor: move;

常用样式

值	样式描述
default	默认的小箭头
move	移动
pointer	链接
text	文本

二、轮廓

outline

input {
    outline: 1px soild red;
}

效果图（Chrome浏览器）

这条红色的线就是轮廓线，在边框外围
属性设置与边宽类似

属性	作用
outline-wdith	轮廓宽度
outline-style	轮廓样式
outline-color	轮廓颜色

outline: none;
outline: 0;
/* 上面两种写法都是取消轮廓，效果一样 */

三、防止文本域拖拽

resize: none

四、去除图片底侧空白间隙

图片和表单等行内块元素，它们的底线会与父盒子的基线对齐，导致它们下面会有空白间隙 (查看 vertical-align)

第一种
将图片转化为块级元素

img{
    display: block;
}

第二种
改变图片对齐方式

img {
    vertical-align: top;
}

五、溢出文字隐藏

1. work-break

处理英文单词的自动换行

值	意义
normal	使用浏览器换行规则
break-all	允许在单词内换行可以拆开单词
keep-all	只能在半角空格或连字符处换行，不可以拆开单词

2. white-space

设置对象内文本显示方式

值	意义
normal	默认方式
nowarp	强制同一行内显示所有文本

3. text-overflow

文字溢出
需要文本强制同一行内显示，才起作用
需要搭配 overflow 一起使用

值	意义
clip	简单剪裁
ellipsis	文字溢出时显示省略号 “…”

六、过渡动画

transition

transition: widht 0.5s ease 0.1s, height 0.5s ease-in 0.6s;
/* 过渡属性 过渡时间 运动曲线 开始时间 */

tips：同时设置多属性变化用逗号隔开；所有属性都变化，可以使用 all 代替

七、元素隐藏

visibility
显示或隐藏元素而不更改文档的布局

值	意义
visible	元素正常显示
hidden	隐藏元素，但布局不变。相当于元素透明了
collapse	隐藏表格的行或列，并且不占用任何空间

八、内容管理

overflow
当一个元素的内容太大而无法适应块级的时候，如何管理内容

值	意义
visible	默认，内容不会被剪切，内容会呈现在元素框外
hidden	内容会被剪切，超出的内容不可见
scroll	内容会被剪切，超出的部分，滑动滚动条查看滚动条一直存在
auto	由浏览器决定，如果内容被修剪，就会显示滚动条