html css 小知识点

单行文字结尾省略号 要用复合属性

width：

white-space ：nowrap

overfow ：hidden

text-overflow： ellipsis

input取消选中时的蓝色边框

input {outline：none：}

垂直居中方法一：

<div>

<img src="" alt="">

<span></span>

</div>

div {

text-align: center;

}

img {

vertical-align: middle;

}

div span {

display: inline-block;

width: 0;

height:100%;

vertical-align: middle;

}

方法二：

外盒子相对 或 绝对定位

内盒子 position: absolute;top:0; bottom:0; left:0; right:0;margin:auto;

.box {

height:300px;

width: 300px;

border:1px solid blue;

position: relative;

}

.box div {

height: 30px;

width:30px;

background-color: red;

position: absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

}

方法三 定位50% 然后负边距

不定宽度居中方法

加入 table 标签

设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

这一小节我们来讲一下第一种方法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

<div>

<table>

<tbody>

<tr><td>

<ul>

<li>我是第一行文本</li>

<li>我是第二行文本</li>

<li>我是第三行文本</li>

</ul>

</td></tr>

</tbody>

</table>

</div>

css代码：

<style>

table{ border:1px solid; margin:0 auto; }

</style>

音频最好的 HTML 解决方法

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

<embed height="50" width="100" src="horse.mp3">

</audio>

最好的 HTML 解决方法

<video width="320" height="240" controls autoplay>

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

<object data="movie.mp4" width="320" height="240">

<embed width="320" height="240" src="movie.swf">

</object>

</video>

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>