江苏龙网

  1. 主页 > 生活百科 > >

几个鲜为人知的CSS设置

css

水平和垂直对齐第一种方式 ： grid + place-items
.parent {display: grid;place-items: center; } /*注： place-items 是 justify-items 和 align-items 的简写属性 */效果图如下：

几个鲜为人知的CSS设置

文章插图
 
.parent {display: grid;place-items: center;grid-template-columns:100px auto 100px ;/* 规定网格布局中的列数（和宽度）， 此属性可以一次应用于一个或多个（子）单元格 *//*常用的属性值： grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;*/ }效果图如下：
几个鲜为人知的CSS设置

文章插图
 
第二种方式 ： flex + margin
.parent {display: flex; } .child {margin: auto; }效果图如下：
几个鲜为人知的CSS设置

文章插图
 
flex + gap .parent {display: flex;flex-wrap: wrap;gap: 1em;/* 设置flex项之间的间隙*/ }效果图
几个鲜为人知的CSS设置

文章插图
 
::selection 伪元素设置文本选择的样式p::selection {background-color: #fff;color: red; }效果图
几个鲜为人知的CSS设置

文章插图
 
::marker 伪元素【几个鲜为人知的CSS设置】实现的效果等价于使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记
li::marker {content: "? ";color: green;}效果图
几个鲜为人知的CSS设置

文章插图
 
attr() 函数 检索所选元素的属性并在样式中使用它 <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; }效果
几个鲜为人知的CSS设置

文章插图
 
calc（） 函数用于指定使用大小、角度、时间或者数字作为值的属性的计算值注： 可以进行对不同单位进行计算
div{height: calc(100% - 50px); }caret-color 属性设置插入符号的颜色 textarea{caret-color: red; }效果图
几个鲜为人知的CSS设置

文章插图
 
text-overflow 设置 div {text-overflow: ellipsis; }效果：
几个鲜为人知的CSS设置

文章插图
 
columns 是复合属性，column-count 和column-width的简写属性值：
  • 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 参考手册 - AjaxjQuery 参考手册 - 遍历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;/* --- */}


推荐阅读


上一篇：菊花品种大全及图片,湖南观赏菊菊花苗品种及图片

下一篇：砂仁陈皮泡水喝功效,陈皮泡水喝有什么功效