元素边框与间隔
元素边框问题
很多情况下,都需要给元素设置边框,使页面看起来层次分明更加美观
但是,往往设置边框又不是每条边都需要;
- 统一设置所有框线为 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) 设置词间距或字母间距
后续问题较小。 但是需要给每一个元素设置。比较繁琐
方法四:
删除掉闭合标签 (不推荐使用)
部分情况下,直接出现两个元素重叠,所以 不推荐使用