摘要：平时比较常用的样式和技巧商品价格文本中的一条线，例文本超出溢出显示省略号，例单行本文不定行文本注意兼容性元素在块级元素中垂直居中个人比较长用的是，以后要改过来才行，例固宽利用定位都为来设置不固宽利用表格中元素垂
平时比较常用的css样式和技巧 1. 商品价格文本中的一条线，例：
div {
text-decoration: line-through;
}
2. 文本超出溢出显示省略号，例：
单行本文
div {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
不定行文本 --- 注意兼容性
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
3. div元素在块级元素中垂直居中,个人比较长用的是5/6，以后要改过来才行，例：
固宽1：利用定位top/bottom,left/right都为0来设置
不固宽2：利用表格中元素垂直居中
不固宽3：利用flex布局 --- 注意兼容性
不固宽4：利用box布局 --- 注意兼容性
固宽5：利用定位top:50%,margin-top: -width/2设置
不固宽6：利用transform --- 注意兼容性
4. input placeholder样式修改：sdfsdfsdf
input::-webkit-input-placeholder {
-webkit-text-fill-color: #999;
color: #999;
}
input:-moz-placeholder {
-webkit-text-fill-color: #999;
color: #999;
}
input:-ms-input-placeholder {
-webkit-text-fill-color: #999;
color: #999;
}
input:disabled {
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
color: inherit;
opacity: inherit;
}
5. box布局:
父元素设置： display: box;
box-orient: horizontal/vertical
子代按水平排列或竖直排列，注：所有主流浏览器不支持该属性，必须加上前缀；
horizontal：水平排列，子代总width = 父级width，若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度；
vertical：垂直排列，子代总height = 父级height，若父级固定高度，则子代设置的height无效，子代会撑满父级宽度；
box-direction: normal/reverse
确认子代的排列顺序；
normal 默认值，子代按html顺序排列；
reverse 反序；
box-align: start/end/center/stretch
子代的垂直对齐方式；
start 垂直顶部对齐；
end 垂直底部对齐；
center 垂直居中对齐；
stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效；
box-pack: start/end/center
子代的水平对齐方式；
start 水平左对齐；
end 水平右对齐；
center 水平居中对齐；
子元素设置：
box-flex: number;
占父级元素宽度的number份；
若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按 number占份数）；
若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112744.html
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
阅读 1234·2021-09-28 09:44
阅读 2299·2021-09-28 09:36
阅读 730·2021-09-08 09:35
阅读 1823·2019-08-29 13:50
阅读 679·2019-08-29 13:29
阅读 993·2019-08-29 13:15
阅读 1599·2019-08-29 13:00
阅读 2691·2019-08-26 16:16
