1、设置css box-sizing:border-box; 设置初始样式时,设置不需要考虑盒子模型设置宽高设置,border,padding 包含在内容部分不用计算。这样始终保持盒子content始终是宽高设置,设置的border,padding,向内延申不用计算。
2、颜色的alpha 通道
rgba(225,225,225,.1)最后一个是透明度
可以用rgba的颜色是,background,color
rgba作用在当前设置的css属性的html元素上
opacity会作用在设置的html以及子元素上。
rgba(225 225 225 /50%)
#000000
3、尺寸的百分比
百分比是一个相对单位,相对于元素的参考系
普通元素的参考系为 父元素的内容区域绝对(固定)定位元素的参考系为父元素中 第一个定位元素的padding区域
下面罗列常见的百分比情况
| css属性 | 百分比相对于参考系 |
|---|---|
| width | width |
| height | height |
| padding | width |
| border | widthwidth |
| margin | width |
4、设置最大最小宽高、
最大宽度:max-width ·最小宽度:min-width 最大高度:max-height 最小高度:min-height 当一个元素的尺寸会自动变化时,设置最大最小宽高,可以让它不至于变得过小或过大在实际开发中,我们通常为PC端的页面设置一个最小宽度,通常此宽度为设计稿的宽度
两个场景一个是网页设置 一个是图片设置