H5C3基础学习总结之杂记2

目录

鼠标样式cursor

轮廓线outline

防止拖拽文本域resize

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

Vertical-align属性应用

溢出文字的省略号显示

单行文本溢出显示省略号

多行文本溢出显示省略号

HTML新增的语义化标签

---

​​​​​​​

---

​​​​​​​

鼠标样式cursor

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

这里假设为鼠标移动在li标签上：

li {
    cursor: pointer; 
}

属性值	描述
default	小白（默认）
pointer	小手
move	移动
text	文本
ont-allowed	禁止

---

轮廓线outline

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

input {
    outline: none;
}

---

防止拖拽文本域resize

实际开发中，文本域右下角是不可以脱拽的，只需要给textarea设置一下样式即可：

textarea {
    resize: none;
}

---

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

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

主要解决有两种：

• 给图片添加vertical-align:middle|top|bottom等。（多使用这种办法）
• 把图片转换为块级元素display:block; 

---

Vertical-align属性应用

用于设置一个元素的垂直对齐方式，但是只针对于行内元素或者行内块元素有效。

vertical-align: baseline | top | middle | bottom

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

---

溢出文字的省略号显示

单行文本溢出显示省略号

/*1．先强制一行内最示文本*/
/*（ 默认 normal 自动换行）*/
white-space: nowrap;
/*2．超出的部分隐藏*/
overflow: hidden;
/ 3．文字用省略号替代超出的部分*/
text-overflow: ellipsis;

多行文本溢出显示省略号

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

overflow: hidden;
text-overflow: ellipsis;

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

---

HTML新增的语义化标签

标签	描述
<header>	头部标签
<nav>	导航标签
<article>	内容标签
<section>	定义文档某个区域
<aside>	侧边栏标签
<footer>	尾部标签

---