锚点，iframe,溢出

最新推荐文章于 2024-07-17 10:39:42 发布

原创最新推荐文章于 2024-07-17 10:39:42 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

1.锚点

a标签除了用做页面跳转外还可以做锚点

本页面的锚点是通过改变滚动条的位置实现
页面跳转后的锚点会通过先跳转页面再改变滚动条的位置来实现
可以将a的href属性链接到另一个a的name属性或者任何元素的id属性在做锚点

下面是四个不同颜色的盒子通过锚点跳转到各自的位置

<ul>
    <li><a href="#li1">1</a></li>
    <li><a href="#li2">2</a></li>
    <li><a href="#li3">3</a></li>
    <li><a href="#li4">4</a></li>
</ul>
<div id="div1"><a name="li1"></a></div>
<div id="div2"><a name="li2"></a></div>
<div id="div3"><a name="li3"></a></div>
<div id="div4"><a name="li4"></a></div>

div{height:150px; margin:25px 0;}
#div1{background-color:#999;}
#div2{background-color:#3F9;}
#div3{background-color:#C39;}
#div4{background-color:#F90;}
ul{position:fixed; top:20px; right:20px;}
li{width:25px; height:25px; margin-bottom:5px; border:1px #000 solid;text-align:center; line-height:25px;}

当通过锚点跳转到第3个div时：

2.iframe框架标签

iframe的属性：

scrolling：框架是否滚动，值为yes（有），no（无），默认为auto（需要的时候出现）
frameBorder：是否显示边框，值为正整数，默认为1（有边框），值为0（无边框）
align：对齐方式
src：内框架的地址，可以是页面地址，也可以是图片的地址
width/height：嵌套页面区域的宽高
name：配合a的target属性值等于iframe的name，可以让a在超链接的跳转打开页面时在iframe区域打开
srcdoc：用来代替原来HTML body里面的内容。但是IE不支持。

3.溢出

overflow：溢出如何显示
overflow-x:hidden （水平方向裁切）
overflow-y:hidden （垂直方向裁切）
overflow:hidden （两个方向裁切）

注意：如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中一个值显式设置为visible或未设置默认为visible，而另外一个值是非visible的值。则visible值会被重置为auto。

visible：默认值。溢出的内容不会被修剪，元素的内容在元素框外也可以见到
hidden：溢出的内容会被修剪，并且其余内容是不可见的
scroll：元素的内容会在元素框的边界处剪裁，浏览器会显示滚动条以便查看其余的内容
auto：如果溢出的内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit：规定应该从父元素继承 overflow 属性的值
no-display：当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样

1.关于文字溢出时显示省略号，但其内容可以通过title呈现出来

<p title="溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出">溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示</p>

p{width:400px; border:2px #F90 solid; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}

当鼠标移入文字上则文本的全部内容将全部显示出来。

2.用overflow属性实现不显示滚动条还可以通过滚动鼠标滚轮展示所有的文本效果。

<div class="div1"><div class="div2">溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示何显示</div></div>

.div1{width:300px;height:300px; overflow:hidden;border:1px #f00 solid;}
.div2{width:320px; height:300px;  overflow:auto; margin:0;}