我在做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中链接文本为图片时的问题(塌陷、对应的图片建立倒角的问题)的更多相关文章

  1. HTML与CSS中的文本个人分享

    文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...

  2. CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  3. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  4. CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

    CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...

  5. css中链接的4个状态 link、visited 、hover、active 顺序与设置

    link       未点时链接色visited  已点过的链接色hover   光标放入链接上的色active   点击时的样式 顺序一定要按link.visited.hover.active来设置 ...

  6. css中一些文本属性的用法

    代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...

  7. 2018.7.15 解决css中input输入框点击时去掉外边框方法

    .input_css{ background:no-repeat 0 0 scroll #EEEEEE; border:none; outline:medium; }

  8. html选中图片时,在页面回写图片

    我们经常会遇到这种情况,就是上传一个图片,但是点击一个图片的时候,最好是可以在浏览器预览这个图片,不然用户还以为没有选择图片呢,但是浏览器的安全机制却阻止了这个问题,就是当访问的是网络上的网站的时候, ...

  9. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

随机推荐

  1. Web 开发中 9 个有用的提示和技巧

    在本文中,我们给出 9 个有用的 HTML.CSS 和 JavaScript 的技巧和提示,可能在做 Web 开发中经常会需要用到的,其中有几个是关于 HTML5 和 CSS3 的,如果你是一个前端开 ...

  2. PropertyGrid--为复杂属性提供编辑功能

    零.引言 PropertyGrid用来显示某一对象的属性,但是并不是所有的属性都能编辑,基本数据类型(int, double等)和.Net一些封装的类型(Size,Color等)可以编辑,但是对于自己 ...

  3. 常见Web Service 使用网址

    下面的网址是常用Web Service http://www.webxml.com.cn/zh_cn/web_services.aspx 里面的很多Web Service接口...可以用到的,很有用!

  4. 由chkconfig 引发的联想——怎么查看程序是否已经安装/成功安装

    由chkconfig 引发的联想--怎么查看程序是否已经安装/成功安装 某天需要运行chkconfig,root登录依然找不到该命令. [root@localhost ~]# chkconfig ba ...

  5. 如何在linux中设置tab键长度

    1. 创建文件名为 .vimrc 的系统文件 首先切换到用户根目录,然后创建文件. $ cd ~ $ vim .vimrc 2. 在文件中输入下面的内容并保存 set tabstop=4 set sh ...

  6. 用Struts2标签实现Map的迭代

    最近在做一个论坛,论坛通常分为几个主版块,每一个主版块下面又有几个子版块. 想不出更好的展现方式,最终采用了如下的方法来实现: 用一个Map,HashMap或者Treemap承载之.一个子版块名字对应 ...

  7. VB中后台打开Excel文件实现代码

    某些时候需要打开Excel文件来获取或者写入数据,但又不希望跳出打开的Excel文件窗口,可以用下面的代码: Dim eb As New excel.Application, wb as excel. ...

  8. Android_Dialog cancle 和dismiss 区别

    AlertDialog使用很方便,但是有一个问题就是:dismiss方法和cancel方法到底有什么不同? AlertDialog继承与Dialog,现在各位看看结构图: 然后在Dialog类中找到了 ...

  9. PHPStrom上传文件报502错误原因

    PhpStorm是一个轻量级且便捷的PHP IDE,其自身拥有apache类似的编译器,能够在无Apache的情况下运行,很适合初学PHPStrom的朋友. 但是我发现了一个问题,那就是用PHPStr ...

  10. wamp出现You don’t have permission to access/on this server提示(转)

    转自http://blog.csdn.net/hong0220/article/details/40262729 ,转载方便以后查看. 今天搭建wamp集成环境,本来已经搭建好了,但是在访问local ...