css水平调整（几个鲜为人知的CSS设置）
css水平调整（几个鲜为人知的CSS设置）li::marker { content: "✔ "; color: green; }效果图实现的效果等价于使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记 .parent { display: flex; } .child { margin: auto; }效果图如下： .parent { display: flex; flex-wrap: wrap; gap: 1em;/* 设置flex项之间的间隙 */ }效果图 p::selection { background-color: #fff; color: red; }效果图
水平和垂直对齐第一种方式 ： grid place-items
.parent {
display: grid;
place-items: center;
}
/*注： place-items 是 justify-items 和 align-items 的简写属性 */
效果图如下：
.parent {
display: grid;
place-items: center;
grid-template-columns:100px auto 100px ;/* 规定网格布局中的列数（和宽度）， 此属性可以一次应用于一个或多个（子）单元格 */
/*常用的属性值： grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;*/
}
效果图如下：
第二种方式 ： flex margin
.parent {
display: flex;
}
.child {
margin: auto;
}
效果图如下：
.parent {
display: flex;
flex-wrap: wrap;
gap: 1em;/* 设置flex项之间的间隙 */
}
效果图
p::selection {
background-color: #fff;
color: red;
}
效果图
实现的效果等价于使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记
li::marker {
content: "✔ ";
color: green;
}
效果图
<p>Some <span tooltip="attr函数">text</span> here</p>
p {
margin: 2em;
font-size: 1.25rem;
}
span {
color: #1266f1;
border-bottom: 1px dashed;
position: relative;
cursor: pointer;
}
span::after {
/* --- */
content: attr(tooltip);
/* --- */
position: absolute;
top: -1.25em;
left: 50%;
transform: translateX(-50%);
color: #00b74a;
font-style: italic;
opacity: 0;
transition: 0.2s;
}
span:hover::after {
opacity: 1;
}
效果
注： 可以进行对不同单位进行计算
div{
height: calc(100% - 50px);
}caret-color 属性设置插入符号的颜色
textarea{
caret-color: red;
}
效果图
div {
text-overflow: ellipsis;
}
效果：
属性值：
- column-count: 指定列数
- column-gap：设置列之间的间隙
- column-rule：设置列之间垂直线的样式
<p>
HTML 参考手册
HTML ASCII 参考手册
HTML 语言代码参考手册
HTML 参考手册
HTML 参考手册
HTML ASCII 参考手册
HTML 语言代码参考手册
HTML 参考手册
HTML 5 视频/音频参考手册
HTML 5 Canvas 参考手册
CSS 参考手册
CSS 选择器参考手册
CSS 听觉参考手册
CSS 参考手册
CSS 听觉参考手册
JavaScript 参考手册
JavaScript 参考手册
JavaScript 参考手册
jQuery 参考手册
jQuery 参考手册 - 选择器
jQuery 参考手册 - 事件
jQuery 参考手册 - 效果
jQuery 参考手册 - 文档操作
jQuery 参考手册 - 属性操作
jQuery 参考手册 - CSS 操作
jQuery 参考手册 - Ajax
jQuery 参考手册 - 遍历
jQuery 参考手册 - 数据
jQuery 参考手册 - DOM 元素方法
jQuery 参考手册 - 核心
jQuery 参考手册 - 属性
JavaScript 参考手册
ASP.NET MVC - 参考手册
XSLT 元素参考手册
XSLT 函数参考手册
XSL-FO 参考手册
XQuery 参考手册
XLink 参考手册
XML Schema 参考手册
XML DOM 参考手册
XForms 数据类型 参考手册
WML 参考手册
WML 参考手册
RSS 参考手册
Web 多媒体元素参考手册
Windows Media Player 参考手册
MIME 参考手册
HTML 参考手册
HTML 参考手册
HTML 5 视频/音频参考手册
HTML 5 Canvas 参考手册
HTML ASCII 参考手册
HTML 语言代码参考手册
JavaScript 参考手册
JavaScript 事件参考手册
ADO 参考手册
ASP 参考手册
ASP.NET 参考手册
HTML DOM 参考手册
PHP 参考手册
jQuery 参考手册 - 队列控制
JavaScript 参考手册
CSS 参考手册
RDF 参考手册
SMIL 参考手册
SVG 参考手册
</p>
p {
margin: 1em;
/* --- */
column-count: 3;
column-gap: 2em;
column-rule: 1px dotted;
/* --- */
}
效果图
具有 Flexbox 功能的内联元素
span{
display: inline-flex;
}background-repeat 设置北京填充指定图片的顺序
属性值：
- repeat: 图像平铺到整个容器内
- round:在容器的整个宽度上均匀分布
- space: 在图像之间添加少量填充
注：亲手做一下效果会更好
.repeat {
background-repeat: repeat;
}
.round {
background-repeat: round;
}
.space {
background-repeat: space;
}object-fit 属性控制被替换元素的纵横比
例如img 和 viedeo 标签
