css总结

2020-01-14 19:55:43 阅读：234 来源： 互联网

平时比较常用的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来设置

<div style="width:200px;height:200px;border:solid blue;position:relative;">
  <div style="width:100px;height:100px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;"></div>
</div>

不固宽2：利用表格中元素垂直居中

<div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;">
  <div style="width:100px;height:100px;display:inline-block;background-color: red;"></div>
</div>

不固宽3：利用flex布局 --- 注意兼容性

<div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;">
  <div style="width:100px;height:100px;background-color: red;"></div>
</div>

不固宽4：利用box布局 --- 注意兼容性

<div style="width:200px;height:200px; border:2px solid #000;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;">
  <div style="width:100px;height:100px;background-color: red;"></div>
</div>

固宽5：利用定位top:50%,margin-top: -width/2设置

<div style="width:200px;height:200px; border:2px solid #000;position:relative;">
  <div style="width:100px;height:100px;margin:auto;position:absolute;left:50%;top:50%;margin-left: -50px;margin-top:-50px;background-color: red;"></div>
</div>

不固宽6：利用transform --- 注意兼容性

<div style="width:200px;height:200px; border:2px solid #000;position: relative;top:50%;left:50%;transform:translateY(-50%);transform:translateX(-50%); ">
  <div style="background-color: red;">sdfsdfsdf</div>
</div>

4. input placeholder样式修改：

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份；

标签：总结,box,父级,color,子代,宽度,webkit,css
来源： https://www.cnblogs.com/homehtml/p/12193750.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。