金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 最核心的几个概念,初步认识

原标题:最核心的几个概念,初步认识

浏览次数:134 时间:2019-10-12

初步认识 LESS

2012/09/24 · CSS · CSS

来源:申毅&邵华@IBM DevelopWorks

LESS 背景介绍

LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了(例如 Twitter 提供的 bootstrap 库就使用了 LESS)。那么,LESS 是从何而来呢?它和 SASS 等样式表语言又有何区别呢?

图 1.LESS 的官网介绍
图片 1

根据维基百科上的介绍,其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。当时 SASS 采用了缩进作为分隔符来区分代码块,而不是 CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为方便,Alexis 开发了 LESS 并提供了类似的功能。在一开始,LESS 的解释器也同样是由 Ruby 编写,后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端,也可以运行在服务器端。在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可;而在服务器端,LESS 可以运行在 Node.js 上,也可以运行在 Rhino 这样的 JavaScript 引擎上。

说一点题外话,其实现在的 SASS 已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和 CSS 一样采用了大括弧作为风格符。后一种语法规则又名 SCSS,在 SASS 3 之后的版本都支持这种语法规则。SCSS 和 LESS 已经越来越像了,它俩之间更详细的对比可以参考 此链接。

LESS 高级特性

我们知道 LESS 拥有四大特性:变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍,这里就不复述了。其实,LESS 还拥有一些很有趣的特性有助于我们的开发,例如模式匹配、条件表达式、命名空间和作用域,以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。

模式匹配:

相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧,您用它能够定义一堆属性,然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那么,让我们更进一步,来了解一下 LESS 对混入的更高级支持:模式匹配和条件表达式。

首先,让我们来回顾一下普通的带参数的混入方式:

清单 1. 带参数(及参数缺省值)的混入

CSS

