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 ...
随机推荐
- 获取新浪天气api显示天气情况(转)
直接上一个html的demo <!doctype html> <html class="no-js fixed-layout"> <head> ...
- 【LeetCode题意分析&解答】40. Combination Sum II
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- 一个用C++写的Json解析与处理库
什么是Json?这个库能做什么? JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is e ...
- 全面理解js面向对象
前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...
- webform 不实用office控件导出excel StringBuilder 类型拼接字符串表格导出excel
StringBuilder sb = new StringBuilder(); sb.AppendLine("<meta http-equiv=\"Content-Type\ ...
- objective-C学习笔记(六)继承与多态
封装 encapsulation 隐藏对象内部实现细节,对外仅提供公共接口访问. (说白了就是属性啊,方法啊全都写在类内,对外只提供访问,不需要了解细节) 继承 inheritance 一个类 ...
- HDU OJ 5437 Alisha’s Party 2015online A
题目:click here 题意: 邀请k个朋友,每个朋友带有礼物价值不一,m次开门,每次开门让一定人数p(如果门外人数少于p,全都进去)进来,当最后所有人都到了还会再开一次门,让还没进来的人进来,每 ...
- Session会话跟踪
用encodeURL重写URL public class SessionA extends HttpServlet { @Override protected void doGet(HttpServl ...
- 属性"XmlFileName"的代码生成失败
属性"XmlFileName"的代码生成失败.错误是:"未将对象引用设置到对象实例" 解决: 控件修改造成,关闭打开页面,重新生成
- hdu 4349 Xiao Ming's Hope lucas
题目链接 给一个n, 求C(n, 0), C(n, 1), ..........C(n, n)里面有多少个是奇数. 我们考虑lucas定理, C(n, m) %2= C(n%2, m%2)*C(n/2 ...