5、overflow、hover
一、overflow
1、属性介绍
说明:
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 ##
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
2、应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px; width: 300px; overflow: scroll">
<img src="test.jpg">
</div>
</body>
</html>
二、hover
1、属性介绍
##
选择鼠标指针浮动在其上的元素，并设置其样式；
hover 选择器可用于所有元素，不只是链接。
2、应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
} .pg-body{
margin-top: 50px;
} .w{
width: 980px;
margin: 0 auto;
} .pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
} .pg-header .menu:hover{
background-color: blue;
}
</style> </head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div> <div class="pg-body">
<div class="w">a</div>
</div>
</body>
</html>
5、overflow、hover的更多相关文章
- 前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构
display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- CSS的display、hover、overflow、©（版权符号）、borer-radius（边框圆角）
一.display: none 隐藏 block显示 visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...
- 2015-09-22CSS：border、background、表格、超链接、overflow、firebug
1.CSS的border属性 ⑴定义和用法 border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- CSS基础知识（display和visibility、overflow、文档流）
9.显示与隐藏 u display属性: (1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局. (2)inline:默认值.将元素[显示]为内联元素 (与HTML元素本身无关 ...
- 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba
一.background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...
- CSS——dispaly、overflow、visibility、opacity
隐藏盒子: 1.overflow:hidden; 隐藏盒子超出的部分. 2.display: none; 隐藏盒子,而且不占位置.(用的最 ...
随机推荐
- 利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model
利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model 使用场景:网站配置项目,为了便于管理,网站有几个Model类来管理配置文件, 比如ConfigWebsiteMo ...
- KVM技术
今天是周六,看到一片KVM相关的文章,感觉写得很不错,翻译了,原文在这里:KVM Technology 在开放服务器虚拟化的应用方面,KVM虚拟化技术近年来广受关注.自从2006年10月份诞生以来,其 ...
- sublime常用的插件
Sublime Text常用插件 1.Package Control 快捷键ctrl+~调出Sublime Text控制台,然后输入以下代码(Sublime Text3)安装Package Contr ...
- 根据ip识别地区
<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></scri ...
- 【重磅干货】看了此文，Oracle SQL优化文章不必再看！
目录 SQL优化的本质 SQL优化Road Map 2.1 制定SQL优化目标 2.2 检查执行计划 2.3 检查统计信息 2.4 检查高效访问结构 2.5 检查影响优化器的参数 2.6 SQL语句编 ...
- sap保存时小写字母自己主动转大写字母的解决方法
在实际应用中.ABAP保存数据到后台数据库表中时.会自己主动把前台输入的小写字母自己主动转换为大写字母来保存.有时候客户可能不须要转换,就须要用到以下的方法: 1.找到相应字段的Data ...
- Android Material Design 中文版
http://www.google.com/design/spec/animation/authentic-motion.html http://www.oschina.net/question/14 ...
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...
- mysql的事务隔离级别及其使用场景
1 什么是事务隔离级别 事务隔离指的是事务之间同步关系. 2 食物隔离级别的分类 第一隔离级别,脏读级别 在脏读级别下,第一个事务修改了某个数据,但是还没有提交,第二个事务可以读取到这个未提及的数据. ...
- 虚拟化（五）：vsphere高可用群集与容错（存储DRS是一种可用于将多个数据存储作为单个数据存储群集进行管理的功能）
vsphere高级功能需要vcenter server和共享存储的支持才能实现.vsphere的高级功能有 vmotion.storage vmotion.vsphere HA.vsphere DRS ...