css案例-产品模块布局-图片比盒子大怎么办？

文章目录

结果图
编写中出现的问题
- 1.规定img盒子的大小，但是发现图片比img盒子大很多怎么办？
- 2.编写过程中文字冲破盒子怎么办？
实现代码

结果图

编写中出现的问题

1.规定img盒子的大小，但是发现图片比img盒子大很多怎么办？

对图片单独定义，使得图片的宽和它的父亲img盒子的宽度一致，代码如下：

.box img {width: 100%;}

2.编写过程中文字冲破盒子怎么办？

需要注意的是，在这个案例中，为了统一格式，我们给每个盒子都设置了内外边距，而内边距padding属性的使用有可能导致盒子被撑破。解决方法是，如果我们要设置一个盒子的左右内边距，那么我们就不能够给它设置宽度。

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品模块布局</title><style>/* 首先将初始边距归0 */* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;border: 1px solid grey;/* 让块级的盒子水平居中对齐 */margin: 0 auto;background-color: #fff;}.box img {width: 100%;}.review {height: 70px;text-align: left;font-size: 14px;/* 因为这个段落没有width属性，所以padding属性不会撑开盒子的宽度 *//* 不指定padding-top的值是因为这个段落有height值，会撑大盒子 */padding:0 28px;margin-top: 30px;   }.appraise {font-size: 12px;color:#b0b0b0;margin-top: 20px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info .prize{color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin:0 6px 0 15px; }</style>
</head>
<body><div class="box"><div class="img"><img src="imgs/girl.jpg"><!-- 图片超大，如何使图片不超过盒子的大小呢？对图片单独设置长宽，和父亲盒子长宽一致 --><p class="review">快递牛，整体不错，蓝牙可以说是秒连，红米给力</p></div><div class="appraise"><p>来自于 117384232 的评价</p></div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a><h4><em>|</em><span class="prize">99.9元</span></div></div>
</body>
</html>

css案例-产品模块布局-图片比盒子大怎么办？相关推荐

小米官网——简单产品模块布局实现
注意: 标签都是有语义的,合理的地方用合理的标签.比如产品标题就用h,大量文字段落就用p margin和padding大部分情况下可以进行混用,两者各有优缺点,最好根据实际情况,采取简单的方法实现,比 ...
flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据
效果如下: 样式 <style lang="scss"> body{background-color: #f4f7fb;} #home{height: 100%;.ma ...
web前端学习156-161（案例1：产品模块---小米手机产品）
文章目录 3. 综合案例案例1:产品模块 3. 综合案例案例1:产品模块分析一下: 整体看成一个大盒子里面分块分别当作小盒子当时敲代码出现一个命名问题: 我开始命名图片b2.png,.box ...
产品模块(HTML、CSS)
产品模块(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
虾皮市场中店铺定位是什么，如何做好产品线布局？这些东西你有了解吗?
当下,东南亚无疑是跨境电商人的新兴热门平台,众多卖家争先布局.其中,以虾皮为例,年均整体增速都超过100%的增长.卖家要想找准自身店铺的定位.做好产品线的布局,在新兴蓝海市场中大获全胜,了解虾皮中店铺 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css案例7——图片自适应盒子大小（不变形）
一.案例说明一个100*100固定盒子里面放有图片,不管插入的图片大小如何,让他不变形的占满盒子. 1.最开始写法: 这样的话图片会变形.只需要加一句话即可object-fit: cover;.保持 ...
案例学习-产品模块和快报模块
依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩的案例学习,一个是产品模块,另外一个是快报模块. 产品 ...
7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...

css案例-产品模块布局-图片比盒子大怎么办？

文章目录

结果图

编写中出现的问题

1.规定img盒子的大小，但是发现图片比img盒子大很多怎么办？

2.编写过程中文字冲破盒子怎么办？

实现代码

css案例-产品模块布局-图片比盒子大怎么办？相关推荐

最新文章

热门文章