移动端( H5 小程序)CSS 要点总结 ——持续更新

xiaoxiao2021-03-01  45

经常遇到坑…在W3C上学习了一段时间了,但是实际遇到的时候,细节多多。一一记录下来,温故而知新。

1. CSS 截断字符串;

{ /*指定字符串的宽度*/ width:300px; overflow: hidden; /* 当字符串超过规定长度,显示省略符*/ text-overflow:ellipsis; white-space: nowrap; }

2. box-sizing (顾名思义,盒模型对元素高宽的计算方式)使用时应注意

content-box, 默认值,标准盒模型。 width 与 height 只包括内容的宽和高, 不包括边框,内边距,外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px; padding-box, width 与 height 包括内边距,不包括边框与外边距。 border-box, width 与 height 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

3. 元素定位 Position

详细请戳这篇文章:【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

中间有说到 float:left or right 的部分;

但是 float 又和 display: inline-block 很像,所以有什么区别的,请戳 css之display:inline-block布局

 

转载请注明原文地址: https://www.6miu.com/read-4199989.html

最新回复(0)