当前位置: 首页 > Web前端 > HTML5

CSS摘要

时间:2023-04-05 19:55:16 HTML5

常用css样式及技巧1、商品价格文字中的一行,例如:div{text-decoration:line-through;}2、文字溢出时显示省略号,例如:单行文字div{溢出:隐藏;文本溢出:省略号;white-space:nowrap;}不定行文本---注意兼容性div{display:-webkit-box;-webkit-box-orient:垂直;-webkit-line-clamp:3;overflow:hidden;}3.div元素在块级元素中垂直居中。我个人长期使用5/6,以后要换了。示例:固定宽度1:使用定位top/bottom,left/right为0来设置

不固定宽度2:使用表格中的元素垂直居中
非纯宽3:使用flex布局---注意兼容性不固定4:使用框布局---兼容性固定位置5:使用orientationtop:50%,margin-top:-width/2Fixed6:Usetransform---注意兼容性sdfsdf自卫队4.输入占位符样式修改:input::-webkit-input-placeholder{-webkit-text-fill-color:#999;颜色:#999;}输入:-moz-placeholder{-webkit-text-fill-color:#999;颜色:#999;}输入:-ms-input-placeholder{-webkit-text-fill-color:#999;颜色:#999;}输入:禁用{-webkit-text-fill-color:rgba(0、0、0、1);-webkit-不透明度:1;颜色:继承;opacity:inherit;}5.boxlayout:parentelementsettings:display:box;box-orient:Horizo??ntal/verticalchildren水平或垂直排列。注意:所有主流浏览器都不支持该属性,必须加上前缀。width,child设置的宽度无效,child会填充parent的宽度;vertical:垂直排列,child的总高度=parent的高度,如果parent的高度是固定的,则child设置的高度无效,child会填充parent的宽度;box-direction:normal/reverse确定孩子的排列顺序;normal默认值,children按照html顺序排列;reverse颠倒顺序;box-align:start/end/center/stretch子对齐的垂直方向;开始垂直顶部对齐;结束垂直底部对齐;center垂直居中对齐;stretch拉伸子项的高度,使其与父项设置的高度一致。孩子身高无效;box-pack:start/end/center孩子的水平对齐;开始水平左对齐;结束水平右对齐;center水平居中对齐;子元素设置:box-flex:number;占父元素部分宽度的个数;如果子元素设置为固定宽度,则子元素应用固定宽度,并且其未设置固定宽度的word元素将取剩余的父宽度(固定宽度的父子元素的总宽度按number设置);如果子元素有边距值,则为剩余的(父元素宽度-后代固定总宽度-总边距值)宽度占number部分;