处理元素边框与display

元素边框与间隔

元素边框问题

很多情况下，都需要给元素设置边框，使页面看起来层次分明更加美观
但是，往往设置边框又不是每条边都需要；

• 统一设置所有框线为 1px solid black
• 加设右边框为 0px
• 最后一个图形增加id标签 单独设置右边框

.box{
	width: 200px;
	height: 200px;
	border: 1px solid black;
	border-right: 0px;
	display: inline-block;
}
#bt{
	border-right: 1px solid black;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="bt"></div>

块元素独占一行

PS：行元素与块元素

• 行元素

  只占内容大小区域，不可设置宽高，内外边距

• 块元素

  独占一行，可以设置宽高以及内外边距具备盒模型

---

块元素独占一行，但是在实际的页面布局中这种情况是很少的
为了处理这种情况加入了display这条属性(元素显示方式)

• block 块元素（默认设置）
• inline-lock （行内块元素）
• none （不显示），不仅仅是视觉上的消失，在页面布局中也消失

display属性设置可以达到是块元素同行显示的效果，
但在同行显示的同时两个元素之间会有一段明显的间隔

处理display自带的间隔

方法一：

删除标签之间的空格和换行；
代码可读性差

方法二：

将父元素的字体设置为0px，
通过继承性，也会影响自身的字体大小
同时可能导致布局混乱(em之类参考父元素字体的值无法使用)

方法三：

给父级(-6px)和自身(0px) 设置词间距或字母间距
后续问题较小。 但是需要给每一个元素设置。比较繁琐

方法四：

删除掉闭合标签 (不推荐使用)
部分情况下，直接出现两个元素重叠，所以 不推荐使用