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; 隐藏盒子,而且不占位置.(用的最 ...
随机推荐
- Android添加系统级顶层窗口 和 WindowManager添加view的动画问题
当Dialog有编辑框时如果选择会弹菜单窗口就不要用 Context applicationContext = mainActivity.getApplicationContext(); AlertD ...
- SpringSecurity学习笔记（一）：搭建最简单的SpringSecurity应用
学习过程参考自:http://www.mossle.com/docs/auth/html/pt01-quickstart.html 一.搭建Maven项目: 所需引用的jar包如下: pom.xml文 ...
- Tomcat多实例 - 单机
最近在研究Apache+Tomcat+负载均衡/集群的过程中,发现了一篇好的在单机上部署多个tomcat实例的blog. 感受:关于Apache+Tomcat+负载均衡/集群,国内关于这方面的资料是挺 ...
- EasyPusher实现Android手机屏幕桌面直播,实时推送操作画面,用于手游直播等应用
本文转自EasyDarwin开源团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/52651194 由于Android 5.0提供了捕获 ...
- EasyDarwin手机直播转发快速显示问题之音频处理过程
前言 在我们前面一篇<EasyDarwin手机直播是如何实现的快速显示视频的方法>中,我们描述到了EasyDarwin流媒体服务器端是如何对视频H.264进行缓冲,再以最快的方式将最新的视 ...
- MySql in子句 效率低下优化（亲测有效，从200秒变1秒）
MySql in子句 效率低下优化 背景: 更新一张表中的某些记录值,更新条件来自另一张含有200多万记录的表,效率极其低下,耗时高达几分钟. update clear_res set candele ...
- OI中字符串读入和处理
OI中字符串读入和处理 在NOIP的"大模拟"题中,往往要对字符串进行读入并处理,这些字符串有可能包含空格并以\n作为分割,传统的cin >> scanf() 等等,不 ...
- socket基本使用
UDP发送和接收 MainRecv.cpp #include <iostream> #include <WinSock2.h> #include <sstream> ...
- 在c中break的使用
break语句通常用在循环语句和开关语句中.当break用于开关语句switch中时,可使程序跳出switch而执行switch以后的语句:如果没有break语句,则会从满足条件的地方(即与switc ...
- 狂配Nginx
一 .Nginx虚拟主机配置( 基于不同的域名,跳转到不同的项目) 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部 ...