五个推进网站建设工作,国外做直播网站,腾讯云服务器搭建教程,wordpress多用户信息发布文章目录 1、hover鼠标变小手2、ul去除点3、文字溢出显示省略号#xff08;1#xff09;一行文字溢出显示省略号#xff08;2#xff09;多行文字溢出显示省略号 4、文字单词超出#xff08;1#xff09;文字单词超出换行#xff08;word-wrap#xff09;#xff08;2… 文章目录 1、hover鼠标变小手2、ul去除点3、文字溢出显示省略号1一行文字溢出显示省略号2多行文字溢出显示省略号 4、文字单词超出1文字单词超出换行word-wrap2文字单词超出换行(overflow-wrap)3CSS 英文、中文强制换行与不换行的代码word-break 5、去除浮动1 额外标签法 给谁清除浮动就在其后额外添加一个空白标签 。2 父级添加overflow方法3使用after伪元素清除浮动常用4使用before和after双伪元素清除浮动常用 6、背景图片常用background-size cover7、img图片按内容撑开 常用object-fit: cover/ couter8、首行缩进两个汉字9、 文本框文本域的光标颜色 1、hover鼠标变小手
cursor: pointer2、ul去除点
ul { list-style: none; } 3、文字溢出显示省略号
1一行文字溢出显示省略号
.div{width: 100px;height: 20px;border: 1px solid red;white-space: nowrap;/* 强制文本在一行中显示 */overflow: hidden;/* 隐藏文本的超出部分 */text-overflow: ellipsis;/* 使用省略号代替文本超出部分 */
}2多行文字溢出显示省略号
.div{overflow: hidden;text-overflow: ellipsis;width: 200px;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 *//* -webkit-line-clamp 其实是一个不规范属性使用了WebKit的CSS扩展属性该方法适用于WebKit浏览器及移动端*/-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;
}4、文字单词超出
1文字单词超出换行word-wrap word-wrap normal 只在允许的断字点换行浏览器保持默认处理。 break-word 在长单词或 URL 地址内部进行换行。 .div{word-wrap:break-word;
}2文字单词超出换行(overflow-wrap) overflow-wrap用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符以防止文本溢出其行向盒。 normal: 行只能在正常的单词断点例如两个单词之间的空格处换行。 anywhere: 为防止溢出如果行中没有其他可接受的断点则不可断的字符串如长词或 URL可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时会考虑由单词换行引入的软换行机会。 break-word: 与 anywhere 值相同如果行中没有其他可接受的断点则允许在任意点将通常不可断的单词换行但在计算最小内容内在大小时不考虑断字引入的软换行机会。 3CSS 英文、中文强制换行与不换行的代码word-break 1. word-break:break-all; 只对英文起作用以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用强制换行
4. white-space:nowrap; 强制不换行都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行超出部分隐藏且以省略号形式出现5、去除浮动 去除浮动常用的四种方法前两种缺点明显所以不详细举例 1 额外标签法 给谁清除浮动就在其后额外添加一个空白标签 。
优点 通俗易懂书写方便。不推荐使用 缺点 添加许多无意义的标签结构化比较差。
2 父级添加overflow方法 可以通过触发BFC的方式实现清楚浮动效果。必须定义width或zoom:1同时不能定义height使用overflow:hidden时浏览器会自动检查浮动区域的高度 3使用after伪元素清除浮动常用 将类名clearfix 放到要去除浮动的父盒子上即可 /*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearfix:after{content: ;display: block;height: 0;clear:both;visibility: hidden;
}
.clearfix{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行其他浏览器不执行*/
}4使用before和after双伪元素清除浮动常用 将类名clearfix 放到要去除浮动的父盒子上即可 .clearfix:after,.clearfix:before{content: ;display: block;clear: both;
}6、背景图片常用background-size cover 用法background-size: length|percentage|cover|contain; length 设置背景图片高度和宽度。第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为 auto(自动) percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度第二个值设置的高度各个值之间以空格 隔开指定高和宽以逗号 , 隔开指定多重背景。如果只给出一个值第二个是设置为auto(自动) cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 7、img图片按内容撑开 常用object-fit: cover/ couter fill 默认不保证保持原有的比例内容拉伸填充整个内容容器。 尝试一下 » contain 保持原有尺寸比例。内容被缩放。 尝试一下 » cover 保持原有尺寸比例。但部分内容可能被剪切。 尝试一下 » none 保留原有元素内容的长度和宽度也就是说内容不会被重置。 尝试一下 » scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同取决于它们两个之间谁得到的对象尺寸会更小一些。 8、首行缩进两个汉字
/* 字体xtext-indent 是字体的两倍就是缩进两个汉字 */
.div {font-size: 16px; text-indent: 32px;
}9、 文本框文本域的光标颜色 主要就是使用caret-color不一定要和下面一样使用标签选择器也可以使用类名 /*设置文本框的光标位置*/
input[typetext] {caret-color: red;
}
/*设置文本区的光标位置*/
textarea {caret-color: red;
}参考文章 word-wrap 属性 https://www.runoob.com/cssref/css3-pr-word-wrap.html object-fit 属性 https://www.runoob.com/cssref/pr-object-fit.html 推荐写的object-fit 写的比较好的文章 https://blog.csdn.net/Kindergarten_Sir/article/details/110477105
