CSS的display、hover、overflow、&copy(版权符号)、borer-radius(边框圆角)

一、display: none 隐藏 block显示

    visibility:hidden隐藏 visible显示

display:none和visibility:hidden这两个属性对应的值都是隐藏对像,但是它们隐藏对像有点区别。

display和visibility的区别:display隐藏相当于这个元素没有了,visibility的隐藏该元素所占的位置还在,只是内容隐藏了。

二、hover:不是一个样式,用元素的ID或者CLASS之类后面跟冒号hover,代表鼠标放到此元素上显示哪些样式

例如:

三、overflow

可用值

描述
visible The content is not clipped. It renders outside the element
内容不会被省掉。会显示在元素的外面
hidden The content is clipped, but the browser does not display a scroll-bar to see the rest of the content 
内容会被省掉,但浏览器不会显示滚动条以用来查看剩余的内容(超出范围隐藏)
scroll The content is clipped, but the browser displays a scroll-bar to see the rest of the content
内容被省掉,但浏览器会显示滚动条以用来查看剩余的内容
auto If the content is clipped, the browser should display a scroll-bar to see the rest of the content
如果内容被省掉了,浏览器才会显示出滚动条

四、borer-radius(边框圆角)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#sub1
{
    width:200px;
    height:200px;
    border-radius:15px;
    background-color:#093
}

</style>
</head>

<body>
<div id="parent">
    <div id="sub1"></div>
</div>

</body>

时间: 2024-10-12 04:54:13

CSS的display、hover、overflow、&copy(版权符号)、borer-radius(边框圆角)的相关文章

CSS 3D旋转 hover 后设置transform 是相对于正常位置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .nav{ width: 980px; margin: 50px auto; background-color: #

Web前端面试指导(十五):CSS样式-display有哪些作用?

题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block(块级元素) <div>.<p> <ul> <ol> <form> -- inline(内联元素) <span> <a> <img> <input> <select> <label>

css之display:inline-block布局

css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, inline-block inline: 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,width的值,大小由内容撑开. 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行. block: 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,

显示html的版权符号

最近有小伙伴问©符号在页面显示很小,于是去查看他的源代码 他在HTML代码里对应输入© 那么在页面里应该会正常显示版权符号,可是为什么会出现这种问题呢? 首先我想到页面在设计的时候,用的字体是宋体,就算没有设置字体,中文系统下默认用的还是宋体,那么这就有可能导致的显示出来的版权符号变形. 后来试验了一下,真是字体影响了版权符号显示. 解决办法: 把字体设置为arial,就可以正常显示  代码和效果:<p style="font-family:arial;">©  2016

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

[ jquery 效果 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) ] 此方法用于显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type=&#39;hidden&#39; 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)

show()显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type='hidden' 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素): hide() 方法隐藏被选元素: 参数 描述 speed 可选.规定显示效果的速度. 可能的值: 毫秒 "slow" "fast" easing 可选.规定在动画的不同点上元素的速度.默认值为 "swing". 可能的值: &

CSS实例 display display 边距

1 CSS学习大纲 2 在标签上设置style属性: 3 background-color:#2459a2 ; 4 height:48px ; 5 编写CSS样式: 6 1.标签的style属性 7 2.写在head里面,style标签中写样式 8 ID选择器 9 #i1{ 10 background-color:2459a2 ; 11 height:48px ; 12 } 13 class选择器 ***** 14 .c1{ 15 background - color: 2459a2 ; 16

CSS样式“display:none”与“visibility:hidden”区别

CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>none</title> 5 <meta charset="utf-8"> 6 <style type="text/css"