澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站jQuery实现切换页面布局使

现代 CSS 进化史

2018/02/12 · CSS · CSS

原文出处: Peter Jang   译文出处:缪斯   

澳门新浦京娱乐场网站 1

CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。

为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个最佳实践是最好的目前尚无定论,而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS,这对于你来说是相当迷惑的。

这篇文章的目的是通过回顾CSS的历史背景,介绍下时至2018年的今天CSS发展过程中的一些设计模式和工具的演变。通过对这些背景的理解,你将会更轻松的理解每个设计思想并且学以致用。接下来让我们开始吧!

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有哪些?

css的选择器有:

1.id 选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.相邻选择器(h1 p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器(* )

8.属性选择器( a[rel = "external"])

9.伪类选择器(a: hover, li: nth - child)

可以继承的属性有: font-size font-family color, UL LI DL DD DT...

不可继承的属性有:border padding margin width height...

优先级就近原则:同权重情况下样式定义最近者为准  !import>style>id>class>tag

CSS3新增伪类举例:

p:first-of-type   选择属于其父元素的首个<p>元素的每个<p>元素。

p:last-of-type   选择属于其父元素的最后<p>元素的每个<p>元素。

p:only-of-type  选择属于其父元素唯一的 <p>元素的每个 <p>元素。

p:only-child    选择属于其父元素的唯一子元素的每个<p>元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个<p>元素。

:enabled  :disabled 控制表单控件的禁用状态。

:checked        单选框或复选框被选中。

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。

h4和h5的区别 相关文章

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻【▄

(页底留言开放,欢迎来吐槽)

●●●

1.HTML5为什么只需要写<!DOCTYPEHTML>?

答案解析:

HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

2、行内元素有哪些?块级元素有哪些?空(void)元素有那些?

答案解析:

行内元素:abspanimginputselectstrong

块级元素:divulollidldtddh1h2h3h4p等

空元素:<br><hr><img><link><meta>

3、页面导入样式时,使用link和@import有什么区别?

答案解析:

1)link属于XHTML标签,而@import是css提供的;

2)页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;

3)@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;

4)link方式的样式的权重高于@import的权重。

4、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?

答案解析:

新特性,新增元素:

1)内容元素:article、footer、header、nav、section

2)表单控件:calendar、date、time、email、url、search

3)控件元素:webworker,websockt,Geolocation

移除元素:

1)显现层元素:basefont,big,center,font,s,strike,tt,u

2)性能较差元素:frame,frameset,noframes

处理兼容问题有两种方式:

1)IE6/IE7/IE8支持通过document方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

2)使用是html5shim框架

另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构,功能元素来加以区分。

5、如何区分HTML和HTML5?

答案解析:

1)在文档类型声明上不同:

HTML是很长的一段代码,很难记住,而HTML5却只有简简单单的声明,方便记忆。

2)在结构语义上不同:

HTML:没有体现结构语义化的标签,通常都是这样来命名的<divid="header"></div>,这样表示网站的头部。

HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>

6、简述一下你对HTML语义化的理解?

答案解析:

1)用正确的标签做正确的事情;

2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;

3)即使在没有样式css情况下也以一种文档格式显示,并且是容易阅读的;

4)搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;

5)使于都源代码的人对网站更容易将网站分块,便于阅读维护理解。

7、HTML5的离线储存怎么使用,工作原理能不能解释一下?

答案解析:

localStorage长期存储数据,浏览器关闭后数据不丢失;

sessionStorage数据在浏览器关闭后自动删除。

8、iframe有那些缺点?

答案解析:

1)在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面;

2)框架结构有时会让人感到迷惑,页面很混乱;

9、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

答案解析:

1)<!Doctype>声明位于文档中的最前面,处于<html>标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

10、常见兼容性问题?

1)png24位的图片在IE6浏览器上出现背景;

解决方案是:做成PNG8;

2)浏览器默认的margin和padding不同。

解决方案是:加一个全局的*{margin:0;padding:0;}来统一。

3)IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。浮动IE产生的双倍距离#box{float:left;width:10px;margin:000100px;}这种情况下IE6会产生200px的距离。

解决方法:加上_display:inline,使浮动忽略

4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute获取自定义属性;Firefox下,只能使用getAttribute获取自定义属性。

解决方法:统一通过getAttribute获取自定义属性。

5)IE下,even对象有x,y属性,但是没有pageX,pageY属性,但是没有x,y属性;

解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

6)Chrome中文界面下默认会将小于12px的文本强制按照12px显示

解决方法:可通过加入CSS属性-webkt-text-size-adjust:none;解决

7)超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不在具有hover和active;

解决方法:改变CSS属性的排列顺序:L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}

11、如何实现浏览器内多个标签页之间的通信?

答案解析:

调用localstorge、cookies等本地存储方式

12、webSocket如何兼容低浏览器?

答案解析:

AdobeFlashSocket、ActiveXHTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

13、支持HTML5新标签

答案解析:

1)IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式;

2)当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[ifltIE9]>

<script>src=";

<![endif]-->

14、如何区分:DOCTYPE声明新增的结构元素功能元素,语义化的理解?

2)html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

3)在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

4)搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利用SEO;

5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

15、介绍一下CSS的盒子模型?

答案解析:

1)有两种,IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和padding;

2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)。

16、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS3新增伪类有哪些?

答案解析:

1)id选择器(#myid)

2)类选择器(.myclassname)

3)标签选择器(div,h1,p)

4)相邻选择器(h1 p)

5)子选择器(ul>li)

6)后代选择器(lia)

7)通配符选择器(*)

8)属性选择器(a[rel="external"])

9)伪类选择器(a:hover,li:nth-child)

17、可继承的样式:font-sizefont-familycolor,ULLIDLDDDT

18、不可继承的样式:borderpaddingmarginwidthheight

19、优先级就近原则,同权重情况下样式定义最近者为准

20、载入样式以最后载入的定位为准;

解析答案:优先级为:!important>id>class>tag;important比内联优先级高

21、CSS3新增伪类举例:

答案解析:

p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素;

p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素;

p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素;

p:only-child选择属于其父元素的唯一子元素的每个<p>元素;

p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素;

:enabled:disabled控制表单控件的禁用状态;

:checked单选框或复选框被选中。

22、如何居中div?如何居中一个浮动元素?

答案解析:

给div设置一个宽度,然后添加margin:0auto属性;div{width:200px;margin:0auto;}

23、居中一个浮动元素

答案解析:

确定容器的宽高宽500高300的层,设置层的外边距

.div{width:500px;height:300px;margin:-150px00-250px;position:relative;background:green;left:50%;头:50%}

24、css3有哪些新特性?

答案解析:

CSS3实现圆角(border-radius:8px;),阴影(box-shadow:10px),对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)

transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的css选择器多背景rgba

25、为什么要初始化CSS样式

答案解析:

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法是:*{padding:0;margin:0}(不建议)

淘宝的样式初始化:

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,

textarea,th,td{margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5tahoma,arial,5b8b4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:couriernew,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}

26、display:inline-block什么时候会显示间隙?

