布局中巧妙运用"负数"
简介
在我们日常的网页布局中，我们鲜少使用负 margin与 padding ，殊不知，我们可以利用它们解决很多布局的问题，达到极好的视觉体验。
温馨提示
本文参考以下网址：响应式SPRITES图片实现方法探究
负值的应用场景
- 标签的水平垂直居中
- 去除列表的右边距
- 去除列表末尾元素的border-bottom
- 自适应布局
- 等高布局
1、标签的水平垂直居中
网页设计中，元素的水平居中，也是很常见的布局；其中，标签的大小可能不确定，但是对于大小确定的元素，我们可以使用一下方式进行布局，实现标签的水平垂直居中。
实现思路
使用绝对定位，将 container 的定点定位到body的中心，然后使用负margin container 宽高的1/2），将 container 的中心拉回到body 的中心，已到达水平垂直居中的效果。
HTML代码
<div class="container">垂直居中对齐</div>
CSS代码
.container {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -210px;
margin-top: -210px;
border: 1px dashed rgb(28, 19, 163);
background: #eee;
border-radius: 10px;
padding: 10px;
font-size: 30px;
line-height: 400px;
text-align: center;
}
效果图
效果图
2、去除列表的右边距
对于项目中需要列表展示的视图，为了美观，我们需要在元素之间添加间隙 margin。但是，会存在的问题是，对于每一个元素添加右margin时，显然，每行末尾元素 的右边框是多余，需要特别处理。一般来讲，我们只需要找到对应的元素，设置margin-right：0; 即可。采用添加对应的 className或者利用nth-child(An + B)选择到元素，但是如果页面结构发生变化，我们的布局不能适应其变化，会产生错乱的情况。推荐使用负margin解决该布局问题：
实现思路
对于按按排列的单个元素li，我们均设置margin-right：10px;margin-bottom: 10px;，并且给对应的父级元素ul设置margin-right: -10px;即可。
HTML代码
<div id="sudoku">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
CSS代码
* {
padding: 0;
margin: 0;
list-style: none;
}
#sudoku {
width: 320px;
height: 320px;
background: rgb(228, 120, 120);
margin: 100px auto;
}
#sudoku>ul {
margin-right: -10px;
}
#sudoku>ul>li {
width: 100px;
height: 100px;
background: rgb(56, 80, 216);
margin-right: 10px;
margin-bottom: 10px;
float: left;
text-align: center;
line-height: 100px;
font-size: 24px;
}
效果图
效果图
思考
布局完成后，通过F12查看元素的盒模型，发现sudoku为320x320，而ul为330x0，最后一行 margin-bottom: 10px;神奇的不见了？这是为什么呢？期待你的答案……
3、去除列表末尾元素的border-bottom
在项目中，我们往往需要使用菜单栏menu ，并且需要使用 ul + li，避免不了的是需要使用border-bottom 来分割各个 li，最后一个li 的表边框与ul的边框重合，不美观，我们可以使用负margin来解决该问题。
实现思路
- 为ul添加margin-bottom: -1px;即可。
- 注意：我们使用的边框宽度值等于margin-bottom的宽度的绝对值。
HTML代码
<ul id="container">
<li style='font-weight:bold;font-size:20px;'>西江月 宋江</li>
<li>自幼曾攻经史</li>
<li>长成亦有权谋</li>
<li>恰猛虎卧荒丘如</li>
<li>潜伏爪牙忍受</li>
<li>不幸刺文双颊</li>
<li>那堪配在江州</li>
<li>他年若得报冤仇</li>
<li>血染浔阳江口</li>
<li>心在山东身在吴</li>
<li>飘蓬江海谩嗟吁</li>
<li>他时若遂凌云志</li>
<li>敢笑黄巢不丈夫</li>
</ul>
CSS代码
#container {
margin: 20px auto;
width: 270px;
background: #f5f5f5;
border-radius: 5px;
border: 2px solid rgb(51, 13, 224);
}
#container>li {
height: 25px;
line-height: 25px;
padding: 5px;
border-bottom: 1px dashed rgb(197, 44, 44);
margin-bottom: -1px;
text-align: center;
}
效果图
效果图
4、自适应布局
请参考“双飞翼布局”，网址：点击学习双飞翼布局
5、等高布局
在一些列表中，需要嵌套图片和文字描述，但是文字描述的字数不同，导致标签的 高度不统一；如果给元素列表设置相同的高度，显然是不符合应用场景的。所以，我们必须解决高度自适应，且多列等高的问题。
实现思路
问题的关键是给每个项目元素设置大的padding-bottom，然后用数值相似的负margin-bottom消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的添加样式 overflow:hidden;，列就在式最高点被裁切。
HTML代码
**代码暂无**
网友评论