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 ...
随机推荐
- FZU Problem 1686 神龙的难题 重复覆盖
题目链接 给出大矩形的长宽, 矩形里面有1,0两个值, 给出小矩形的长宽, 求用最少的小矩形覆盖所有的1. 重复覆盖的模板题. #include <iostream> #include & ...
- codeforces 540D 概率dp
传送门 大概可以这样理解, 一开始有r个石头, p个布, s个剪刀, 每一天有其中的两个相遇, 如果两个是相同的种类, 什么都不会发生, 否则的话有一个会挂掉, 问最后每一种生存的概率. dp[i][ ...
- (Problem 19)Counting Sundays
You are given the following information, but you may prefer to do some research for yourself. 1 Jan ...
- 解决android TextView多行文本（超过3行）使用ellipsize属性无效问题
布局文件中的TextView属性 <TextView android:id="@+id/businesscardsingle_content_abstract" androi ...
- MyBatis使用DEMO及cache的使用心得
下面是一个简单的MyBatis使用DEMO. 整体结构 整体代码大致如下: POM依赖 需要引用两个jar包,一个是mybatis,另一个是mysql-connector-java,如果是maven工 ...
- apache 支持 php
找到 httpd 的配置文件:一般在 /etc/httpd/conf 编辑:vi httpd.conf 配置 httpd.conf 让apache支持PHP: # vi /usr/local/apac ...
- sqlplus conn远程连接
oracle.install.responseFileVersion=/oracle/install/rspfmt_dbinstall_response_schema_v11_2_0oracle.in ...
- (92) Web Crawling: How can I build a web crawler from scratch? - Quora
(92) Web Crawling: How can I build a web crawler from scratch? - Quora How can I build a web crawler ...
- HDU3853-LOOPS(概率DP求期望)
LOOPS Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 125536/65536 K (Java/Others) Total Su ...
- Easyui登陆页面制作
一.登陆页面HTML <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Web ...