>

消失的边界线问题,盒子模型

- 编辑:至尊游戏网站 -

消失的边界线问题,盒子模型

幽默的CSS标题(7):消失的边界线难题

2016/10/14 · CSS · 1 评论 · CSS

本文作者: 伯乐在线 - chokcoco 。未经小编许可,制止转发!
款待参加伯乐在线 专辑小编。

一、HTMLCSS是什么

7、消失的边界线难题

拜候下图,日常会在有个别导航栏中来看,须要每行中最终一列的侧面框消失,怎么样在全部浏览器中最简便易行高雅的兑现?

图片 1

设倘若无需宽容 IE8- ,那么使用 CSS3 新扩大的选取器无疑是大器晚成种好措施。

JavaScript

// 使用伪类选取器,选取第 3n 个要素去掉边框 li:nth-child(3n){ border-right:none; }

1
2
3
4
// 使用伪类选择器,选择第 3n 个元素去掉边框
li:nth-child(3n){
  border-right:none;
}

自然,假设个数鲜明也十分少,给急需去掉左边框的要素直接助长多个特定的 class 也就到位。或然,使用 table 即使繁杂一点,可是也能促成。

然则那样都远远不足文雅。

那边有个小技术,正是经过丰裕反向边框并且增添一个负的 margin 来实现。

第黄金年代,假定我们的 ul 结构如下:

XHTML

<div class="ul-container"> <ul> <li>测试</li> <li>消失</li> <li>边界线</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="ul-container">
    <ul>
        <li>测试</li>
        <li>消失</li>
        <li>边界线</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul>
</div>

如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,大家的 ul 和 ul-container 宽度都设为 300px 。

最器重的是,每一个 li 设置一个侧边框并不是侧面框:

CSS

.ul-container, ul{ width:300px; } li{ float:left; width:99px; border-left:1px solid #999; }

1
2
3
4
5
6
7
8
9
10
.ul-container,
ul{
  width:300px;
}
li{
  float:left;
  width:99px;
  border-left:1px solid #999;
}

我们会获取如下那样的结果:

图片 2

接下去,大家将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移三个像素 margin-left:-1px

这样 ul 中首先列的具备边框都归因于左移了风流倜傥像素相同的时间被 overflow:hidden 而泯没了,形成了下叁个 li 的左边框望着像左侧框相似,其实只是个障眼法:

CSS

.ul-container{   overflow:hidden; } ul{   margin-left:-1px; }

1
2
3
4
5
6
.ul-container{
  overflow:hidden;
}
ul{
  margin-left:-1px;
}

功用图犹如大器晚成最早图示所示:

图片 3

Demo戳我

See the Pen borderDisappear by Chokcoco (@Chokcoco) on CodePen.

这种做法能够适应不同 li 个数差别行数的具备情状,因为各样新添长的 li ,都会变卦贰个右臂框与上三个 li 成分分开,只是在视觉上看起来疑似上一个 li 成分的右臂框。

 

抱万分汇总在自己的 Github ,发到博客希望取得越来越多的交换。

到此本文甘休,要是还也可能有何疑点如故建议,能够多多沟通,原创小说,文笔有限,胸无点墨,文中若有不正之处,万望告知。

打赏援救自身写出越来越多好作品,谢谢!

打赏小编

  • 网页就是由一个个 HTML标签 组成
  • CSS样式负责修饰HTML标签

打赏辅助作者写出愈来愈多好随笔,谢谢!

任选风流洒脱种支付办法

图片 4 图片 5

1 赞 5 收藏 1 评论

二、了解HTML标签

有关笔者:chokcoco

图片 6

经不住光阴似箭,逃不过此间少年。 个人主页 · 小编的稿子 · 63 ·    

图片 7

1.HTML标签的结构:
伊始标签<body>
截止标签<body>

三.常用的HTML标签

  • 1.DIV:盒子标签
    1. h1-h6标签:题指标签
    1. p:段落标签
    1. img:图片标签
    1. input:输入框标签
    1. button:开关标签
  • 7.ul:冬季列表
    li:列表描述
    <ul>
    <li> <li>
    <li> <li>
    <ul>

  • 8.dl :定义标签
    dt dd:定义描述
    <dl>
    <dt> <dt>
    <dd> <dd>
    <dl>

四、常用的CSS样式

    1. background-color:背景颜色
  • 2.color:字体颜色

  • 3.width:宽度

  • 4.heigh:高度

  • 5.line-height:行高

  • 6.text-aline:文本对齐方向

  • 7.background-image:背景图片

    1. border-width :边框的宽度
      border-style :边框的体裁
      border-color :边框的水彩
    1. P:hover{color:颜色名}
      效果:当鼠标移到成分上时,能够变动成分的CSS样式

五、CSS常用选取器

<p class=”one”id=”two>helloworld<p>

  • 1.p{}成分选拔器

  • 2.one{}class选择器

  • 3.#two{}id选择器

  • 4.p:hover{}伪类接收器
    input:focus{}

六、盒子模型

图片 8

image.png

1.元素居中:
margin-left:auto
margin-right:auto
仅针对块元素有效

2.盒子总幅度:width(宽度)+padding(填充)+border(边框)

七.margin(边界)和padding(填充)盒子间隔

margin:18px
//margin:上 右 下 左

margin:10px 20px
//margin:上 下 左 右

margin:10px 20px 30px 40px
margin:上 右 下 左
padding同理

本文由软件综合发布,转载请注明来源:消失的边界线问题,盒子模型