一、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、&copy（版权符号）、borer-radius（边框圆角）的更多相关文章

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

  3. CSS之创意hover效果

    一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...

  4. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  5. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  6. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  7. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  8. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  9. css之display:inline-block布局--转

    css之使用display:inline-block来布局   css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...

随机推荐

  1. C#学习日志 day 4 ------ 类相关---this指针以及相关关键字

    c#中的类和java中的类没什么太大区别.但是c#有些特有的关键字以及属性使得c#具有一些特性. 首先就是this关键字,this在c++和java中都有,可以表示当前对象,以及变量所属对象等.例如 ...

  2. 一維條碼 EAN13 的編碼方式

    何謂 EAN-13碼 ? ▲ 國家代號(3位數) 中華民國的國家代號為471. ▲ 廠商代號(6位數) 由本會核發給廠商6位數的廠商代號. ▲ 商品代號(3位數) 由廠商自行編定,按一物一號的原則,不 ...

  3. HDU 3613 Best Reward（扩展KMP）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3613 [题目大意] 一个字符串的价值定义为,当它是一个回文串的时候,价值为每个字符的价值的和,如果 ...

  4. InitParam与ContextParm的异同

    web.xml里面可以定义两种参数:(1)application范围内的参数,存放在servletcontext中,在web.xml中配置如下: xml 代码 <context-param> ...

  5. Mysql 学习记录

    ( xampp 的mysql 与 直接用 dnf 安装的 mysql 有冲突! ) 1. 数据库基本知识: 一张表的行 又称为 记录 一张表的列 又称为 字段 表结构:所有字段,规定了你的每一条记录所 ...

  6. html 表头固定

    <div style="width: 100%; min-width: 300px; padding-right: 10px;"> <table style=&q ...

  7. ThinkPHP第十三天(CONF_PATH、APP_PATH，UEditor用法)

    1.CONF_PATH 项目配置文件目录地址,APP_PATH 项目地址 2.ThinkPHP中更新数据的连接操作位save(),更新一个字段可以用setField(name,value)方法. 3. ...

  8. Android 使用 intent 实现简单登陆页面

    前言 第一个 Android 程序,应该有些纪念的意义吧~ 主页面布局 给 Button 添加响应函数:android:onClick="login" public void lo ...

  9. selenium 学习笔记 ---新手学习记录（1） 问题总结

    说明:每次学习各种语言时,环境搭建访问国外网址最头疼了,现在只要是工具下载好放到自己网盘,可以随时用. 1.首先工具准备,selenium需要用到的 下载地址 访问密码 ff8f 2.我选择的语言时j ...

  10. widget intent重复问题

    今天在做android widget时发现点击任意widget时只会更新最后一个widget 原来是requestCode的问题 Intent intent = new Intent(WidgetPr ...