.border-radius (@radius: 3px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .button { .border-radius(6px); } .button2 { .border-radius(); }

1
2
3
4
5
6
7
8
9
10
11
.border-radius (@radius: 3px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
.button {
  .border-radius(6px);
}
.button2 {
  .border-radius();
}

清单 2. 混入生成的 CSS 代码

CSS

.button { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .button2 { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

1
2
3
4
5
6
7
8
9
10
.button {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
.button2 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

从上面这个例子可以看出,在混入我们可以定义参数,同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数 .border-radius(6px),LESS 就会用 6px来替换,如果不指定参数来调用 .border-radius(),LESS 就会用缺省的 3px来替换。现在,我们更近一步,不仅仅通过参数值来更改最终结果,而是通过传入不同的参数个数来匹配不同的混入。

清单 3. 利用不同的参数个数来匹配不同的混入

CSS

.mixin (@a) { color: @a; width: 10px; } .mixin (@a, @b) { color: fade(@a, @b); } .header{ .mixin(red); } .footer{ .mixin(blue, 50%); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mixin (@a) {
  color: @a;
  width: 10px;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}
 
.header{
    .mixin(red);
}
.footer{
    .mixin(blue, 50%);
}

清单 4. 不同参数个数调用后生成的 CSS 代码

CSS

.header { color: #ff0000; width: 10px; } .footer { color: rgba(0, 0, 255, 0.5); }

1
2
3
4
5
6
7
.header {
  color: #ff0000;
  width: 10px;
}
.footer {
  color: rgba(0, 0, 255, 0.5);
}

 

这个例子有些像 Java 语言中的方法调用有些类似,LESS 可以根据调用参数的个数来选择正确的混入来带入。现在,我们了解到通过传入参数的值,以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。这两个例子的模式匹配都是非常容易理解的,让我们换个思路,上面的例子中参数都是由变量构成的,其实在 LESS 中定义参数是可以用常量的!模式匹配时匹配的方式也会发生相应的变化,让我们看个实例。

清单 5. 用常量参数来控制混入的模式匹配

CSS

.mixin (dark, @color) { color: darken(@color, 10%); } .mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@zzz, @color) { display: block; weight: @zzz; } .header{ .mixin(dark, red); } .footer{ .mixin(light, blue); } .body{ .mixin(none, blue); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@zzz, @color) {
  display: block;
  weight: @zzz;
}
 
.header{
    .mixin(dark, red);
}
.footer{
    .mixin(light, blue);
}
.body{
    .mixin(none, blue);
}

清单 6. 常量参数生成的 CSS 代码

CSS

.header { color: #cc0000; display: block; weight: dark; } .footer { color: #3333ff; display: block; weight: light; } .body { display: block; weight: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
  color: #cc0000;
  display: block;
  weight: dark;
}
.footer {
  color: #3333ff;
  display: block;
  weight: light;
}
.body {
  display: block;
  weight: none;
}

 

通过这个例子我们可以看出,当我们定义的是变量参数时,因为 LESS 中对变量并没有类型的概念,所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了,这时候不仅参数的个数要对应的上,而且常量参数的值和调用时的值也要一样才会匹配的上。值得注意的是我们在 body 中的调用,它调用时指定的第一个参数 none 并不能匹配上前两个混入,而第三个混入 .mixin (@zzz, @color)就不同了,由于它的两个参数都是变量,所以它接受任何值,因此它对三个调用都能匹配成功,因此我们在最终的 CSS 代码中看到每次调用的结果中都包含了第三个混入的属性。

最后,我们把清单 1 中的代码做略微改动,增加一个无参的混入和一个常量参数的混入,您猜猜看最终的匹配结果会发生什么变化么?

清单 7. 无参和常量参数的模式匹配

CSS

.border-radius (@radius: 3px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .border-radius (7px) { border-radius: 7px; -moz-border-radius: 7px; } .border-radius () { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .button { .border-radius(6px); } .button2 { .border-radius(7px); } .button3{ .border-radius(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.border-radius (@radius: 3px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
 
.border-radius (7px) {
  border-radius: 7px;
  -moz-border-radius: 7px;
}
.border-radius () {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
 
.button {
  .border-radius(6px);
}
.button2 {
  .border-radius(7px);
}
.button3{
.border-radius();      
}

 

下面的结果可能会出乎您的意料,无参的混入是能够匹配任何调用,而常量参数非常严格,必须保证参数的值 (7px)和调用的值(7px)一致才会匹配。

清单 8. 加入了无参混入后生成的 CSS 代码

CSS

.button { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .button2 { border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-border-radius: 7px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .button3 { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.button {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.button2 {
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.button3 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

 

条件表达式

有了模式匹配之后是方便了很多,我们能根据不同的需求来匹配不同的混入,但更进一步的就是利用条件表达式来更加准确,更加严格的来限制混入的匹配,实现的方式就是利用了 when这个关键词。

清单 9. 利用条件表达式来控制模式匹配

CSS

.mixin (@a) when (@a >= 10) { background-color: black; } .mixin (@a) when (@a < 10) { background-color: white; } .class1 { .mixin(12) } .class2 { .mixin(6) }

1
2
3
4
5
6
7
8
.mixin (@a) when (@a >= 10) {
  background-color: black;
}
.mixin (@a) when (@a < 10) {
  background-color: white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }

清单 10. 条件表达式生成的 CSS 代码

CSS

.class1 { background-color: black; } .class2 { background-color: white; }

1
2
3
4
5
6
.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

 

利用 When 以及 <, >, =, <=, >= 是十分简单和方便的。LESS 并没有停留在这里,而且提供了很多类型检查函数来辅助条件表达式,例如 iscolorisnumberisstringiskeywordisurl等等。

清单 11. 条件表达式中支持的类型检查函数

CSS

.mixin (@a) when (iscolor(@a)) { background-color: black; } .mixin (@a) when (isnumber(@a)) { background-color: white; } .class1 { .mixin(red) } .class2 { .mixin(6) }

1
2
3
4
5
6
7
8
.mixin (@a) when (iscolor(@a)) {
  background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
  background-color: white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }

清单 12. 类型检查匹配后生成的 CSS 代码

CSS

.class1 { background-color: black; } .class2 { background-color: white; }

1
2
3
4
5
6
.class1 {
  background-color: black;
}
.class2 {
  background-color: white;
}

 

另外,LESS 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式,这样可以组织成更为强大的条件表达式。需要特别指出的一点是,OR 在 LESS 中并不是用 or 关键字,而是用 , 来表示 or 的逻辑关系。

清单 13. AND,OR,NOT 条件表达式

CSS

.smaller (@a, @b) when (@a > @b) { background-color: black; } .math (@a) when (@a > 10) and (@a < 20) { background-color: red; } .math (@a) when (@a < 10),(@a > 20) { background-color: blue; } .math (@a) when not (@a = 10) { background-color: yellow; } .math (@a) when (@a = 10) { background-color: green; } .testSmall {.smaller(30, 10) } .testMath1 {.math(15)} .testMath2 {.math(7)} .testMath3 {.math(10)}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.smaller (@a, @b) when (@a > @b) {
    background-color: black;
}
.math (@a) when (@a > 10) and (@a < 20) {
    background-color: red;
}
.math (@a) when (@a < 10),(@a > 20) {
    background-color: blue;
}
.math (@a) when not (@a = 10)  {
    background-color: yellow;
}
.math (@a) when (@a = 10)  {
    background-color: green;
}
 
.testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}

清单 14. AND,OR,NOT 条件表达式生成的 CSS 代码

CSS

.testSmall { background-color: black; } .testMath1 { background-color: red; background-color: yellow; } .testMath2 { background-color: blue; background-color: yellow; } .testMath3 { background-color: green; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.testSmall {
  background-color: black;
}
.testMath1 {
  background-color: red;
  background-color: yellow;
}
.testMath2 {
  background-color: blue;
  background-color: yellow;
}
.testMath3 {
  background-color: green;
}

 

命名空间和作用域

LESS 所带来的变量,混入这些特性其实很大程度上避免了传统 CSS 中的大量代码重复。变量能够避免一个属性多次重复,混入能够避免属性集的重复。而且使用起来更加灵活,维护起来也方便了许多,只要修改一处定义而无需修改多处引用的地方。现在,让我们更进一步,当我定义好了变量和混入之后,怎么能更好的控制和运用它们呢,怎么避免和其他地方定义的变量及混入冲突?一个显而易见的想法就是像其他语言一样引入命名空间和作用域了。首先我们来看一个 LESS 的作用域的例子。

清单 15. 变量的作用域

CSS

@var: red; #page { @var: white; #header { color: @var; } } #footer { color: @var; }

1
2
3
4
5
6
7
8
9
10
@var: red;
#page {
  @var: white;
  #header {
    color: @var;
  }
}
#footer {
  color: @var;
}

 

在这个例子里,可以看到 header 中的 @var会首先在当前作用域寻找,然后再逐层往父作用域中寻找,一直到顶层的全局作用域中为止。所以 header 的 @var在父作用域中找到之后就停止了寻找,最终的值为 white。而 footer 中的 @var在当前作用域没找到定义之后就寻找到了全局作用域,最终的结果就是全局作用域中的定义值 red。

清单 16. 变量作用域例子生成的 CSS 代码

CSS

#page #header { color: #ffffff; // white } #footer { color: #ff0000; // red }

1
2
3
4
5
6
#page #header {
  color: #ffffff;  // white
}
#footer {
  color: #ff0000;  // red
}

 

了解了作用域之后让我们再来看一下命名空间,我们可以用命名空间把变量和混入封装起来,避免和其他地方的定义冲突,引用起来也十分方便,只要在前面加上相应的命名空间就可以了。

清单 17. 命名空间的例子

CSS

@var-color: white; #bundle { @var-color: black; .button () { display: block; border: 1px solid black; background-color: @var-color; } .tab() { color: red } .citation() { color: black} .oops {weight: 10px} } #header { color: @var-color; #bundle > .button; #bundle > .oops;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@var-color: white;
#bundle {
  @var-color: black;
 
  .button () {
    display: block;
    border: 1px solid black;
    background-color: @var-color;
  }
  .tab() { color: red }
  .citation() { color: black}
  .oops {weight: 10px}
}
 
#header {
    color: @var-color;
    #bundle > .button;
    #bundle > .oops;

 

这里可以看出,我们利用嵌套规则在 #bundle中建立了一个命名空间,在里面封装的变量以及属性集合都不会暴露到外部空间中,例如 .tab(), .citation()都没有暴露在最终的 CSS 代码中。而值得注意的一点是 .oops 却被暴露在了最终的 CSS 代码中,这种结果可能并不是我们想要的。其实同样的例子我们可以在混入的例子中也可以发现,即无参的混入 .tab()是和普通的属性集 .oops不同的。无参的混入是不会暴露在最终的 CSS 代码中,而普通的属性集则会现在出来。我们在定义命名空间和混入时要小心处理这样的差别,避免带来潜在的问题。

清单 18. 命名空间例子生成的 CSS 代码

CSS

#bundle .oops { weight: 10px; } #header { color: #ffffff; display: block; border: 1px solid black; background-color: #000000; weight: 10px; }

1
2
3
4
5
6
7
8
9
10
#bundle .oops {
  weight: 10px;
}
#header {
  color: #ffffff;
  display: block;
  border: 1px solid black;
  background-color: #000000;
  weight: 10px;
}

 

JavaScript 赋值 (JavaScript Evaluation)

如果能在 CSS 中使用一些 JavaScript 方法无疑是十分令人兴奋的,而 LESS 真正逐步加入这项功能,目前已经能使用字符串及数字的常用函数了,想要在 LESS 中运用 JavaScript 赋值只需要用反引号(`)来包含所要进行的操作即可。让我们看看实例吧。

清单 19. JavaScript 赋值的例子

CSS

.eval { js: `1 + 1`; js: `(1 + 1 == 2 ? true : false)`; js: `"hello".toUpperCase() + '!'`; title: `process.title`; } .scope { @foo: 42; var: `this.foo.toJS()`; } .escape-interpol { @world: "world"; width: ~`"hello" + " " + @{world}`; } .arrays { @ary: 1, 2, 3; @ary2: 1 2 3; ary: `@{ary}.join(', ')`; ary: `@{ary2}.join(', ')`; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.eval {
    js: `1 + 1`;
    js: `(1 + 1 == 2 ? true : false)`;
    js: `"hello".toUpperCase() + '!'`;
    title: `process.title`;
}
.scope {
    @foo: 42;
    var: `this.foo.toJS()`;
}
.escape-interpol {
    @world: "world";
    width: ~`"hello" + " " + @{world}`;
}
.arrays {
    @ary:  1, 2, 3;
    @ary2: 1  2  3;
    ary: `@{ary}.join(', ')`;
    ary: `@{ary2}.join(', ')`;
}

 

我们可以看到,在 eval 中我们可以用 JavaScript 做数字运算,布尔表达式;对字符串做大小写转化,串联字符串等操作。甚至最后能够获取到 JavaScript 的运行环境(process.title)。同样可以看到 LESS 的作用域和变量也同样在 JavaScript 赋值中使用。而最后的例子中,我们看到 JavaScript 赋值同样运用于数组操作当中。其实 LESS 的 JavaScript 赋值还有支持其他一些方式,不过目前尚未公布出来。

清单 20. JavaScript 赋值生成的 CSS 代码

CSS

.eval { js: 2; js: true; js: "HELLO!"; title: "/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node"; } .scope { var: 42; } .escape-interpol { width: hello world; } .arrays { ary: "1, 2, 3"; ary: "1, 2, 3"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.eval {
  js: 2;
  js: true;
  js: "HELLO!";
  title: "/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node";
}
.scope {
  var: 42;
}
.escape-interpol {
  width: hello world;
}
.arrays {
  ary: "1, 2, 3";
  ary: "1, 2, 3";
}

LESS 开发的实用工具 – LESS.app

在 LESS 开发中,我们可以用 LESS 提供的 JavaScript 脚本来在运行时解析,将 LESS 文件实时翻译成对应的 CSS 语法。如下面这个例子:

清单 21. helloworld.html

CSS

<link rel="stylesheet/less" type="text/css" href="helloworld.less"> <script src="less.js" type="text/javascript"></script> <div>Hello World!</div>

1
2
3
4
<link rel="stylesheet/less" type="text/css" href="helloworld.less">
<script src="less.js" type="text/javascript"></script>
 
<div>Hello World!</div>

 

从上面的示例可以看出,在 helloworld.less 引入之后我们还添加了一个 JavaScript 文件,这个文件就是 LESS 的解释器,可以在 LESS 的官方网站上下载此文件。需要注意的是,要注意 LESS 文件和 LESS 解释器的引入顺序,确保所有的 LESS 文件都在 LESS 解释器之前。

看到这里也许有人会说,实时解析的话方便倒是方便,可以性能上不就有损耗了么?比起普通 CSS 来说多了一道解释的手续。也许还有的人对写好的 LESS 文件不太放心,希望能看到解析之后的 CSS 文件来检查下是否是自己希望的内容。这两个问题其实都是能够解决的,LESS 提供了服务端的方案,使用 npm 安装 LESS 之后就能够将您所有的 LESS 文件批量转化成 CSS 文件,然后您拿到 CSS 文件就可以随心所欲了,检查生成的内容是否有误,也可以直接在 HTML 中引用,再也不用添加 LESS 的 JavaScript 文件来解析它了。关于这部分的详细安装信息,可以直接参考 LESS 官网上的介绍,这里就不复述了。
不过,对于 Mac 用户来说还有一个更方便的工具可以使用,它就是 less.app. 这是一个第三方提供的工具,使用起来十分方便,我们可以在下图所示的界面上添加 LESS 文件所在的目录,此工具就会在右侧列出目录中包含的所有 LESS 文件。最酷的是,从此您就不用再操心惦记着要把 LESS 文件编译成 CSS 文件了,这个工具会在您每次修改完保存 LESS 文件时自己执行编译,自动生成 CSS 文件。这样,您就可以随时查看 LESS 代码的最终效果,检查目标 CSS 是否符合您的需要了,实在是太方便了!

图 2. 导入 LESS 文件夹的界面,左侧可添加存放在多个不同路径的文件夹。
图片 2

图 3. 编译结果界面,在此可手动批量编译所有 LESS 文件。
图片 3

更值为称道的是,LESS.app 还是个免费软件,接受捐赠:)

 

总结

通过上面的简单介绍,希望大家了解到了 LESS 的主要功能,相信 LESS 会让前端攻城师的工作更为轻松,更加灵活。更多的细节可以参考 LESS 官方网站。

赞 3 收藏 评论

图片 4

Normalize.css 做了什么

Normalize.css 注释完整,每一段代码都说明了作用,总结来说,它做了以下几个工作(摘自官网):

  1. Preserves useful defaults, unlike many CSS resets.
  2. Normalizes styles for a wide range of elements.
  3. Corrects bugs and common browser inconsistencies.
  4. Improves usability with subtle modifications.
  5. Explains what code does using detailed comments.

简单翻译一下,大概是:

  1. 统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;
  2. 为大部分元素提供一般化的表现;
  3. 修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;
  4. 通过一些巧妙的细节提升了 CSS 的可用性;
  5. 提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;

真心建议各位抽时间读一读 Normalize.css 的源码,加上注释一共就 460 行,多了解了解各个浏览器历史遗留的一些坑。

元素类型

HTML 的元素可以分为两种:

  • 块级元素(block level element)
  • 内联元素(inline element 有的人也叫它行内元素)

两者的区别在于以下三点:

  1. 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示。
  2. 块级元素可以设置 width、height 属性,而内联元素设置无效。
  3. 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

最常见块级元素应该是 ``<div>吧,内联元素有 ``<img> ``````等等,完整的元素列表可以谷歌一下。

具体来说一下吧,

JavaScript

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

我们为 `<div>` 设置上面的样式,是有效果的,因为其是块级元素,而对 设置上面的样式是没用的。要想让 ` 也可以改变宽高,可以通过设置display: block;` 来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。 若既想让元素在行内显示,又能设置宽高,可以设置:

JavaScript

display: inline-block;

1
display: inline-block;

inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。


HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 5 图片 6

1 赞 6 收藏 1 评论

盒模型

页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:

图片 7

可以显而易见的看出盒模型由 4 部分组成。从内到外分别是:

JavaScript

content -> padding -> border -> margin

1
content -> padding -> border -> margin

按理来说一个元素的宽度(高度以此类推)应该这样计算:

JavaScript

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

1
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素:

JavaScript

.example { width: 200px; padding: 10px; border: 5px solid #000; margin: 20px; }

1
2
3
4
5
6
.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

则他最终的宽度应为:

JavaScript

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

1
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最终宽度为:

JavaScript

宽度 = width(200px) + margin(20px * 2) = 240px;

1
宽度 = width(200px) + margin(20px * 2) = 240px;

我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box; 时,border 和 padding 就被包含在了宽高之内,和 IE 之前的标准是一样的。所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:

JavaScript

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

这里还有两种特殊情况:

  • 无宽度 —— 绝对定位(position: absolute;) 元素
  • 无宽度 —— 浮动(float) 元素

它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。

关于维护

当团队根据项目需要(可能混合部分了 reset 或者 normalize )编写了一份适合团队项目的 reset 之后,随着不断的迭代或者说是复用,很有可能这个版本的 reset.css 会逐渐添加许多其他的全局性的样式,从而又重新陷入上面说的那些问题。

所以我觉得,reset.css 也是需要维护的,关于最佳的 reset.css ,没有一劳永逸的方案,根据项目灵活配置,做出取舍微调,适量裁剪和修改后再使用。

最后,搞技术的同学还是应该要有所追求,不要满足于消费别人的总结,一定要去源头看看。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。


开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

所有题目汇总在我的 Github 。

  • 有趣的CSS题目(1): 左边竖条的实现方法
  • 有趣的CSS题目(2): 从条纹边框的实现谈盒子模型
  • 有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少
  • 有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit
  • 有趣的CSS题目(5): 单行居中,两行居左,超过两行省略
  • 有趣的CSS题目(6): 全兼容的多列均匀布局问题
  • 有趣的CSS题目(7):消失的边界线问题
  • 有趣的CSS题目(8):纯CSS的导航栏Tab切换方案
  • 有趣的CSS题目(9):巧妙实现 CSS 斜线
  • 有趣的CSS题目(10):结构性伪类选择器

打赏支持我写出更多好文章,谢谢!

打赏作者

CSS 最核心的几个概念

2017/07/14 · CSS · CSS

原文出处: geekplux.   

本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:最核心的几个概念,初步认识

关键词:

上一篇:6001这个版本执行JS报错,Linux下安装jdk8步骤详述

下一篇:如何编写轻量级金沙澳门官网网址:,设置选项