CSS的display、hover、overflow、©(版权符号)、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:#
} </style>
</head> <body>
<div id="parent">
<div id="sub1"></div>
</div> </body>

CSS的display、hover、overflow、©(版权符号)、borer-radius(边框圆角)的更多相关文章
- CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构
display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...
- CSS之创意hover效果
一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- CSS的display属性
网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- css之display:inline-block布局
css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...
- 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素
.col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!
- css之display:inline-block布局--转
css之使用display:inline-block来布局 css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...
随机推荐
- IOS 特定于设备的开发:获取额外的设备信息
sysctl()和sysctlbyname()允许获取系统信息.这些标准的UNIX函数用于询问操作系统有关硬件和OS的详细信息. 这些常量使你能够检查核心信息,比如系统的CPU频率,可用的内存量等.它 ...
- C 查找子字符串
自己用 C 写的一个查找子字符串的函数 int findstr(char *str,char *substr) //C实现 find{ if(NULL == str || NULL== substr) ...
- Effective C++学习笔记——构造/析构/拷贝运算
条款9:决不再构造和析构过程中调用virtual函数,包括通过函数间接调用virtual函数. 应用:想在一个继承体系中,一个derived class被创建时,某个调用(例如生成相应的日志log)会 ...
- Mac 键盘快捷键
标签页和窗口快捷键 ⌘-N 打开新窗口. ⌘-T 打开新标签页. ⌘-Shift-N 在隐身模式下打开新窗口. 按 ⌘-O,然后选择文件. 在 Google Chrome 浏览器中打开计算机中的文件. ...
- Developing your first FNC custom control
Friday, May 13, 2016 Some weeks ago, we released the TMS FNC UI Pack, a set of Framework Neutral Com ...
- http://www.swoole.com/
Swoole:重新定义PHP PHP语言的高性能网络通信框架,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,数据库连接池,AsyncTask,消息队列,毫秒定时器, ...
- Android 蓝牙开发(整理大全)
Android蓝牙开发 鉴于国内Android蓝牙开发的例子很少,以及蓝牙开发也比较少用到,所以找的资料不是很全. (一): 由于Android蓝牙的通信都需要用到UUID,如果由手机发起搜索,当搜索 ...
- Shell 脚本小试牛刀(番外) -- 捷报
捷报 捷报 捷报 捷报 捷报 捷报来袭,本系列的脚本已在Github 上开了版块, 我命名为" easy shell "(点此进入). 眼下已加入前面几期中的脚本,日后还会有很多其 ...
- maven copy 依赖jar包
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-depen ...
- web应用之监听器
package com.log.service; import java.util.Enumeration; import javax.servlet.ServletContext; import j ...