css基础 overflow:hidden div中图片溢出的部分隐藏

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
        div {
            height:100px;
            width:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="pic.png" />
    </div>
    <br />
    <br />
    <br />
    <div style="overflow:hidden;">
        <img src="pic.png" />
    </div>
    <!-- 小技巧 -->
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8441445.html

时间: 2024-08-26 22:25:26

css基础 overflow:hidden div中图片溢出的部分隐藏的相关文章

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

div+css:div中图片垂直居中

div中图片垂直居中 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box { 8 width: 200px; 9 height:200px; 10 display: table-cell; 11 /* 水平居中 */ 12 text-align:center; 13

css基础 BFC 解决div块外边距合并问题

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

div中图片居中

<html> <head> <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

CSS 的overflow:hidden 属性详细解释

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而其实它还有清除浮动这个功能.              taobao demo 这段代码是一个做淘宝搜索框中的一段代码,这里overflow:hidden就起到了一个清除浮动的效果. 具体代码可以看慕课网http://www.imooc.com/video/282里的教程

CSS 的overflow:hidden (清除浮动)

verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的. verflow:hidden清除浮动,例如如下:(样式box div是样式content div的父元素) .box{           background:#000;           width:300px;        

关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果如下: 2. overflow:hidden 清除浮动 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度.当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0.那么问题来了,如下: 运行结果如下: 如上,由于父级元素

css基础 给p标签中的内容 加粗,斜体,下划线,字体大小

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ part code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8