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

我就是我 2022-04-12 03:21 149阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**要实现的样式：**

![20181130163433827.png][]

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

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

![2018113018505464.png][]

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

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

![20181130185332658.png][]

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

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

![2018113018561317.png][]

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

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

![20181130190023251.png][]

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

![20181203115900341.png][]

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

![20181203122924613.png][]

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

![20181204150619145.png][]

**给父级设置成弹性盒子flex**

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

![20181204150335697.png][]

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

![2018120419245524.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

**实例（3）**

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

![20181205094312369.png][]                ![20181205094531748.png][]

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

![20181205141133379.png][]

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

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

![20181205141109129.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220412/e60daf408a9d41f8a294303ff54c56eb.png
[20181130163433827.png]: /images/20220412/14d317548b034faf91a57192a9327222.png
[2018113018505464.png]: /images/20220412/c3957926bf4440068fc736d5aad251e0.png
[20181130185332658.png]: /images/20220412/864db5c0bf504a19ba9f0d0e7f0b47dc.png
[2018113018561317.png]: /images/20220412/e0f1fe6ee24442408e9f0177adfa50bb.png
[20181130190023251.png]: /images/20220412/367345e6f9ab4035818b2bfff591260e.png
[20181203115900341.png]: /images/20220412/36dc640b86d04f3a8a88506af403270c.png
[20181203122924613.png]: /images/20220412/f13d11ca5da84d89baf58d90c44f31d6.png
[20181204150619145.png]: /images/20220412/bd5595dab59a4ac7a2319aa730e0e27c.png
[20181204150335697.png]: /images/20220412/1e09bf457f314159b098dd0d384d6462.png
[2018120419245524.png]: /images/20220412/7c2727bd14d7467db92a7bef18026c7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220412/e8825de3a28c4e2cb894531135a8f94e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20220412/73626d3ca30446c4b772a036bfa78732.png
[20181205094312369.png]: https://img-blog.csdnimg.cn/20181205094312369.png
[20181205094531748.png]: /images/20220412/c136e2a4262b474b85932986e7921381.png
[20181205141133379.png]: /images/20220412/0454d9a3cdad4c16bfe3ca38d68339c8.png
[20181205141109129.png]: /images/20220412/16e6ecac7a4342dfaa977ba01f8f1457.png