CSS使用总结

一、常用css指令

（1）当父元素的display: flex时，子元素默认进行列排列，而三个子元素中只有中间的组件设置了flex: 1，这时父元素的宽度将进行以下分割：

1 <style lang="stylus" scoped>
2   .header
3     display: flex
4     .header-left
5     .header-input
6       flex: 1
7     .header-right
8 </style>

　　此时，header-left和header-right占用自己本身的宽度，而header-input的宽度为父元素header的宽度减去header-left和header-right占用的宽度；

而若三者的flex都设置为1时，将对父元素的宽度进行平分，如下:

 1 <style lang="stylus" scoped>
 2   .header
 3     display: flex
 4     .header-left
 5       flex: 1
 6     .header-input
 7       flex: 1
 8     .header-right
 9       flex: 1
10 </style>

（2）background是设置背景色，而color是设置背景中内容的颜色；

1 background: #fff
2 color: #ccc

（3）父元素的position设置为relative，而子元素的position设置为absolute时，子元素的定位是根据父元素进行定位的。（这个表述好像有问题啊，因为就算父元素不设置为relative，子元素依然是根据父元素进行定位的）

（4）

posted @ 2018-06-21 14:36  追风筝的蜗牛  阅读(130)  评论(0)    收藏  举报