- .text-align可以对所有行内元素起作用,包括图片。对没有设置宽高的块元素起作用
- input 去掉上焦点时边框 input{ outline:none} 设置上焦点边框样式 input:focus{xxxxx}
- input输入框会经常用到文字缩进 text-indent
- 块级元素并排不换行:display:inline或者float:left.子元素的父亲宽度一定要足够大,子元素的爷爷即窗口,固定宽度,并且overflow:hidden
- 文字和图片并排转化为行内块级元素,每个元素都设置vertical-align:middle
- li高度由内部内容撑起,要设置,li{overflow:auto}.默认值是visiable,将内部元素显示在li之外。auto可实现自适应高度
- user-select:auto=>如果浏览器允许,则可以选择文本。text==>可以选取文本。none==>防止文本被选取。all==>单击选取文本,而不是双击
- white-space:nowrap 文字不换行 word-wrap:break-word 长单词换行 word-break:break-all 换行不截断单词
- overflow: hidden;text-overflow: ellipsis;white-space: nowrap;单行文本超出省略号显示
- overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;多行文本超出省略号显示 - css选择器 兄弟元素之间 用~。#read-more:checked ~ #content 与#read-more标签选中的同级的#content元素
- perspective 设定透视深度 backface-visibility 隐藏背面 (翻牌效果)
- :hover设置的样式只能对目标元素有效,不能改变目标元素的子元素的样式,如果要改变子元素的样式还需要组合选择器
- 不要随便用js修改document的宽度,这样会出现滚动条
- translateX移动的距离始终是以元素起始位置为原点,无论以后改变tanslateX的值多少次,始终都是以初始位置为原点在X轴方向的偏移量。
- border-style:dotted默认四条边都是圆点,加上double,double在后面border-style:dotted double只有上下2边是圆点;double在前面border-style:double dotted左右2条边是圆点。
- 文字也可以当做背景图片,将文字颜色设为透明,文字容器的背景设置成渐变。
.proverb{ background-clip:text; color:transparent; background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
css总结
于 2021-11-06 02:28:54 首次发布