div中的图片和文字垂直和水平居中
图片和文字父盒子 { display: flex; align-items: center;/*子元素垂直居中*/ justify-content: center;/*子元素水平居中*/ }
鼠标变小手
cursor:pointer;
文本超出使用三个点显示
// 文本盒子 文本盒子 { // 超出隐藏 overflow: hidden; // 不换行 word-break:keep-all; // (不换行) white-space:nowrap; // (添加...) text-overflow:ellipsis; }
超链接伪类
a:link 超链接初始状态 a:visited 超链接被点击后的状态 a:hover 超链接鼠标悬停的状态 a:active 超链接点击时的状态
定位
文本自动换行、强制换行、强制不换行
1.自动换行:
word-wrap:break-word; word-break:normal;
2.强制换行:
word-break:break-all; 按字符截断换行 /* 支持IE和chrome,FF不支持*/ word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */ * 注意:单词换行需要父盒子为块级元素
3.强制不换行:
white-space:nowrap;
换行属性语法
1.word-break : normal | break-all | keep-all normal 使用浏览器默认的换行规则,允许字内换行。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 2.word-wrap : normal | break-word normal : 允许内容顶开指定的容器边界,允许字内换行。 break-word : 内容将在边界内换行,允许单词换行。 3.white-space:normal | pre-wrap