常见布局技巧（margin负值的运用）

1 margin负值的运用

使得左浮动的盒子相邻边框为边框的宽度而不是2倍

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin负值的巧妙运用</title><style>ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid pink;margin-left: -1px;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>

合并之后：

合并之前：

让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位保留位置，如果有定位，则加z-index）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin负值的巧妙运用</title><style>ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid pink;margin-left: -1px;}ul li:hover {/* 如果盒子没有定位，则鼠标经过添加相对定位即可 */position: relative;border: 1px solid blue;}/* ul li:hover {如果li都有定位，则利用z-index提高层级z-index: 1;border: 1px solid blue;} */</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>

常见布局技巧（margin负值的运用）相关推荐

DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
[CSS]常见布局技巧
前言系列文章目录: [目录]HTML CSS JS 根据视频和PPT整理视频及对应资料: HTML CSS 老师笔记: https://gitee.com/xiaoqiang001/html_cs ...
博学谷 - CSS笔记23 - 常见布局技巧
1.margin负值的运用让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

常见布局技巧（margin负值的运用）

常见布局技巧（margin负值的运用）相关推荐

最新文章

热门文章