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; 隐藏盒子,而且不占位置.(用的最 ...
随机推荐
- 我对C语言输入和输出和一些其他的疑惑点
gets(字符串数组) 用来接收字符串数组 等同于 scanf("%s",字符串数组名) 需要说的一点是 字符串的数组名 就表示数组的第一个元素的地址 所以加不加&取地址 ...
- 升级OpenSSL修复高危漏洞Heartbleed
升级OpenSSL修复高危漏洞Heartbleed 背景: OpenSSL全称为Secure Socket Layer.是Netscape所研发.利用数据加密(Encryption) ...
- 下载与安装---tensorflow on linux
http://wiki.jikexueyuan.com/project/tensorflow-zh/get_started/os_setup.html 你可以使用我们提供的 Pip, Docker, ...
- Java8新特性（一）概览
最近看了好几段Java代码和以往的风格很不一样,都有点不太适应了,后来一查原来是Java8的新特性. 为了保持对技术的敏感性(面试...),这里我们一起来学习下Java8的新特性. 如果从技术角度来看 ...
- 搭建基于Jenkins的CI服务器
安装Jenkins和创建任务这些操作网上一搜一大把,这里就没必要写了,直接就开始编译.单元测试,覆盖,git提交触发构建,构建失败发送给提交人邮件. 因为项目比较复杂,为了懒省事我直接在CI服务器上安 ...
- PHP 7.1.5编译安装
1. 安装基础组件 yum install -y libxml2 libxml2-devel bzip2 bzip2-devel curl-devel libjpeg libjpeg-devel li ...
- 基于LRU Cache的简单缓存
package com.test.testCache; import java.util.Map; import org.json.JSONArray; import org.json.JSONExc ...
- ffmpeg下载rtmp flv
ffmpeg -i rtmp://shanghai.chinatax.gov.cn:1935/fmsApp/16a0148f117.flv -c copy dump.flv
- sticky session 粘性会话
New Elastic Load Balancing Feature: Sticky Sessions | AWS News Blog https://amazonaws-china.com/cn/b ...
- leetcode 748. Shortest Completing Word
Find the minimum length word from a given dictionary words, which has all the letters from the strin ...