WEB display -复习用如侵则删

最新推荐文章于 2022-06-02 16:27:57 发布

qq_47632786

最新推荐文章于 2022-06-02 16:27:57 发布

阅读量1.4k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_47632786/article/details/124403754

版权

display

display 属性规定元素在布局中应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML
中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

属性名：display
属性值：inline|block| inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group |table-column |…| none
默认值：inline
适用对象：所有元素（常用于ul ol li a元素）
不可继承

使用列表作为导航
有两种方法可以将列表变为水平条

让列表项显示为内联元素
浮动，将列表项和链接排成一行

p.inline
    {
     display:inline;
    }

如何把元素显示为内联元素？

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>
</body>
</html>

如何把元素显示为块级元素？

<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>

<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>

</body>
</html>

CSS滑动效果

hover伪类，当鼠标位于链接上方时差生滑过效果
交替背景图像
背景图像位移：把所有的划过状态放在一副图像上，然后为每种链接状态改变背景位置。

qq_47632786

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
WEB display -复习用如侵则删

displaydisplay 属性规定元素在布局中应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。属性名：display属性值：inline|block| inline-block | table | inline-table | table-row-group
复制链接

扫一扫