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

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

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

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
迎接插手伯乐在线 专辑小编。

开本体系,谈谈一些好玩的 CSS 标题,标题类型天马行空,想到什么说如何,不仅为了拓宽一下消除难点的思路,更提到一些便于忽略的
CSS 细节。

开本种类,谈谈一些有意思的 CSS 标题,题目类型天马行空,想到怎样说怎么,不仅为了推广一下缓解难点的笔触,更波及部分不难忽视的
CSS 细节。

一、HTMLCSS是什么

七 、消失的边界线难题

探望下图,寻常会在有些导航栏中见到,须要每行中最后一列的左侧框消失,怎么着在享有浏览器中最便捷优雅的落成?

美高梅开户网址 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 设置2个左方框而不是左侧框:

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 ,都会转移3个左手框与上3个 li 成分分开,只是在视觉上看起来像是上1个 li 成分的出手框。

 

持有标题汇总在自家的 Github ,发到博客希望得到更加多的沟通。

到此本文截止,要是还有啥样疑点照旧提出,能够多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏资助本人写出越多好作品,感激!

打赏小编

解题不考虑包容性,题目天马行空,想到怎么着说怎样,假诺解题中有您感到到生僻的
CSS 属性,赶紧去补习一下啊。

美高梅开户网址 ,解题不考虑包容性,题目天马行空,想到什么说怎么,假使解题中有您觉拿到生僻的
CSS 属性,赶紧去补习一下吧。

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

打赏协理作者写出越来越多好文章,多谢!

任选一种支付办法

美高梅开户网址 4
美高梅开户网址 5

1 赞 5 收藏 1
评论

不断更新,不断更新,不断更新,首要的作业说五次。

不断更新,不断更新,不断更新,主要的事情说三回。

二、了解HTML标签

有关小编:chokcoco

美高梅开户网址 6

经不住命宫似水,逃但是此间少年。

个人主页 ·
作者的篇章 ·
63 ·
   

美高梅开户网址 7

议论一些有趣的CSS题目(一)–
右侧竖条的落实格局

探究一些妙不可言的CSS标题(一)–
右侧竖条的落到实处情势

1.HTML标签的社团:
发端标签<body>
终结标签<body>

探讨一些好玩的CSS标题(二)–
从条纹边框的落成谈盒子模型

座谈一些有意思的CSS标题(二)–
从条纹边框的兑现谈盒子模型

三.常用的HTML标签

议论一些诙谐的CSS标题(三)–
层叠顺序与堆栈上下文知多少

研究一些妙趣横生的CSS标题(三)–
层叠顺序与堆栈上下文知多少

  • 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标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

座谈一些诙谐的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

四、常用的CSS样式

议论一些好玩的CSS标题(五)–
单行居中,两行居左,当先两行省略

座谈一些妙不可言的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标题(六)–
全包容的多列均匀布局难点

座谈一些幽默的CSS标题(六)–
全包容的多列均匀布局难点

五、CSS常用选用器

装有题目汇总在自作者的 Github 。

不无难点汇总在笔者的 Github 。

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

 

 

  • 1.p{}成分选拔器

  • 2.one{}class选择器

  • 3.#two{}id选择器

  • 4.p:hover{}伪类选拔器
    input:focus{}

柒 、消失的边界线难点

探访下图,寻常会在局地导航栏中看出,须要每行中最后一列的左侧框消失,怎么着在具有浏览器中最简便易行优雅的贯彻?

美高梅开户网址 8

假诺是不要求包容 IE8- ,那么使用
CSS3 新增的选取器无疑是一种好法子。

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

当然,如果个数明确也不多,给急需去掉右侧框的因素直接抬高贰个一定的
class 也就成功。或然,使用 table 即使烦琐一点,然则也能兑现。

可是这样都不够优雅。

style=”font-family: verdana, geneva; font-size: 14px;”>那里有个小技巧,就是经过充分反向边框并且扩大1个负的 margin 来实现。

率先,假定大家的 ul 结构如下:

<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 设置一个左手框而不是左边框:

.ul-container, 
ul{
  width:300px;
}

li{
  float:left;
  width:99px;
  border-left:1px solid #999;
}

大家会取得如下那样的结果:

美高梅开户网址 9

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

这样 ul 中率先列的持有边框都归因于左移了一像素并且被 overflow:hidden 而消逝了,造成了下四个 li 的右手框看着像左边框一样,其实只是个障眼法:

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

效益图就像是一起始图示所示:

美高梅开户网址 10

Demo戳我

那种做法可以适应不同 li 个数分歧行数的装有意况,因为每种新加上的 li ,都会变动1个左边框与上3个 li 成分分开,只是在视觉上看起来像是上二个 li 元素的右边框。

 

有着难题汇总在自小编的 Github ,发到博客希望得到更加多的互换。

到此本文截止,尽管还有什么样难题还是提议,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

柒 、消失的边界线难点

探望下图,日常会在某些导航栏中见到,须求每行中最终一列的入手框消失,怎样在有着浏览器中最简便优雅的达成?

美高梅开户网址 11

假借使不必要包容 IE8- ,那么使用
CSS3 新增的选拔器无疑是一种好方式。

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

理所当然,若是个数鲜明也不多,给必要去掉左边框的要素直接抬高贰个一定的
class 也就完了。可能,使用 table 即使烦琐一点,但是也能促成。

不过尔尔都不够优雅。

style=”font-family: verdana, geneva; font-size: 14px;”>那里有个小技巧,就是经过丰盛反向边框并且扩张3个负的 margin 来实现。

先是,假定大家的 ul 结构如下:

<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 设置七个左边框而不是左边框:

.ul-container, 
ul{
  width:300px;
}

li{
  float:left;
  width:99px;
  border-left:1px solid #999;
}

咱们会赢得如下那样的结果:

美高梅开户网址 12

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

这样 ul 中首先列的具有边框都归因于左移了一像素同时被 overflow:hidden 而泯没了,造成了下3个 li 的右手框看着像左边框一样,其实只是个障眼法:

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

功效图就好像一开首图示所示:

美高梅开户网址 13

Demo戳我

那种做法得以适应不同 li 个数不一致行数的具备情形,因为每一个新加上的 li ,都会转移一个左侧框与上三个 li 元素分开,只是在视觉上看起来像是上一个 li 成分的左侧框。

 

抱非常汇总在作者的 Github ,发到博客希望收获更多的交换。

到此本文停止,借使还有啥难点还是指出,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

陆 、盒子模型

美高梅开户网址 14

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同理

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图