小编web*_*iki的帖子

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

是否可以设置与宽度相同的高度(比例1:1)？

例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

我想知道是否有一种更简单的方法来创建循环div而不是我现在正在做的事情.

目前,我只是为每个不同的大小制作一个图像,但这样做很烦人.

无论如何使用CSS来制作圆形的div,我可以指定半径？

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下.

但是,它一旦播放就会回到原来的状态.任何人都知道如何在最后一个css帧(100%)上停止它,或者如何摆脱它曾经玩过的整个div.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

我试图将几个inline和inline-block组件垂直对齐div.为什么span这个例子坚持要被推倒？我都试过vertical-align:middle;和vertical-align:top;,但没有任何变化.

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>?

CSS:

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

结果:

小提琴

是否可以使用css绘制圆圈,这可以在大多数浏览器(IE,Mozilla,Safari)上使用？

这两个CSS属性之间是否有区别:

background: none;
background: transparent;

1. 它们都有效吗？
2. 应该使用哪一个？为什么？

我有以下代码

div {
   width:200px;
   border-bottom:1px solid magenta;
   height:50px;   
}

DEMO

div宽度为200px,因此border-bottom也是200px但是如果我想边框底部只有100px而不改变div宽度该怎么办？

我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.

我想让它居中并扩展以填充可用的宽度和可用的高度,但不要在任何一侧变大.

例如:

1. 高而薄的页面将使内容伸展整个宽度,同时保持比例高度.
2. 较短的宽页面将使内容延伸到整个高度,具有成比例的宽度.

我一直在研究两种方法:

1. 使用具有正确宽高比的图像来扩展容器div,但我无法让它在主要浏览器中以相同的方式运行.
2. 设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.

我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.

有任何想法吗？

如果我对border-radius 使用像素或em值,则边缘半径始终为圆弧或药丸形状,即使该值大于元素的最大边.

当我使用百分比时,边缘半径是椭圆形的,从元素每边的中间开始,形成椭圆形或椭圆形:

border-radius的像素值:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

border-radius的百分比值:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

为什么边界半径百分比的作用方式与使用像素值或em值设置的border-radius的作用方式相同？