CSS:margin负数的使用
给所有div加上边框=10px之后,再给所有div设置margin-left与margin-top;以及浮动(float:left)
因此时需要鼠标悬停效果:所以设置给div设置伪类:hover,然因浮动脱离了标准流。所以覆盖了div的边框,所以鼠标悬停时div边框显示不全设置定位(position:releative;)之后;
经测验:在html中的层级关系为;标准流<浮动流<定位;所以现在鼠标悬停时div所有的边框都会显示,可以模仿淘宝案例等;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
border:10px solid #ccc;
float: left;
margin-left: -10px;
margin-top:-10px; }
div:hover{
border-color: red;
position: relative;
}
.content{
width: 1620px;
height: 600px;
padding: 20px;
border:none;}
</style>
</head>
<body>
<div class="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
源码
CSS:margin负数的使用的更多相关文章
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- CSS——margin
CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...
- 盒子模型的margin负数用法
盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-l ...
- CSS Margin(外边距)
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- CSS:CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
- CSS margin collapsing All In One
CSS margin collapsing All In One margin collapsing margin 塌陷 / margin 合并 会出现 margin collapsing 的 3 种 ...
随机推荐
- pagespeed 安装(chrome版和firefox版)
原文地址:http://blog.sina.com.cn/s/blog_6c9da636010103va.html pagespeed 让你的网站页面打开速度飞起来! 1.firefox版本下的安装 ...
- res://ieframe.dll/acr_error.htm 纯手动解决方法
res://ieframe.dll/acr_error.htm 引起这个原因的是,你IE浏览器的扩展组件的问题,因为不知道是具体哪个组件出了问题,所以要采用一刀切的方法来处理: 在开始/或开始键+R, ...
- Python 随即生成DAG(有向无环图)
给校队选拔赛出了道DAG上的背包问题,需要生成DAG数据. 最开始使用的方法是先随机生成再判环,如果有环就重新生成.这种方法得到DAG的概率随着点数和边数的增加而急速降低,为了一个DAG要生成很多次, ...
- Java面试题之jsp相关
一.jsp有哪些内置对象?作用分别是什么? 分别有什么方法? 本帖隐藏的内容 答:JSP共有以下9个内置的对象: request 用户端请求,此请求会包含来自GET/POST请求的参数 respons ...
- null类型的字段加1
很高兴今天学到了一种新方法. 数据库中字段类型为Long ,值可能为null,也可能是某一数.因此对该字段数值进行 +1操作时需要判断该值是null还是数值. 同时实现更新操作.具体如下: updat ...
- Windows Server 2008 安装好之后的简单配置
1.禁用密码复杂度 在运行中输入GPEDIT.MSC 打开组策略,找到计算机配置->Windows设置->安全设置->账户策略中的密码策略,将“密码必须符合复杂性要求”设置为禁用即可 ...
- Java 中 静态方法与非静态方法的区别
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...
- js基础——cssText
以前,只知道设置css里的属性都是通过 元素.style.属性名 = 属性值 的方式,此时经常遇到的情况就是类似这样: var head= document.getElementById(&quo ...
- gcc 编译器
gcc -E test.c 预处理 gcc -v test.c 查看编译的整个过程 objdump -d a.out 查看elf文件
- codeforces 659C . Tanya and Toys 二分
题目链接 将给出的已经有了的排序, 在前面加上0, 后面加上1e9+1. 然后对相邻的两项判断. 如果相邻两项之间的数的和小于m, 那么全都选上, m减去相应的值. 如果大于m, 那么二分判断最多能选 ...