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; 隐藏盒子,而且不占位置.(用的最 ...
随机推荐
- session写入数据库
<?php class session { private static $handle = null; private static $ip = null; private static $l ...
- swift学习_xcode6搭建
首先是环境搭建 , 我的是苹果系统 , 我是个穷小子. 8k的电脑离我比較遥远. 自己动手的黑苹果 . 总价1k, 学习够用了即可.期间也学到了非常多东西 . 就是穷人仅仅能发时间去换钱了, 一直在考 ...
- CareerCup之1.6 Rotate Image
[题目] 原文: 1.6 Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, ...
- ETL Automation完整安装方法_(元数据存放在mysql数据库)
安装前介质准备: DBI-1.636.tar.gz DBD-mysql-4.037.tar.gz ETL.tar mysql-5.6.12-linux-glibc2.5-x86_64.tar.gz P ...
- JS中小数如何转化为百分数并能四舍五入
<script type="text/javascript">//n表示百分数保留的位数 function toPercent(n){ n = n || 2; retu ...
- 1069: [SCOI2007]最大土地面积
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 2961 Solved: 1162[Submit][Sta ...
- 【BZOJ2161】布娃娃 扫描线+线段树
[BZOJ2161]布娃娃 Description 小时候的雨荨非常听话,是父母眼中的好孩子.在学校是老师的左右手,同学的好榜样.后来她成为艾利斯顿第二代考神,这和小时候培养的良好素质是分不开的.雨荨 ...
- 用live555做流媒体转发服务器?
当我们看到这里,说明大家都有这样的一个想法:那就是如何用live555实现一个直播代理转发的流媒体服务器? 我们先不着急去讨论用live555实现流媒体转发的技术方法123,先从live555的整个架 ...
- 九度OJ 1106：数字之和 （基础题）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2505 解决:1706 题目描述: 对于给定的正整数 n,计算其十进制形式下所有位置数字之和,并计算其平方的各位数字之和. 输入: 每行输入 ...
- 使用 Visual Studio Code 运行 C# 及 Java 程序
背景 很多情况下,我只是想要编写一个非常简单的 C# 或者 Java 程序,只有几行代码,看看运行结果而已.虽说 Visual Studio / Eclipse / IntelliJ IDEA 功能强 ...