14-CSS3提高 重点部分 盒模型 浮动
来源：互联网 发布：软件开发网站 编辑：程序博客网 时间：2024/06/06 01:22
CSS 三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
~~~
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
CSS特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
比如的例子：
div ul li ------> 0,0,0,3.nav ul li ------> 0,0,1,2a:hover -----—> 0,0,1,1.nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1< 注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。（行内样式）
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
总结：权重是优先级的算法，层叠是优先级的表现
盒子模型（CSS重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
看透网页布局的本质
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
我们说过，行内元素比如 文字 类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。
看透网页布局的本质： 把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
CSS 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。
盒子模型（Box Model）
这里略过 老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。
CSS3的 盒子模型 我们后面会讲。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子边框（border）
边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。
语法：
border : border-width border-style border-color边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。
table{ border-collapse:collapse; }border-collapse:collapse; 表示边框合并在一起。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> table { width: 700px; height: 300px; border: 1px solid red; border-collapse: collapse; /* 合并相邻边框 */ } td { border: 1px solid red; } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>盒子边框总结表
圆角边框(CSS3)
从此以后，我们的世界不只有矩形。
语法格式：
Border-radius: 水平半径/垂直半径；一般我们垂直半径都是省略的默认和水平半径一样。
border-radius: 左上角 右上角 右下角 左下角;课堂案例:
<style> div { width:200px; height:200px; border:1px solid red; margin:10px 40px; text-align: center; line-height: 200px; } div:first-child { border:10px solid red; border-radius: 20px/50px; } div:nth-child(2) { border-radius: 20px;/*一个数值就是四个角一样子*/ } div:nth-child(3) { border-radius: 15px 0;/*左上和右下是15 右上和左小0*/ } div:nth-child(4) { border-radius:100px; } div:nth-child(5) { border-radius: 50%;/*各取宽度和高度的一半*/ } div:nth-child(6) { border-radius: 10px 40px 80px;/*左上角是10 右上角和左小角是40 右下角是80px 其实就是顺时针方向*/ } div:nth-child(7) { border-radius: 200px 0 0 0; } div:nth-child(8) { border-radius: 100px 100px 0 0; height:100px; /*高度减半*/ } div:nth-child(9) { border-radius: 100px; height:100px; } div:nth-child(10) { border-radius: 100%; height:100px; }</style>内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
panda
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意： 后面跟几个数值表示的意思是不一样的。
外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}注意！
文字水平居中就是text-align：center
盒子水平居中就是 margin 0 auto
插入图片和背景是图片：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> section img{ width: 50px; height: 40px;/*插入图片更改大小 width和height*/ margin-left: 50px;/*插入图片更改位置 可以用margin或padding 盒模型*/ margin-top: 50px;/*插入的图片也是一个盒子*/ } aside{ width: 400px; height: 400px; border: 1px solid purple; background: #fff url(imgc/h.png) 30px 50px no-repeat;/*数值是图片的坐标*/ background-size: 30px 210px;/*背景图片更改位置*/ } </style></head><body> <section><img src="imgc/h.png" alt=""></section> <aside></aside></body></html>注意的是背景图片不占位置，插入图片要占位置 一般情况下背景图片是做一些小图标还有大图片。
插入图片产品展示之类的，就可以用插入图片。
清除元素的默认内外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */}注意： 行内元素是只有左右内外边距的，是没有上下内外边距的。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案： 避免就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距padding及边框border，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。
待续。。。。
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
三个计算题
- .demo{width:200px;height:200px;border:1px solid red; padding:20px;}， 盒子最终占有的空间是多大？
- 一个盒子需要占用的空间是 400像素， 但是盒子又有 padding:25px, border: 1px solid red; 问，我们需要改动盒子宽度为多少？
- 如何让一个200 * 200像素的盒子， 在一个400 * 400的盒子里面水平居中，垂直居中。
盒子模型布局稳定性
开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin 原因：
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
注意：padding 不改变盒子大小的情况：
如果一个盒子没有指定宽度/高度或width/height：100%或者继承宽度/高度那么padding大小的改变不会影响盒子的宽高。
CSS3盒模型（新加的）
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div:first-child{ width: 200px; height: 200px; background-color: pink; box-sizing: content-box;/*不写 就是以前的盒模型 盒子大小是width+padding+border content-box 此值为其默认值，起让元素维持w3c的标准BOx mode*/ padding: 10px; border:15px solid black; } div:last-child{ width: 200px; height: 200px; background-color: purple; padding: 10px; box-sizing: border-box;/*新模式 写了这句话padding就不撑开盒子了*/ border: 1px solid black;/*padding 和border都不会撑开盒子*/ } </style></head><body> <div>content-box</div> <div>border-box</div></body></html>div { width: 100px; height: 100px; background: skyblue; margin: 0 auto; border: 1px solid gray;/*
默认的设置 如果我们添加了 border属性 该容器的大小会发生改变
因为他要优先保证内部的内容所占区域 不变
*/
/*
box-sizing 如果不设置 默认的值 就是
content-box: 优先保证内容的大小 对盒子进行缩放;
border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
*/
box-sizing: border-box;
}
盒子阴影
语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
img { border:10px solid orange; box-shadow:3px 3px 5px 4px rgba(0,0,0,1);}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-size: 100px; /*text-shadow: 水平距离 垂直距离 模糊 阴影颜色*/ text-shadow: 13px 3px 3px rgba(0, 0, 0, 0.3) } div{ width: 200px; height: 200px; border: 10px solid red; /*box-shadow: 水平 垂直 模糊 尺寸 颜色 内/外阴影*/ box-shadow: 5px 5px 3px } </style></head><body> <h1>稳住我们能赢</h1></body></html>浮动(float)
普通流(normal flow)
这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。
前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
html语言当中另外一个相当重要的概念———-标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动(float)
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释）
块级元素和行内元素添加了浮动之后就是行内块元素了！
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
先有父亲然后在父亲里面添加浮动的子元素。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}
浮动详细内幕特性
浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少
浮动根据元素书写的位置来显示相应的浮动。
总结： 浮动 —> 浮漏特
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。但是浮动的元素不会压住文字！
特： 特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。
清除浮动
好比我们的浮动，有浮动开始，则就应该有浮动结束。
为什么要清除浮动
我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。.clear { clear: both; /* 清除浮动的影响 */ } </style> </head> <body> <div class="box1"> <div class="son1"></div> <div class="son2"></div> <!-- 在浮动盒子的后面添加一个空盒子 --> <div class="clear"></div> </div> <div class="box2"></div>/*添加的空的盒子*/ </body></html>优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
.box1 {/*父元素*/ /* height: 200px; 很多情况下，我们父级盒子，不方便给高度 考虑孩子高度会变 */ width: 600px; background-color: pink; overflow: hidden; /* 触发BFC BFC可以清除浮动 这是解决方案 BFC我们后面讲解 */ }使用after伪元素清除浮动
使用方法：
.clearfix:after { content: "."; /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */ display: block; /* 转换为块级元素 */ height: 0; /* 高度为0 */ visibility: hidden; /* 隐藏盒子的内容 */ clear: both; /* 清除浮动 */ } .clearfix { /* ie6.7浏览器的处理方式 为了兼容性 */ *zoom: 1; /* * 代表ie6.7能识别的特殊符号 带有这个*的属性 只有ie6.7才执行 zoom 就是ie6.7 清除浮动的方法 */ }优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
注意： content:”.” 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
使用before和after双伪元素清除浮动 这个为了迁就浮动伪元素用了“：”
使用方法：
.clearfix:before, .clearfix:after { content: ""; display: table; /* 触发bfc 防止外边距合并 */ }.clearfix:after { clear: both; }.clearfix { *zoom: 1; }优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS文件。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; /* 清除内外边距 css 第一讲句话 */ } /* 相同的样式，我们会想到 并集选择器 */ .top, .banner, .main, .footer { width: 960px; text-align: center; /* 文字居中对齐 */ margin: 0 auto; /* 可以让盒子居中对齐 只要保证 左右auto就阔以了 */ margin-bottom: 10px; border: 1px dashed #ccc; } .top { height: 80px; background-color: pink; } .banner { height: 120px; background-color: purple; } .main { height: 500px; background-color: hotpink; } .footer { height: 150px; background-color: black; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main">main</div> <div class="footer">footer</div> </body></html>最普通的，最为常用的结构
两列左窄右宽型
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .top, /* 并集选择器给相同样式集体声明 */ .banner, .main, .footer { width: 960px; margin: 0 auto; border: 1px dashed #ccc; text-align: center; background-color: #eee; margin-bottom: 8px; } .top { height: 80px; } .banner { height: 150px; } .main { height: 500px; } .left { width: 360px; height: 500px; background-color: pink; float: left; } .right { width: 592px; height: 500px; background-color: purple; float: right; } .footer { height: 120px; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body></html>通栏平均分布型
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } ul { list-style: none; /* 取消列表的默认样式小点 */ } .top { height: 60px; background-color: #000; } .banner { width: 960px; height: 400px; background-color: skyblue; margin: 20px auto; border-radius: 15px; } .main { width: 960px; margin: 0 auto; height: 200px; } .main ul li { width: 240px; height: 200px; background-color: pink; float: left; /* 浮动的目的让多个块级li 一行显示 而且米有缝隙呦 */ } .main ul li:nth-child(even) { /* even 偶数 个 odd 奇数 */ background-color: purple; } .footer { height: 100px; background-color: #000; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="footer">footer</div> </body></html>比如锤子 锤子官网
- 14-CSS3提高 重点部分 盒模型 浮动
- 14-CSS3提高 重点部分 盒模型 浮动和定位
- 14-CSS3提高 重点部分 盒模型 浮动和定位
- 14-CSS3提高 重点部分 盒模型 浮动和定位
- 14-CSS3提高 重点部分 盒模型 浮动和定位
- Div盒模型+浮动
- Css3弹性盒模型
- Css3弹性盒模型
- Css3弹性盒模型
- css3盒模型
- css3盒模型
- CSS3弹性盒模型
- css3的盒模型
- CSS3-盒模型
- CSS3盒模型
- CSS3-盒模型设计
- 08、CSS3盒模型
- Css3 弹性盒模型
- SRS 代码分析【RTMP Chunck数据发送】
- 微信公众号的联系电话，点击能够直接拨打
- 前端开发微信小程序需要注意的那些事儿
- LeetCode.151 Reverse Words in a String（单词切分和List转成数组）
- java生成UUID的方法总结
- 14-CSS3提高 重点部分 盒模型 浮动
- css 块级元素和行内元素！
- linux上部署安装MySQL5.6.23
- WebView视屏全屏切换，完美实现
- map
- Android init.rc语法介绍
- Android Studio中的build.gradle文件解析
- 计算一个list中数据的平均数、中位数和众数【python实现】
- 标识符和关键字