答案解析:

移除空格,使用margin负值、使用font-size:0、letter-spacing、word-spacing

27、使用CSS预处理器吗?喜欢哪个?

答案解析:SASS

干货!免费领取腾讯高级讲师网页设计教程

点我领取

737373

关注网页设计自学平台,99%的努力都在这里

 

 

查看实例:DEMO  演示打包下载

CSS基本样式使用

我们从一个最简单的网页index.html 开始,这个文件中包含一个独立的样式文件index.css:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> <footer>This is the footer.</footer> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <header>This is the header.</header>
  <main>
    <h1>This is the main content.</h1>
    <p>...</p>
  </main>
  <nav>
    <h4>This is the navigation section.</h4>
    <p>...</p>
  </nav>
  <aside>
    <h4>This is an aside section.</h4>
    <p>...</p>
  </aside>
  <footer>This is the footer.</footer>
</body>
</html>

上面的HTML标签中没用使用任何class或者id。
在没有任何CSS样式的情况下,我们的网站看起来是这个样子:

澳门新浦京娱乐场网站 2
点击查看在线demo

功能可用,但看起来不好看,我们可以继续在index.css加点CSS美化下排版:

/* BASIC TYPOGRAPHY */ /* from */ html { font-size: 62.5%; font-family: serif; } body { font-size: 1.8rem; line-height: 1.618; max-width: 38em; margin: auto; color: #4a4a4a; background-color: #f9f9f9; padding: 13px; } @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: Verdana, Geneva, sans-serif; font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } h1 { font-size: 2.35em; } h2 { font-size: 2em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; }

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* BASIC TYPOGRAPHY                       */
/* from https://github.com/oxalorg/sakura */
html {
  font-size: 62.5%;
  font-family: serif;
}
body {
  font-size: 1.8rem;
  line-height: 1.618;
  max-width: 38em;
  margin: auto;
  color: #4a4a4a;
  background-color: #f9f9f9;
  padding: 13px;
}
@media (max-width: 684px) {
  body {
    font-size: 1.53rem;
  }
}
@media (max-width: 382px) {
  body {
    font-size: 1.35rem;
  }
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 {
  font-size: 2.35em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.75em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1.25em;
}
h6 {
  font-size: 1em;
}

这地方大部分都是关于排版(字体、行高等)样式的定义,也包含一些颜色和一个layout居中设置。为了让每个属性有个合理的值你需要学习点设计理论,但是这个地方我们用到的CSS本身并不复杂,你可以直接定义,结果如下所示:

澳门新浦京娱乐场网站 3
Click here to see a live example

有所变化了吧!正如CSS许诺的一样——用一种简单的方式给文档添加上样式,不需要编程或者复杂的业务逻辑。不幸的是,实际情况会复杂的很多,我们不单单使用的是CSS的排版和颜色这种简单的样式定义。

CSS3新特性有哪些?

1. CSS3实现圆角(border-radius),阴影(box-shadow),边框图片border-image

2. 对文字加特效(text-shadow、),强制文本换行(word-wrap),线性渐变(linear-gradient)

3.旋转,缩放,定位,倾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

  1. 增加了更多的CSS选择器、多背景、rgba();

  2. 在CSS3中唯一引入的伪元素是 ::selection ;

  3. 媒体查询(@media),多栏布局(flex) 

首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。

XHTML

CSS的布局使用

在20世纪90年代,CSS还未广泛普及之前,对于页面的布局没有太多的选择。HTML最初是被设计为创建纯文本的一门语言,并不是包含侧边栏、列等布局的动态页面。早期的时候,页面布局通常使用的是HTML表格,在行和列中组织内容,这种方式虽然有效,但是把内容和表现杂糅在一块了,如果你想改变网页的布局就得需要修改大量的HTML代码。

CSS的出现推动了内容(写在HTML中)和表现(写在CSS中)的分离,人们开始把所有的布局代码从HTML中移除放入到CSS中,需要注意的是,和HTML一样CSS的设计也不是用来做网页内容布局的,所以早期的时候试图解决这种分离设计是很困难的。

我们来用个实际例子来看下如何实现布局,在我们定义CSS布局前先重置下padding和margin(会影响布局的计算),不同的区域我们定义不同的颜色(不要太在意好看不好看只要不同区域间足够醒目就可以)

/* RESET LAYOUT AND ADD COLORS */ body { margin: 0; padding: 0; max-width: inherit; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* RESET LAYOUT AND ADD COLORS */
body {
  margin: 0;
  padding: 0;
  max-width: inherit;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

现在页面应该看起来如下:

澳门新浦京娱乐场网站 4
Click here to see a live example

接下来我们用CSS来布局下页面内容,我们将按照时间顺序采用三种不同的方式,先从最经典的浮动布局开始吧。

什么是css sprites为什么要使用?

csss prites把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量。

css sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用css的"background-image","background-position"的组合进行背景定位,这样可以减少。

很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是如果请求太多会给服务器增加很大的压力。

不要再停留在石器时代了,下面让我们开始 CSS 预处理器之旅。

复制代码 代码如下:

基于浮动的布局

CSS浮动属性最初是为了将图片浮动在一列文本的左侧或者右侧(报纸上经常看到)。早在21世纪初,web开发者将这个属性的优势扩展到了任意的元素,这意味着你可以通过div的内容浮动创建出行和列的错觉。同样,浮动也不是基于这样的目的设计的,所以兼容性上会有很多问题。

2006年,A List Apart上发表了一篇热门文章In Search of the Holy Grail,文章概述了实现圣杯布局的详细方法——一个头部、三列内容和一个底部,你一定觉得一个简单的布局被称为圣杯布局很疯狂吧,但是在当时纯CSS的时代这的确很难实现。

下面是一个基于浮动布局的例子,用到了我们文章中提到的一些技术点:

/* FLOAT-BASED LAYOUT */ body { padding-left: 200px; padding-right: 190px; min-width: 240px; } header, footer { margin-left: -200px; margin-right: -190px; } main, nav, aside { position: relative; float: left; } main { padding: 0 20px; width: 100%; } nav { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; } aside { width: 130px; padding: 0 10px; margin-right: -100%; } footer { clear: both; } * html nav { left: 150px; }

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
27
28
29
30
31
32
33
34
35
/* FLOAT-BASED LAYOUT */
body {
  padding-left: 200px;
  padding-right: 190px;
  min-width: 240px;
}
header, footer {
  margin-left: -200px;
  margin-right: -190px;  
}
main, nav, aside {
  position: relative;
  float: left;
}
main {
  padding: 0 20px;
  width: 100%;
}
nav {
  width: 180px;
  padding: 0 10px;
  right: 240px;
  margin-left: -100%;
}
aside {
  width: 130px;
  padding: 0 10px;
  margin-right: -100%;
}
footer {
  clear: both;
}
* html nav {
  left: 150px;
}

仔细看下CSS代码,这里面为了让它工作包含一些必须的hack方式(负边距、clear: both、硬编码的宽度计算等),稍后我们会对这些细节做详细的解释。最终的结果如下:

澳门新浦京娱乐场网站 5
Click here to see a live example

看起来不错了,但是通过三列的颜色可以看出来他们的高度不一样,页面的高度也没有填充满屏幕。这些问题是浮动布局导致的,所有的浮动只是将内容放在某一区块的左边或者右边,但是没法知道其他区块的高度。这个问题一直没有个好的解决方案,直到Flexbox布局的出现。

什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

FOUC(Flash Of Unstyled Content)–文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。

元素就可以了。

我们将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。

<a href="#" id="switch">切换布局</a>
<div id="demo" class="showlist">
<div class="list">
<h3><a href="#">文章标题</a></h3>
<p>文章摘要</p>
</div>
...
</div>

基于Flexbox的布局

flexbox CSS属性实在2009年第一次提出来的,但直到2015年才得到浏览器的广泛支持。Flexbox被设计为定义一个空间在行或者列上如何分布的,这让它比浮动更适合用来做布局,这意味在使用浮动布局十多年后,web开发者终于不再使用带有hack的浮动布局方式了。

下面是一个基于Flexbox布局的例子。注意为了让flexbox生效我们需要在三列的外面额外包装一个div:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <div class="container"> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> </div> <footer>This is the footer.</footer> </body> </html>

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <header>This is the header.</header>
  <div class="container">
    <main>
      <h1>This is the main content.</h1>
      <p>...</p>
    </main>
    <nav>
      <h4>This is the navigation section.</h4>
      <p>...</p>
    </nav>
    <aside>
      <h4>This is an aside section.</h4>
      <p>...</p>
    </aside>
  </div>
  <footer>This is the footer.</footer>
</body>
</html>

下面是flexbox布局的CSS代码:

/* FLEXBOX-BASED LAYOUT */ body { min-height: 100vh; display: flex; flex-direction: column; } .container { display: flex; flex: 1; } main { flex: 1; padding: 0 20px; } nav { flex: 0 0 180px; padding: 0 10px; order: -1; } aside { flex: 0 0 130px; padding: 0 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* FLEXBOX-BASED LAYOUT */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
  order: -1;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

这种方式和浮动布局相比更加紧凑了,虽然flexbox一些属性和值初看起来有些困惑,但是好歹不需要像浮动布局那样负边距的hack方案了,这是个巨大的进步。最终结果如下:

澳门新浦京娱乐场网站 6
Click here for a live example

效果好多了!所有的列高度都相同,并且占据了整个页面的高度。从某种意义上来说这似乎是完美的了,但是这个方式也有些小问题,其中一个就是浏览器的兼容性——主流的现代浏览器都支持flexbox,但是一些旧的浏览器不兼容。幸运的是浏览器厂商也正在尽最大努力终止对旧版本浏览器的支持,为web开发者提供更一致的开发体验。另一个问题是我们需要``

包裹HTML内容标签,如果能避免会更完美。理想状态下,任何CSS布局都不需要改变HTML标签的。最大的缺点是CSS代码本身——flexbox虽然去掉了浮动的Hack,但是代码的可读性上变得更差了。你很难去理解flexbox的CSS,并且不知道页面上是如何去布局所有元素的。在写flexbox布局代码的时,有很多时候靠的是大量的猜测和尝试。

特别需要注意的是,flexbox被设计用来在单行或者单列中分割元素的——它不是设计用来给整个页面做布局的!尽管它能很好的实现(相对于浮动布局好很多)。另一种不同的规范是用来处理多行或者多列布局的,我们称之为CSS 网格。

如何水平垂直居中div? 如何居中一个浮动元素?

水平垂直居中多个方案:

1.设置子元素的margin:0 atuo;再设置子元素的margin-top:calc(50% - 子元素高度/2)。并设置父元素的overflow:hidden(解决margin溢出)。

2.设置子元素的postion:reltative;在设置子元素的top:calc(50%-子元素高度/2)。

3.如果是未知高度的div需要居中,需要在子元素的父元素之间添加一层div.sub。给sub的div设置display:table-cell,vertical-align:middle。再给父元素设置display:table。子元素设置:margin:0 auto。

4.父元素设置postion:relative;子元素设置position:absolute;left:0;right:0;top:0;bottom:0;margin:auto。

5.父元素设置position:relative;子元素设置position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

浮动元素居中:

澳门新浦京娱乐场网站 7

澳门新浦京娱乐场网站 8

澳门新浦京娱乐场网站 9

语法

XHTML结构中,在#demo中放入了多个.list,用于显示文章标题和摘要。通过下面的CSS来控制外观。

基于Grid的布局

CSS网格最早在2011年提出的(比flexbox提案晚不了多久),但是花了好长时间才在浏览器上普及起来。截止2018年初,大多数现代浏览器都已经支持CSS grid(这比一两年前有巨大的进步了)
下面我们看一下基于网格布局的例子,注意在这个例子中我们摆脱了flexbox布局中必须使用``

的限制,我们可以简单的使用原始的HTML,先看下CSS文件:

/* GRID-BASED LAYOUT */ body { display: grid; min-height: 100vh; grid-template-columns: 200px 1fr 150px; grid-template-rows: min-content 1fr min-content; } header { grid-row: 1; grid-column: 1 / 4; } nav { grid-row: 2; grid-column: 1 / 2; padding: 0 10px; } main { grid-row: 2; grid-column: 2 / 3; padding: 0 20px; } aside { grid-row: 2; grid-column: 3 / 4; padding: 0 10px; } footer { grid-row: 3; grid-column: 1 / 4; }

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
27
28
29
30
/* GRID-BASED LAYOUT */
body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: min-content 1fr min-content;
}
header {
  grid-row: 1;
  grid-column: 1 / 4;
}
nav {
  grid-row: 2;
  grid-column: 1 / 2;
  padding: 0 10px;
}
main {
  grid-row: 2;
  grid-column: 2 / 3;
  padding: 0 20px;
}
aside {
  grid-row: 2;
  grid-column: 3 / 4;
  padding: 0 10px;
}
footer {
  grid-row: 3;
  grid-column: 1 / 4;
}

虽然结果看起来和基于flexbox的布局一样,但是CSS在很大程度上得到了改进,它清晰地表达出了期望的布局方式。行和列的大小和形状在body选择器中定义,每一项item直接通过他们所在行和列的位置定义。

grid-column 这个属性你可能觉得不太好理解,它定义了列的起点和终点。这个地方让你觉得困惑的可能是明明有3列,却为什么定义的范围是1到4,通过下面的图片你就能理解了:

澳门新浦京娱乐场网站 10
Click here to see a live example

第一列是从1到2,第二列是从2到3,第三列从3到4,所以头部的grid-column是从1到4占据整个页面,导航的grid-column是从1到2占据第一列等等

一旦你习惯了grid语法,你会觉得它是一种非常理想的CSS布局方式。唯一缺点就是浏览器支持,幸运的是过去一年中浏览器的支持又得到了进一步的提高。作为专为CSS设计的第一款真正的布局工具很难描绘它的重要性,从某种意义上来说,由于现有的工具需要太多的hack和变通方式去实现,因此web设计者过去对于布局的创意上一直很保守,CSS网格的出现有可能会激发出一批从未有过的创意布局设计——想想还是挺激动人心的!

澳门新浦京娱乐场网站 11

行内元素和块状元素的区别?行内快元素的兼容性使用?(IE8以下)

行内元素:会在水平方向排列,不能包含快级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行

兼容性:display:inline-block;display:inline;zoom:1;

在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。

CSS

使用CSS预处理器扩展CSS语法

到目前为止,我们介绍了CSS的基本样式和布局,现在我们再来看下那些帮助CSS提升语言本身体验的工具,先从CSS预处理器开始吧。

CSS预处理器允许你使用不同的语言来定义样式,最终会帮你转换为浏览器可以解释的CSS,这一点在当今浏览器对新特性支持缓慢的情况下很有价值。第一个主流的CSS预处理器是2006年发布的Sass,它提供了一个新的更简洁的语法(缩进代替大括号,没有分号等等),同时增加了一些CSS缺失的高级特性,像变量、工具方法还有计算。下面我们使用Sass变量实现下前面例子中带颜色的区域定义:

$dark-color: #4a4a4a $light-color: #f9f9f9 $side-color: #eee body color: $dark-color header, footer background-color: $dark-color color: $light-color main background: $light-color nav, aside background: $side-color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$dark-color: #4a4a4a
$light-color: #f9f9f9
$side-color: #eee
body
  color: $dark-color
  
header, footer
  background-color: $dark-color
  color: $light-color
  
main
  background: $light-color
nav, aside
  background: $side-color

注意我们用$定义了可复用的变量,省略了大括号和分号,语法看起来更加清晰了。简洁的语法让Sass看起来很棒,但变量这样的特性出现在当时来说意义更大,这为编写整洁可维护的CSS代码开辟了新的可能性。
使用Sass你需要安装Ruby(Ruby),这门语言主要是让Sass编译成正常的CSS,同时你需要安装Sass gem,之后你就可以通过命令行把你的.sass文件转成.css文件了,我们先看一个使用命令行的例子:

sass --watch index.sass index.css

1
sass --watch index.sass index.css

这个命令定期把index.sass中的Sass代码转为CSS写入到index.css文件中(--watch参数设定后会实时监听.sass文件改动并执行编译,非常方便)

这个过程被称为构建步骤。这在2006年的时候是非常大的一个障碍,如果你对Ruby这样的编程语言熟悉的话,这个过程非常简单。但是当时很多前端开发者只用HTML和CSS,他们不需要类似这样的工具。因此,为了使用CSS预编译的功能而让一个人学习整个生态系统是很大的一个要求了。

2009年的时候,Less CSS预编译器发布。它也是Ruby写的,并且提供了类似于Sass的功能,关键不同点是它的语法设计上更接近CSS。这意味着任何CSS代码都是合法的Less代码,同样我们看一个用Less语法的例子:

@dark-color: #4a4a4a; @light-color: #f9f9f9; @side-color: #eee; body { color: @dark-color; } header, footer { background-color: @dark-color; color: @light-color; } main { background: @light-color; } nav, aside { background: @side-color; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;
body {
  color: @dark-color;
}
  
header, footer {
  background-color: @dark-color;
  color: @light-color;
}
  
main {
  background: @light-color;
}
nav, aside {
  background: @side-color;
}

语法上几乎是相同的(变量的定义使用@替代了$),但是Less和CSS一样带有大括号和分号,没有Sass例子的代码看起来漂亮。然而,和CSS相近的特性反而让开发者更容易接受它,在2012年,Less使用了JavaScript(Node.js)重写了替换了Ruby,性能上比Ruby编译更快了,并且很多在工作中使用了Node.js的人更容易上手了。

把这段代码转化为标准的CSS,你需要安装Node.js 和 Less,执行的命令行如下:

lessc index.less index.css

1
lessc index.less index.css

这个命令把index.less文件中的Lessz代码转化为标准的CSS代码写入到index.css文件中,注意lessc命令不能监听文件的变化(和sass不一样),这意味着你需要安装其他自动监听和编译的组件来实现该功能,增加了流程的复杂性。同样,对于程序员来说使用命令行的方式并不难,但是对于其他只想使用CSS预编译器的人来说还是个非常大的障碍。

汲取了Less的经验,Sass开发者在2010年发布了一个新的语法叫SCSS(与Less类似的一个CSS超集),同时发布了LibSass,一个基于C 扩展的Ruby引擎,让编译更快并且适配于多种语言。
另外一个CSS预处理器是2010年发布的Stylus,使用Node.js编写,和Sass或者Less相比更注重于清晰的语法。通常主流的CSS预编译器就这三种(Sass,Less,Stylus),他们在功能方面非常相似,所以你不必担心选择哪一个会是错误的。

然而,有些人认为使用CSS预处理器开始变得越来越没必要,因为浏览器最终会慢慢实现这些功能(像变量和计算)。此外,还有一种称为CSS后处理器的方法,有可能会让CSS预处理器过时(显然这存在些争议),我们在后面会详细介绍下。

清除浮动有哪些方式?比较好的方式是哪一种

1.父级元素定义height

澳门新浦京娱乐场网站 12

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 

优点:简单、代码少、容易掌握 

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 

建议:不推荐使用,只建议高度固定的布局时使用 

2.结尾处加空div标签 clear:both 

澳门新浦京娱乐场网站 13

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 

优点:简单、代码少、浏览器支持好、不容易出现怪问题 

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好 

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 

3.父级div定义 伪类:after 和 zoom

澳门新浦京娱乐场网站 14

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 

优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 

缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。 

建议:推荐使用,建议定义公共类,以减少CSS代码。 

4.父级div定义 overflow:hidden 

澳门新浦京娱乐场网站 15

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 

优点:简单、代码少、浏览器支持好 

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。 

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 

5.父级div定义 overflow:auto 

澳门新浦京娱乐场网站 16

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度 

优点:简单、代码少、浏览器支持好 

缺点:内部宽高超过父级div时,会出现滚动条。 

建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6.父级div也一起浮动 

澳门新浦京娱乐场网站 17

原理:所有代码一起浮动,就变成了一个整体 

优点:没有优点 

缺点:会产生新的浮动问题。 

建议:不推荐使用,只作了解。 

7.父级div定义 display:table 

澳门新浦京娱乐场网站 18

原理:将div属性变成表格 

优点:没有优点 

缺点:会产生新的未知问题。 

建议:不推荐使用,只作了解。 

8.结尾处加 br标签 clear:both 

澳门新浦京娱乐场网站 19

原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both 

建议:不推荐使用,只作了解。

首先 Sass 和 Less 都使用的是标准的 CSS 语法,因此如果你可以很方便的将已有的 CSS 代码转为预处理器代码,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。

复制代码 代码如下:

使用CSS后处理器的转换功能

CSS后处理器使用JavaScript分析并转换你的CSS为合法CSS,从这方面来看和CSS预处理器很相似,你可以认为是解决同一个问题的不同方式。关键的不同点是CSS预处理器使用特殊的语法来标记需要转换的地方,而CSS后处理器可以解析转换标准的CSS,并不需要任何特殊的语法。举一个例子来说明下,我们用最初定义的header标签样式来看一下吧:

h1, h2, h3, h4, h5, h6 { **-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;** hyphens: auto; }

1
2
3
4
5
6
h1, h2, h3, h4, h5, h6 {
  **-ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;**
  hyphens: auto;
}

粗体部分的属性成为厂商前缀,厂商前缀是浏览器厂商对CSS新功能的实验和测试使用的,在正式实现前提供给开发者使用CSS新属性的一种方式。-ms代表IE浏览器,-moz是火狐浏览器,-webkit是基于webkit内核的浏览器。

定义这些不同浏览器厂商的前缀属性是非常烦人的,尽量使用生成工具自动添加厂商前缀。我们可以使用CSS预处理器来完成这个功能,例如,我们可以用SCSS来实现:

@mixin hyphens($value) { -ms-hyphens: $value; -moz-hyphens: $value; -webkit-hyphens: $value; hyphens: $value; } h1, h2, h3, h4, h5, h6 { <a href="; hyphens(auto); }

1
2
3
4
5
6
7
8
9
@mixin hyphens($value) {
  -ms-hyphens: $value;
  -moz-hyphens: $value;
  -webkit-hyphens: $value;
  hyphens: $value;
}
h1, h2, h3, h4, h5, h6 {
  <a href="http://www.jobbole.com/members/include">@include</a> hyphens(auto);
}

这个地方使用了Sass的 mixin 功能,你可以定义一个CSS代码块然后在其他任何地方重用,当这个文件被编译成标准的CSS的时候,所有的@include语句都被替换成与之匹配的@mixin中的CSS。总体来说,这个解决方案也不差,但是你仍然要为每个需要厂商前缀的的CSS属性定义一个mixin,这些mixin的定义将需要不断的维护,比如当浏览器支持了某个CSS属性后你就要在你的定义中移除掉该属性。

比起写mixin的方式,直接正常写CSS然后由工具自动识别添加需要厂商前缀的属性的方式显然更优雅些。CSS后处理器就恰好能完成这样的功能。比如,如果你使用 PostCSS 和 autoprefixer 插件,你就可以直接写正常的CSS并不需要指定浏览器厂商前缀,剩下的工作全交给后置处理器去处理:

h1, h2, h3, h4, h5, h6 { hyphens: auto; }

1
2
3
h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
}

当你使用CSS后处理器运行这段代码的时候hyphens: auto; 将被替换成包含所有浏览器厂商前缀的属性,这意味着你可以正常写CSS不用担心各种浏览器兼容性问题,岂不是很棒!
除了PostCSS的autoprefixer插件还有很多有意思的插件,cssnext 插件可以让你体验下一些实验性质的CSS新功能,CSS modules 可以自动改变class的名字避免名称冲突,stylelint 能检查出你CSS代码中一些定义错误和不符合规范的写法。这些工具在过去一两年里开始流行起来,给开发者提供了从未有过的工程化流程。

然而,进程的发展总是有代价的,安装和使用CSS后处理比CSS预处理器更复杂。你不仅要安装、执行命令行,还需要安装配置各个插件并且定义好各种复杂的规则(比如你的目标浏览器等)。很多开发者不再直接使用命令行运行PostCSS了,而是通过配置一些构建系统,像Grunt 、Gulp 、webpack,他们可以帮助你管理前端开发工作中需要的各种构建工具。

值得注意的是对于CSS后处理器存在些争议,有人认为这个术语有些让人迷惑(一种说法是建议都应该叫CSS预处理器,还有一种说法是应该都简称CSS处理器,等等),有人认为有了CSS后处理器完全可以不需要CSS预处理器,有人则主张两者一起使用。不管怎么说,去了解下CSS后处理器的使用还是非常值得的。

澳门新浦京娱乐场网站 20

box-sizing、transition、translate分别是什么?

1、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。

2、transition:当前元素只要有"属性"发生变化时,可以平滑的进行过渡。通过transition-propety设置过渡属性;transition-duration设置过渡时间;transition-timing-function设置过渡速度;transition-delay设置过渡延时。

3、translate:通过移动改变元素的位置;有x,y,z三个属性

下面是这二者的语法:

#demo{width:680px; margin:20px auto; padding:4px; background:#f7f7f7;
border:1px solid #d3d3d3}
.list{margin:6px}
.list h3{height:26px; line-height:26px; font-size:14px}
.list p{line-height:20px}
.showblock .list{float:left; width:325px; height:100px}

使用CSS设计模式

CSS预处理器和CSS后处理器让CSS开发体验有了巨大的提升,但是单靠这些工具还不足以解决维护大型项目CSS代码的问题。为了解决这个问题,人们编写了一些关于如何写CSS的指导方针,通常被称为CSS规范。

在我们深入分析CSS规范前,首先要搞清楚是什么让CSS随着时间推移变得更加难维护,关键点是CSS是全局性的——你定义的每个样式都会全局应用到页面的每个部分,用一个命名约定来保证class名称的唯一性或者有特殊的规则来决定指定样式应用到指定元素。CSS规范提供了一个有组织性的方式来避免大量代码时出现的这些问题,让我们按照时间顺序来看看主流的一些规范吧

display有哪些值?说明它们的作用。

block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。

none 缺省值。像行内元素类型一样显示。

inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。

inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。

list-item 像块类型元素一样显示,并添加样式列表标记。

table 此元素会作为块级表格来显示。

inherit 规定应该从父元素继承display属性的值。

flex   设置flex后,该元素所有定位,浮动将无效。该元素将采用flex布局。

h1 {

我们要设置最外层的#demo样式,使其具有统一外观,包括背景色和边框样式。注意,我们在最后要设置一个样式.showblock .list,控制#demo里的.list样式,使其向左浮动,并设置高度和宽度,设置.showblock其实就是设置#demo的样式,在接下来的jQuery代码中,你就会明白了。当然您可以根据需求自行设计CSS和XHTML,本文只是为了演示简单的构建了样式和HTML结构。

OOCSS

OOCSS(面向对象的CSS)是在2009年首次提出的,它是围绕两个原则建立的规范。第一个原则是结构和样式分离,这意味着定义结构(布局)的CSS不应该和定义样式(颜色、字体等)的CSS混杂在一起,这样我们就可以很简单的为一个应用定义新的皮肤了;第二个原则是容器和内容分离,把元素看成是一个可重用的对象,关键核心点是一个对象不管用在页面的任何位置都应该看起来是相同的。

OOCSS提供了成熟的指导规范,但是对于具体的执行规范并没有明确指出。后来出现的SMACSS采用了它的核心概念,并且添加了更多的细节,使用起来更简单了。

px、em、rem的区别?

1、px像素。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。

2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事,仍然是相对大小但相对的只是HTML根元素。

4、区别:IE无法调用那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器已支持rem。

color: #0982C1;

jQuery
实现切换布局的原理其实就是,用javascript来控制页面显示的样式,当用户点击切换时,引用不同的CSSy样式。请看下面的jQuery代码。

SMACSS

SMACSS(可扩展模块化架构的CSS)是在2011年出现的一种设计模式,它将CSS分为5个不同的类别——基本规范、布局规范、模块、状态规范和样式规范。SMACSS也有一些推荐的命名规则,对于布局规范使用l-或者layout- 作为前缀;对于状态规范,使用is-hidden 或者is-collapsed 作为前缀。

相比OOCSS,SMACSS有了更多细节上的规范,但是CSS规则该划分为哪一类别的规范中,这是个需要仔细考虑的问题。后来出现的BEM对这一方面进行了改进,让它更易使用了。

合理的页面布局中常听过结构与表现分离,那么结构是什么?表现是什么?

结构是html,表现是css

}

复制代码 代码如下:

BEM

BEM (块, 元素, 修饰符)是在2010年出现的规范,它的思想主要是围绕把用户界面切分成独立的块。块是一个可重用的组件(举个例子像表单搜索,可以这样定义``

),元素是块的一部分不能单独重用(比如表单搜索中的button,),修饰符是定义了块或者元素外观、状态或者行为的实体(比如禁用搜索按钮,定义为``)。

BEM的规范很容易理解,对于新手来说命名规则上也很友好,缺点就是可能会导致class名字非常长,并且没有遵循传统的命名规范。后来出现的Atomic CSS又把这个非传统方式带到了一个新的高度。

display:none;与visibility:hidden的区别是什么?

display:none;使用该属性后,HTML元素(对象)的宽高,高度等各种属性值都将“丢失”;

visibility:hidden;使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍然具有高度,宽度等属性值。

你注意到了,这是一个再普通不过的,不过 Sass 同时也支持老的语法,就是不包含花括号和分号的方式:

$(function(){
$("#switch").toggle(function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").addClass("showblock");
});
},function(){
$("#demo").fadeOut("fast",function(){
$(this).fadeIn("fast").removeClass("showblock");
});
});
});

Atomic CSS

Atomic CSS (也称为 功能性CSS)是2014年出现的一个规范,它的思想是基于可视化的方法创建小而功能单一化的class。这种规范与OOCSS、SMACSS和BEM完全相反——它并不是把页面上的元素看做是可重用的对象,Atomic CSS忽略掉了这些对象,每一个元素使用了可重用的单一功能的class样式集合。因此像就被替换成这样的写法了``

如果你看到这个例子第一反应是被吓的退缩了,没关系你并不是唯一有这想法的人——很多人认为这种方式完全违背了CSS的最佳实践,但是,关于这个有争议的规范在不同场景下的应用也产出了一系列精彩的讨论。这篇文章很清晰的分析了传统的分离思想是CSS依赖于HTML创建(即使使用像BEM这类的规范),而Atomic的方式是HTML依赖于CSS创建,两者都没错,但是仔细想想你会发现CSS和HTML彻底分离的想法是实现不了的。

其他的CSS设计模式,像CSS in JS其实也包含了CSS和HTML相互依赖的思想,这也成为了一个饱受争议的设计规范之一。

请用css定义p标签,要求实现以下效果;字体颜色在IE6下为黑色(#000000);IE7下为红色(#ff0000);而其他浏览器下为绿色(#00ff00)

澳门新浦京娱乐场网站 21

h1

我们使用toggle事件,它用来交替的执行事件,使用fadeOut让切换有个过渡效果,不难看出,就是通过addClass()和removeClass()调用不同的样式来实现不同的布局效果。

CSS in JS

CSS in JS 是2014年推出的一种设计模式,它的核心思想是把CSS直接写到各自组件中,而不是单独的样式文件里。这种方式在React框架中引入的,最早是使用内联样式,后来又进化成了使用JavaScript生成CSS然后插入到页面的style标签中的方式。

CSS in JS再一次违背了CSS中关于分离的最佳实践,主要原因是web随着时间推移发生了很大的变化。最初web大部分都是静态网站——这种情况下HTML内容和CSS表现分离是很有意义的,但现在大部分应用都是动态web构建——这种情况下可重用的组件更加有意义了。

CSS in JS设计的目标是定义边界清晰包含自己HTML/CSS/JS的独立组件,并且不受其他组件的影响。React是最早采用这种思想的框架,后续也影响到了其他框架像Angular、Ember和Vue.js。需要注意的是CSS in JS的模式相对来说比较新的,开发人员正在不断的尝试开发web应用组件时的一些CSS最佳实践。

五花八门的设计模式很容易让你不知所措,最重要的记住一点——没有银弹。

实现圣杯布局。

澳门新浦京娱乐场网站 22

澳门新浦京娱乐场网站 23

澳门新浦京娱乐场网站 24

color: #0982c1

问题:如何实现分页后,切换了布局方式,进入下一页和上一页的布局方式一样呢?

结论

简而言之这就是现代CSS。我们介绍了CSS基本排版样式,浮动布局、flexbox和grid布局,了解了CSS预处理器为CSS提供的新语法,比如变量和mixins,还了解了CSS后处理器的转换功能,像给CSS添加厂商前缀,并且使用CSS的一些设计模式克服了全局CSS的一些问题。在这里我们没有时间去挖掘更多CSS其他功能了,CSS覆盖面太广了——任何一个说它简单的人可能只是对它一知半解吧!

现代CSS的多变和快速发展多少让人感到有些沮丧,但是重要的是要记住web随着时间推移进化的历史背景,并且有一群聪明的人愿意为CSS向更好的方向的进化去创建一些工具和指导规范。作为一名开发者是一件幸运的事情,我希望这篇文章提供的信息能作为一个路线图帮助你更好的畅行在CSS路程中!

澳门新浦京娱乐场网站 25

2 赞 5 收藏 评论

澳门新浦京娱乐场网站 26

介绍一下标准css的盒子模型?低版本IE的盒子模型有什么不同的?

1、有两种:IE盒子模型、W3c盒子模型

2、盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)。

3、区别:IE的content部分把border和padding计算了进去

而 Stylus 支持的语法要更多样性一点,它默认使用 .styl 的文件扩展名,下面是 Stylus 支持的语法:

思路:可以采用cookie记录用户所选的布局方式,然后进入下一页时读取cookie值,分配布局方式等。关于cookie的使用,可以参照本站文章:使用jQuery操作Cookies

为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是:* {padding:0;margin:0;}

h1 {

演示打包下载 XHTML 复制代码 代码如下: a href="#" id="switch"切换布局/a div id="demo" class="showlist" div class="list" h3a href="#"文章标题...

用纯 CSS 创建一个三角形的原理是什么?

澳门新浦京娱乐场网站 27

color: #0982C1;

::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

}

介绍一下 Sass 和 Less 是什么?它们有何区别?

Sass(SyntacticallyAwesomeStylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。

Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数.LESS既可以在客户端上运行 (支持IE6 ,Webkit,Firefox),也可一在服务端运行 (借助Node.js)。

区别:

(1)Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。

(2)变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。

(3)输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。

(4)Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

h1

在书写高效CSS时会有哪些问题需要考虑?

1.样式是:从右向左的解析一个选择器;

2.ID最快,Universal最慢有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal ;

3.不要tag-qualify(永远不要这样做ul#main-navigation{}ID已经是唯一的,不需要Tag来标识,这样做会让选择器变慢。);

4.后代选择器最糟糕(换句话说,下面这个选择器是很低效的:html body ul li a{});

5.想清楚你为什么这样写;

6.CSS3的效率问题(CSS3选择器(比如:nth-child)能够漂亮的定位我们想要的元素,又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。);

7.我们知道#ID速度是最快的,那么我们都用ID,是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

color: #0982C1;

如果设计中使用了非标准的字体,你该如何去实现?

用图片代替

web fonts在线字库,如Google Webfonts,Typekit等等;

@font-face,Webfonts(字体服务例如:Google Webfonts,Typekit等等。)

h1

解释下浏览器是如何判断元素是否匹配某个CSS选择器?

从后往前判断。浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。举个例子,有选择器:

body.ready#wrapper>.lol233

先把所有class中有lol233的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的parent id不为#wrapper则把元素从集合中删去。再向上,从这个元素的父元素开始向上找,没有找到一个tagName为body且class中有ready的元素,就把原来的元素从集合中删去。至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使html没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于CSS Rule数量远远小于元素数量的假设和索引的运用,遍历每一条CSS Rule通过集合筛选,比遍历每一个元素再遍历每一条Rule匹配要快得多。

color #0982C1

解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。

关于盒模型请看文章CSS之布局与定位。

请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处?

说到IE的bug,在IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将border与padding都包含在width之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。

box-sizing:content-box

当我们设置box-sizing:content-box;时,浏览器对盒模型的解释遵从我们之前认识到的W3C标准,当它定义width和height时,它的宽度不包括border和padding。

box-sizing:border-box

当我们设置box-sizing:border-box;时,浏览器对盒模型的解释与IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

你也可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:

你最喜欢的图片替换方法是什么,你如何选择使用。

<h2><span 图片放这里></span>Hello World</h2>

把span背景设成文字内容,这样又可以保证seo,也有图片的效果在上面。一般都是:alt,title,onerror。

h1 {

你用过媒体查询,或针对移动端的布局/CSS吗?

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}。

示例如下:

/* 当浏览器的可视区域小于980px */

@media screen and (max-width: 980px) {

#wrap {width: 90%; margin:0 auto;}

#content {width: 60%;padding: 5%;}

#sidebar {width: 30%;}

#footer {padding: 8% 5%;margin-bottom: 10px;}

}

/* 当浏览器的可视区域小于650px */

@media screen and (max-width: 650px) {

#header {height: auto;}

#searchform {position: absolute;top: 5px;right: 0;}

#content {width: auto; float: none; margin: 20px 0;}

#sidebar {width: 100%; float: none; margin: 0;}

}

color #0982c1

你熟悉SVG样式的书写吗?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

书写示例如下:

澳门新浦京娱乐场网站 28

}

 如何优化网页的打印样式?

澳门新浦京娱乐场网站 29

其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。打印样式示例如下:

但打印样式表也应注意以下事项:

澳门新浦京娱乐场网站 30

打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。

最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。

隐藏掉不必要的内容。(@print div{display:none;})

打印样式表中最好少用浮动属性,因为它们会消失。如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了。

h2

font-size: 1.2em

变量

你可以在 CSS 预处理器中声明变量,并在整个样式单中使用,支持任何类型的变量,例如颜色、数值(不管是否包括单位)、文本。然后你可以任意引用该变量。

Sass 的变量必须是 $ 开始,然后变量名和值使用冒号隔开,跟 CSS 的属性一致:

$mainColor: #0982c1;

$siteWidth: 1024px;

$borderStyle: dotted;

body {

color: $mainColor;

border: 1px $borderStyle $mainColor;

max-width: $siteWidth;

}

而 Less 的变量名使用 @ 符号开始:

@mainColor: #0982c1;

@siteWidth: 1024px;

@borderStyle: dotted;

body {

color: @mainColor;

border: 1px @borderStyle @mainColor;

max-width: @siteWidth;

}

Stylus 对变量名没有任何限定,你可以是 $ 开始,也可以是任意的字符,而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。

mainColor = #0982c1

siteWidth = 1024px

$borderStyle = dotted

body

color mainColor

border 1px $borderStyle mainColor

max-width siteWidth

上面的三种不同的 CSS 预处理器的写法,最终都将产生相同的结果:

body {

color: #0982c1;

border: 1px dotted #0982c1;

max-width: 1024px;

}

你可以想象,加入你的 CSS 中使用了某个颜色的地方多达数十次,那么要修改颜色时你必须找到这数十次的地方并一一修改,而有了 CSS 预处理器,修改一个地方就够了!

嵌套

如果我们需要在CSS中相同的 parent 引用多个元素,这将是非常乏味的,你需要一遍又一遍地写 parent。例如:

section {

margin: 10px;

}

section nav {

height: 25px;

}

section nav a {

color: #0982C1;

}

section nav a:hover {

text-decoration: underline;

}

而如果用 CSS 预处理器,就可以少些很多单词,而且父子节点关系一目了然。我们这里提到的三个 CSS 框架都是允许嵌套语法:

section {

margin: 10px;

nav {

height: 25px;

a {

color: #0982C1;

&:hover {

text-decoration: underline;

}

}

}

}

最终生成的 CSS 结果是:

section {

margin: 10px;

}

section nav {

height: 25px;

}

section nav a {

color: #0982C1;

}

section nav a:hover {

text-decoration: underline;

}

非常之方便!

Mixins (混入)

Mixins 有点像是函数或者是宏,当你某段 CSS 经常需要在多个元素中使用时,你可以为这些共用的 CSS 定义一个 Mixin,然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

Sass 的混入语法:

@mixin error($borderWidth: 2px) {

border: $borderWidth solid #F00;

color: #F00;

}

.generic-error {

padding: 20px;

margin: 4px;

@ include error();

}

.login-error {

left: 12px;

position: absolute;

top: 20px;

@ include error(5px);

}

Less CSS 的混入语法:

.error(@borderWidth: 2px) {

border: @borderWidth solid #F00;

color: #F00;

}

.generic-error {

padding: 20px;

margin: 4px;

.error();

}

澳门新浦京娱乐场网站,.login-error {

left: 12px;

position: absolute;

top: 20px;

.error(5px);

}

Stylus 的混入语法:

error(borderWidth= 2px) {

border: borderWidth solid #F00;

color: #F00;

}

.generic-error {

padding: 20px;

margin: 4px;

error();

}

.login-error {

left: 12px;

position: absolute;

top: 20px;

error(5px);

}

最终它们都将编译成如下的 CSS 样式:

.generic-error {

padding: 20px;

margin: 4px;

border: 2px solid #f00;

color: #f00;

}

.login-error {

left: 12px;

position: absolute;

top: 20px;

border: 5px solid #f00;

color: #f00;

}

继承

当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法。例如我们经常需要:

p,

ul,

ol {

}

在 Sass 和 Stylus 我们可以这样写:

.block {

margin: 10px 5px;

padding: 2px;

}

p {

@extend .block;

border: 1px solid #EEE;

}

ul, ol {

@extend .block;

color: #333;

text-transform: uppercase;

}

在这里首先定义 .block 块,然后让 p 、ul 和 ol 元素继承 .block ,最终生成的 CSS 如下:

.block, p, ul, ol {

margin: 10px 5px;

padding: 2px;

}

p {

border: 1px solid #EEE;

}

ul, ol {

color: #333;

text-transform: uppercase;

}

在这方面 Less 表现的稍微弱一些,更像是混入写法:

.block {

margin: 10px 5px;

padding: 2px;

}

p {

.block;

border: 1px solid #EEE;

}

ul, ol {

.block;

color: #333;

text-transform: uppercase;

}

生成的 CSS 如下:

.block {

margin: 10px 5px;

padding: 2px;

}

p {

margin: 10px 5px;

padding: 2px;

澳门新浦京娱乐场网站jQuery实现切换页面布局使用介绍,平淡无奇面试题之CSS部分。border: 1px solid #EEE;

}

ul,

ol {

margin: 10px 5px;

padding: 2px;

color: #333;

text-transform: uppercase;

}

你所看到的上面的代码中,.block 的样式将会被插入到相应的你想要继承的选择器中,但需要注意的是优先级的问题。

导入 (Import)

很多 CSS 开发者对导入的做法都不太感冒,因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同,它只是在语义上包含了不同的文件,但最终结果是一个单一的 CSS 文件,如果你是通过 @ import "file.css"; 导入 CSS 文件,那效果跟普通的 CSS 导入一样。注意:导入文件中定义的混入、变量等信息也将会被引入到主样式文件中,因此需要避免它们互相冲突。

reset.css:

body {

background: #EEE;

}

main.xxx:

@ import "reset.css";

@ import "file.{type}";

p {

background: #0982C1;

}

最终生成的 CSS:

@ import "reset.css";

body {

background: #EEE;

}

p {

background: #0982C1;

}

颜色函数

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。

Sass:

lighten($color, 10%);

darken($color, 10%);

saturate($color, 10%);

desaturate($color, 10%);

grayscale($color);

complement($color);

invert($color);

mix($color1, $color2, 50%);

上面只是简单列了 Sass 的一些基本颜色处理函数,完整的列表请看 Sass Documentation.

下面是一个具体的例子:

$color: #0982C1;

h1 {

background: $color;

border: 3px solid darken($color, 50%);

}

Less CSS:

lighten(@color, 10%);

darken(@color, 10%);

saturate(@color, 10%);

desaturate(@color, 10%);

spin(@color, 10);

spin(@color, -10);

mix(@color1, @color2);

LESS 完整的颜色函数列表请看 LESS Documentation.

LESS 使用颜色函数的例子:

@color: #0982C1;

h1 {

background: @color;

border: 3px solid darken(@color, 50%);

}

Stylus:

lighten(color, 10%);

darken(color, 10%);

saturate(color, 10%);

desaturate(color, 10%);

完整的颜色函数列表请阅读 Stylus Documentation.

实例:

color = #0982C1

h1

background color

border 3px solid darken(color, 50%)

运算符

你可以直接在 CSS 预处理器中进行样式的计算,例如:

body {

margin: (14px/2);

top: 50px 100px;

right: 100px - 50px;

left: 10 * 10;

}

一些跟具体浏览器相关的处理

这是宣传使用预处理的原因之一,并且是一个很好的理由,这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的,节省了大量的重复工作和痛苦的代码编辑。

Sass

@mixin border-radius($values) {

-webkit-border-radius: $values;

-moz-border-radius: $values;

border-radius: $values;

}

div {

@ include border-radius(10px);

}

Less CSS

.border-radius(@values) {

-webkit-border-radius: @values;

-moz-border-radius: @values;

border-radius: @values;

}

div {

.border-radius(10px);

}

Stylus

border-radius(values) {

-webkit-border-radius: values;

-moz-border-radius: values;

border-radius: values;

}

div {

border-radius(10px);

}

编译结果:

div {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

3D文本

要生成具有 3D 效果的文本可以使用 text-shadows ,唯一的问题就是当要修改颜色的时候就非常的麻烦,而通过 mixin 和颜色函数可以很轻松的实现:

Sass

@mixin text3d($color) {

color: $color;

text-shadow: 1px 1px 0px darken($color, 5%),

2px 2px 0px darken($color, 10%),

3px 3px 0px darken($color, 15%),

4px 4px 0px darken($color, 20%),

4px 4px 2px #000;

}

h1 {

font-size: 32pt;

@ include text3d(#0982c1);

}

Less CSS

.text3d(@color) {

color: @color;

text-shadow: 1px 1px 0px darken(@color, 5%),

2px 2px 0px darken(@color, 10%),

3px 3px 0px darken(@color, 15%),

4px 4px 0px darken(@color, 20%),

4px 4px 2px #000;

}

span {

font-size: 32pt;

.text3d(#0982c1);

}

Stylus

text3d(color)

color: color

text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000

span

font-size: 32pt

text3d(#0982c1)

生成的 CSS

span {

font-size: 32pt;

color: #0982c1;

text-shadow: 1px 1px 0px #097bb7,

2px 2px 0px #0875ae,

3px 3px 0px #086fa4,

4px 4px 0px #07689a,

4px 4px 2px #000;

}

效果图:

列 (Columns)

使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。

Sass

$siteWidth: 1024px;

$gutterWidth: 20px;

$sidebarWidth: 300px;

body {

margin: 0 auto;

width: $siteWidth;

}

.content {

float: left;

width: $siteWidth - ($sidebarWidth $gutterWidth);

}

.sidebar {

float: left;

margin-left: $gutterWidth;

width: $sidebarWidth;

}

Less CSS

@siteWidth: 1024px;

@gutterWidth: 20px;

@sidebarWidth: 300px;

body {

margin: 0 auto;

width: @siteWidth;

}

.content {

float: left;

width: @siteWidth - (@sidebarWidth @gutterWidth);

}

.sidebar {

float: left;

margin-left: @gutterWidth;

width: @sidebarWidth;

}

Stylus

siteWidth = 1024px;

gutterWidth = 20px;

sidebarWidth = 300px;

body {

margin: 0 auto;

width: siteWidth;

}

.content {

float: left;

width: siteWidth - (sidebarWidth gutterWidth);

}

.sidebar {

float: left;

margin-left: gutterWidth;

width: sidebarWidth;

}

实际效果

body {

margin: 0 auto;

width: 1024px;

}

.content {

float: left;

width: 704px;

}

.sidebar {

float: left;

margin-left: 20px;

width: 300px;

}

错误报告

如果你经常 CSS 你会发现很难找到 CSS 中错误的地方,这也是预处理框架的好处,它会报告错误,你可以从这篇文章中学习如何让 CSS 框架错误报告。

注释

以上三种框架都支持形如 的多行注释以及 // 的单行注释。

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站jQuery实现切换页面布局使