css编程时问题解决方法

简介: css编程时问题解决方法

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
相关文章
|
2月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
25天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
2月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
2月前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型
|
2月前
|
前端开发 JavaScript API
编程笔记 html5&css&js 062 JavaScript 如何使用
编程笔记 html5&css&js 062 JavaScript 如何使用
|
2月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
2月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
2月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符