CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)
我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出。代码如下:
<a href="../images/photos/concert.jpg" title="The crowd goes wild">
<img src="../images/photos/thumbnail_concert.jpg" alt="the band in concert" />
</a>
如何解决呢?我只要将a {display:block;}就可以撑起盒子。

我做了一点修饰,偏褐色的部分是图片盒子。绿色的部分为链接<a>的盒子。但此时图片的下部是无法填满<a>盒子的。我这时将<img>的css设为 img {display:block;},看效果。

这时<img>就可以铺满这个<a>盒子了,设置 a {display:inline;} 让其可以用inline的方式显示,<a>表现为inline还是block由元素的内容决定。即:<a>内容</a>。一个元素表现为inline的时候会直接缩到内容物的大小。
有些时候,若一个块级元素中含有许多浮动元素,这时外层的块级元素会塌陷掉。这时使用这样的代码,为方便我已伪代码表示:
blockelement {width:"size";overflow:auto/hidden};这样就可以撑起盒子了。
我给我的<img>设置了圆角,但是会发现其实这后面还有边框存在,看起来不协调。

也就是图中绿色的部分显示了<a>的背景德存在,我可以设置<a>的背景为透明,我也可以给它加个倒角是我看不见。

可以看到,绿色不见了,当我把背景换为红色时我观察到了外层的边框,但我根本没有设置啊!!!若是其他背景下还不容易看到。而随着我将li显示方式设为inline后,li会直接包含其中的内容,我甚至将li/a等的边框设为0也无济于事,不知问题在哪里。最后我发现是图片外面的虚框啊,只要我将对应的img {outline-width:0px;}就不会出现了。可以参看这篇不错的文章。

CSS中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)的更多相关文章
- HTML与CSS中的文本个人分享
文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...
- CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- CSS中使用文本阴影与元素阴影
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
- CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习
CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...
- css中链接的4个状态 link、visited 、hover、active 顺序与设置
link 未点时链接色visited 已点过的链接色hover 光标放入链接上的色active 点击时的样式 顺序一定要按link.visited.hover.active来设置 ...
- css中一些文本属性的用法
代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...
- 2018.7.15 解决css中input输入框点击时去掉外边框方法
.input_css{ background:no-repeat 0 0 scroll #EEEEEE; border:none; outline:medium; }
- html选中图片时,在页面回写图片
我们经常会遇到这种情况,就是上传一个图片,但是点击一个图片的时候,最好是可以在浏览器预览这个图片,不然用户还以为没有选择图片呢,但是浏览器的安全机制却阻止了这个问题,就是当访问的是网络上的网站的时候, ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
随机推荐
- Object-c学习之路七(oc字符串操作)
// // main.m // NSString // // Created by WildCat on 13-7-25. // Copyright (c) 2013年 wildcat. All ri ...
- 【floyd求最小环】【Vijos 1046】【观光旅游】
标签:图结构 最短路 题目大意:给你一个无向图,至少经过3个节点的简单回路(不能包括其他环) 一开始的思路:用一个NUM[i][j]表示i到j的最短路经过几个节点,显然解法不太优美,而且还是错的 再想 ...
- mysql insert中文乱码无法插入ERROR 1366 (HY000): Incorrect string value
ERROR 1366 (HY000): Incorrect string value: '\xB1\xEA\xCC\xE2\xD5\xE2...' for column 'title' at row ...
- 对于deferred的一点点理解
deferred对象,是一个异步队列.能够实现异步代码调用,从而解决代码执行顺序的问题. 它提供了一下主要方法: jQuery.Deferred() 一个构造函数,返回一个链式实用对象方法来注册多个回 ...
- VMware虚拟机中调整Linux分区大小手记(转发)
前段时间用VMware5.5安装了CentOS5.3,安装的时候分配了5Gb的虚拟硬盘空间给Linux系统,系统安装选择很多组件和软件,后面使用时又安装也一些软件,结果导致虚拟硬盘空间不足.查看分 ...
- FMDatabase 数据库的使用
创建,插入,更新和删除:使用executeUpdate方法,而查询则用executeQuery 1.实例化FMDatabase //paths: ios下Document路径,Document为ios ...
- CxImage整理(叠加字符/图像合并)
//CxImage叠加字符 void CCxImageTestDlg::OnBnClickedButton1() { CxImage imgJPG; // 定义一个CxImage对象 imgJPG.L ...
- fragment嵌套,viewpager嵌套 不能正确显示
转帖:http://blog.csdn.net/mybook1122/article/details/24003343 通常为 viewPager.setAdapter(new MyFragmentP ...
- 饿了么 天降红包 bug ----这是谁的错
早上来点餐,从没用饿了么点成功过,因为太难用. 今早,不,应该说前几天,出了个天降红包,领了个满20 减110的红包,没在意,因为还没升级客户端,不能用. 今早来,升级了一下客户端,下单了,看了饿了么 ...
- jQuery 随滚动条滚动效果 (适用于内容页长文章)
直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 ...