项目开发中的样式布局实例

1. 盒子margin-left和margin-top的设置，使得背景是灰色，而灰色部分真是大盒子的背景颜色

要实现的样式：

应该用padding，这样颜色就和盒子颜色一样。

2. 红心是个图片，通过line-height = height让红心和文在垂直居中的时候，红心还有往下，我们可以通过margin-top上下移动红心，让它和文字水平对齐。

3. 让“今日预定”这个绿色的盒子position：absolute定位到外面大盒子的顶部。但是“今天预定”这四个字却是在绿色盒子的顶部对齐，why？ I dont know

解决办法：通过line-height 的设置，让文字上下移动

4. “思明区”这个三个字和价格在一个大盒子里面，但是“思明区”的和价格99的距离不能用margin-left隔开，因为当价格不是两位数，是其他位数的时候，距离又发生了变化

解决办法：大盒子position：relative，“思明区” position：absolute；right 的设置，才会让“思明区”固定，而不受影响。

5. 设置了图片的宽度，但是没有设置右边盒子的宽度，但是我想要的效果是：除了图片的宽度，其他的宽度都是右边盒子的，而不能把右边盒子的width固定死。

解决办法；大盒子display：flex，设置图片width值，右边盒子的width有内容撑开，同时设置flex-grow：1，即剩下的width都给右边盒子。

6. 水平方向的滚动条的实现：外边包裹他们的框，不能设置宽和高，让其由内容撑开，并且设置overflow-x:auto; white-space:nowrap;

7. 溢出部分隐藏，且要用打点的形式隐藏。设置：overflow：hidden；text-overflow：ellipsis；

8. 如何让div盒子中的input框居中呢？上下居中，左右居中？

给父级设置成弹性盒子flex

注意：justify-content设置的是水平方向，width可以不设置。align-items设置的垂直方向，必须有height值

实例（2）position：absolute和display：flex可以同时用

效果：

实例（3）

align-items：center，是让块儿居中，但是块儿中的文字还是需要text-align：center让其居中的

                

 

9. 让盒子中的文字上下居中，左右居中

做法：text-align：center使得文字左右居中；line-height：的设置，以及没有height属性，那么内容就可以上下居中，line-height行高直接将内容垂直方向撑开，当然此处的height的设置会有效果，会影响到盒子的高度。

也就是说，平时用的line-height = height，可以直接使用line-height而不设置height值也是可以的。