为了简化 JavaScript 的开发， 一些 JavsScript库诞生了。 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面， 并且兼容各大浏览器

 

　　例子//<div> </div>   这是里面是可以添加其他标签，文字，图片等等。通俗讲就是把网页用div分成一小块一小块然后在这一小块一小块内容里面修修改改。俗称网页布局。当然了你学会了css可以用div一把梭，整个网页全都用div标签，没毛病的。

 

　　首先来说说现在比较流行的布局，一共有4种：

 

　　百分比布局

 

　　flex布局

 

　　rem布局

 

　　viewport

 

　　先来讲讲这四个布局吧

 

　　百分比布局

 

　　首先来说说百分比布局，在我本人使用的时候，就感觉有个致命的缺点：%是参考父级的

 

　　效果：

 

　　如图，这三个盒子都是设置成了50%的宽高，相互嵌套，每个盒子都参考上一个盒子的大小来。这会导致一个问题：如果你想用百分比设置某一部分的宽高，那么你 需要保证其父级、父级的父级……即祖先元素都要有百分比。 这显然是不明智的。

 

　　不过，在某些情况下，百分比还是挺好用的，比如京东移动端就用到了百分比布局。

 

　　rem布局

 

　　我个人比较喜欢flex布局和rem布局，flex布局应该就不用多说了，在PC端都是很常使用的，今天还是主要说说rem布局。

 

　　rem,第一个r的意思是root,用过rem的朋友都知道rem是相对于根元素html而言的，

 

　　1rem=1 × html.style.fontSize

 

　　是的，你会发现，如果你想改变1rem的大小，你可以修改根元素的字体大小即可。

 

　　rem布局的优点也就体现在这里了，rem的参考只有一个，它不像%那样参考父级，rem直接参考根元素。另外，它的比例能够按需修改，比如 苏宁移动端，它就是用了rem布局来实现的。

 

　　可是，将font-size设置死也不是解决办法呀，这里我们用到了flexible,flexiblejs是淘宝做出的用于解决移动端适配问题的js框架。

 

 

　　原理也很简单

 

　　就是获取你的设备的像素，然后等分成若干份，让1rem=1份就行了。

 

　　CSS概念浏览器前缀CSS验证工具字体样式选择器

 

　　普通选择器复台选择器交集选择器并集选择器后代选择器子元素选择器 伪类选择器

 

　　链接伪类选择器：first-child伪类 块行元素

 

　　块级元素（block-leve1）行内元素（inline-leve1）行内块元素（inline-block） CSS三大特性

 

　　层叠、继承、优先级特殊性（Specificity） 背景

 

　　背景半透明背景渐变 盒子模型

 

　　元素居中外边距合并content宽度和高度盒子阴影 浮动布局

 

　　普通流（normal flow）浮动（float）定位（position）

 

　　元素的定位属性叠放次序（z-index）四种定位总结 元素的显示与隐藏

 

　　display显示visibility可见性overflow溢出溢出的文字隐藏  CSS技巧

 

　　鼠标样式cursor轮廓outline防止拖拽文本域resizevertical-align垂直对齐去除图片底侧空白缝隙 精灵技术

 

　　本质使用制作精灵图滑动]实例 字体图标（iconfont）

 

　　字体引入到HTML第三步：盒子里面添加结构追加新图标 BFC（块级格式化上下文）

 

　　元素的显示模式具有BFC条件的元素元素产生BFC条件BFC元素所具有的特性BFC的主要用途BFC总结优雅降级和渐进增强

 

　　长名称或词组可以使用中横线来为选择器命名。不建议使用“_”下划线来命名CSS选择器。

 

　　外部样式表：

 

　　link 是个单标签

 

　　href:定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径。rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

 

　　浏览器前缀浏览器-webkit-Google Chrome, Safari, Android Browser-moz-Firefox-o-Opera-ms-Internet Explorer, Edge-khtml-Konqueror

 

　　CssStats 在线的 CSS 代码分析

 

　　W3C 统一验证工具：

 

　　chiaz.com站长工具

 

　　Unicode字体

 

　　在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

 

　　在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。可以通过escape（） 来测试属于什么字体。

 

　　字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53

 

　　font-weight:字体粗细

 

　　字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现

 

　　font-weight属性用于定义字体的粗细，其可用属性值：normal（400）、bold（700）、bolder、lighter、100——900（100的整数倍）。

 

　　font : 综合设置字体样式

 

　　使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

 

　　注意：其中不需要设置的属性可以省略（取默认值），但必须保留和属性，否则font属性将不起作用。

 

　　普通选择器

 

　　类选择器（class）：是可以多次重复使用的

 

　　id选择器：不得重复。

 

　　复合选择器

 

　　交集选择器

 

　　交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格 h3.special

 

　　并集选择器

 

　　并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。可以利用并集选择器为它们定义相同的CSS样式。

 

　　后代选择器

 

　　后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
 

 

　　注意：子孙后代都可以这么选择。 或者说它能选择任何包含在内的标签。

 

　　子元素选择器

 

　　子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

 

　　注意：这里的子指的是亲儿子不包含孙子、重孙子之类。

 

　　伪类选择器

 

　　链接伪类选择器

 

　　：link :visited :hover :active

 

　　注意：1. 按照 lvha 的顺序， love hate 2. 伪类名称对大小写不敏感。

 

　　：first-child 伪类

 

　　向元素的第一个子元素添加样式。

 

　　p:first-child

 

　　匹配作为任何元素的第一个子元素的 p 元素 p > i:first-child

 

　　匹配所有元素中的第一个 元素 p:first-child i

 

　　匹配所有作为第一个子元素的 元素中的所有元素