【布局技巧】margin负值的运用

使用场景:
像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子，但是当我们给所有的盒子边框，且浮动的时候。两个边框就会重叠，颜色就会很深，这里就给整个盒子margin-left:-1px

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin技巧</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box ul li {float: left;width: 200px;height: 300px;border: 1px solid #ccc;/* 让盒子向左移动1个单位正好压住前面的盒子 */margin-left: -1px;}ul li:hover {/* 2.这里改成相对定位，相对定位会占有位置,他可以压住其他的盒子和标准流，这样写也有一个弊端，在这个盒子里可能其他的盒子都是相对定位，这个时候就不会显示在其他盒子上面了  *//*方法二: 给所有的父盒子都是相对定位，然后用z-index来调整盒子*/position: relative;border: 1px solid blue;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

方法二：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin技巧</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box ul li {position: relative;}.box ul li {float: left;width: 200px;height: 300px;border: 1px solid #ccc;/* 让盒子向左移动1个单位正好压住前面的盒子 */margin-left: -1px;}ul li:hover {/* 1.这里改成相对定位，相对定位会占有位置,他可以压住其他的盒子和标准流   *//* position: relative; */z-index: 1;border: 1px solid blue;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

【布局技巧】margin负值的运用相关推荐

web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
CSS权重，属性书写顺序，布局技巧和网页布局总结，盒子模型排列位置---CSS
文章目录一.CSS权重二.CSS属性书写顺序一.布局总结二.常见布局技巧一.CSS权重注意:类选择器.属性选择器.伪类选择器,权重为 10. 参考看 CSS三大特性,在CSS的特性优先级中 ...
常见布局技巧（margin负值的运用）
1 margin负值的运用使得左浮动的盒子相邻边框为边框的宽度而不是2倍 <!DOCTYPE html><html lang="en"><head& ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
布局技巧（等高、圣杯）
1.等高布局等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧. 1.1.实现要点(需求) 多列每一列背景不同其中任意一列变高,其它列同步变高 1.2.方法一 1.2.1.原理利用pa ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...

【布局技巧】margin负值的运用

【布局技巧】margin负值的运用相关推荐

最新文章

热门文章