HTML5&CSS3第二周总结

实战是提高技能很好的办法，这周收获满满的，简单分类下

一、 基本知识

1、 pt em px 的区别

em: 元素设置的font-size 值。5em 则表示font-size的5倍大小。如果没有设置font-size则以父元素的为准，默认为16px。适用于根据字体大小自动调整文档布局

pt： 表示点。一个点表示1/72逻辑英寸。逻辑英寸的表示是in，取决于显示器或者操作系统或者用户选择的设置，一般情况下有72dpi （Macintosh），75dpi（Unix），96dpi（Windows普通尺寸），100dpi（Unix大尺寸），120dpi（Windows大尺寸）。dpi：每个英寸下像素点的数

px： 像素，国内最常见。

96dpi下度量单位的换算

值	像素	点	英寸	毫米
1像素	1px	0.75pt(3/4)	1/96	0.265
1点	1.333px(4/3)	1pt	1/72	0.353
1英寸	96px	72pt	1in	25.4
1毫米	3.779px	2.835pt	0.039in	1mm

2、 margin padding 

margin : 外边距

padding： 内边距

盒子模型

水平外边距：（margin ,margin-left,margin-right）适用于除单元格和行以外的所有元素，这个可以理解因为单元格是没有外边距的

垂直外边距：（margin ,margin-top,margin-bottom）适用于除行内、单元格和行以外的所有元素；对于块级元素使用垂直外边距时，重叠的空白部分会合并在一起

 内边距：padding 适用于除表格行即（tr，th或者手工设置为表格行特征的元素）所有元素

注意： 不要使用padding改变块级元素的布局格式；只会使块变得更大，而不是向某个方向移动，如果想拉开与周边元素的距离，可以使用margin

3、 font

font-family ： 可以写成多种字体组合形式，一般都会把常用的字体放在那里 如

 font-family:"Times New Roman",Georgia,Serif;

4、 在弹性盒模型中display:flex-box;中对齐方式的表示有两种：box-pack  box-align 两者有什么区别呢

当排列方式

box-orient:horizontal 

时 ， pack ：center 水平居中，start左边，end右边；align： center 垂直居中，start顶部，end 底部；

排列方式为

box-orient:vertical

时，pack： center 垂直居中，start顶部，end底部；align： center 水平居中，start左边，end右边；
so
horizontal 中的 pack center 和 vertical中的 align center 一致

5、 background-image 默认repeat

6、  span 默认display:inline

       width ，height对其是无效的，如果想制定宽度或者高度，可以手工设置display:inline-block;

      下面高级特性中会讲述内联元素的原理。

7、  ul ol dl 默认情况都是垂直方向的，怎么变成水平方向？

      ul li {

display: inline;

}

注意是制定li 的display，而不是ul的，display是不可继承的，li 默认是 block 块元素。去掉前面的符号

ul{

    list-style-type:none;  

}

8、 怎么设置文件编码

简单点讲： 直接 

对于H5

对于H4

" />

详细的解释，见下：

http://www.w3.org/International/questions/qa-html-encoding-declarations，之后会翻译出来，敬请关注

9、  width 默认值 auto，根据浏览器而定，每个浏览器的auto值，都不相同，如果要统一布局，一般大型网站都会制定默认样式表

10、 在flex-box布局 注意事项

• box布局每个元素（包括块元素）默认水平方向排列，不需要float 就可以很好的实现分栏布局，可以使用width 百分比值 ，规划每个块的大小
• flex 是指父容器里空白区域的划分，并不会决定各个块的大小

网页布局时，根据内容而定，不一定全都由css决定，有时候稍微依赖下图片原有的大小，或者内容的长度效果会更好

11、 text-indent

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

数值、百分比、inherit ； 百分比：定义基于父元素宽度的百分比的缩进。  

所以这个属性可以这样使用：text-indent：100% ; overflow: hidden; 这样这一行就会被消失掉。

注意这里是块中文本的位置元素，所以不适合用来布局

12、  white-space ：  设置如何处理元素内的空白 ，空白是指没有任何字符的东西，不是  nowrap 的使用是永不换行，知道强制要求

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

二、 高级特性

（未完待编辑）

1、 选择器选择元素

查找元素的顺序，是从选择器的右边开始扫描html文档 ，只要左边还有条件就要匹配， 所以尽量少写复合的选择器。比如

#id{XXX;}

div #id{

  XXX;

}

上面两种形式最终选择的元素都是相同的，但是第二种在找到id元素时，并不会结束，会继续在id元素中寻找div类型。

2、 选择分组

在浏览器解析css时，会默认为选择分组，分为6组，优先级从高到低依次是：

• !import 选择器 ，可以被用来这个选择器规则是否被覆盖
• 在style中使用的规则 ，提倡页面元素和样式分离，不推荐使用
• id选择器
• 类、属性、伪类选择器
• 类型选择器，或者叫做元素选择器
• 最低的当然就是通配符选择器

如果竞争规则属于同一个选择器分组（假设两个规则都包括ID选择器），那么他们会根据选择器的类型和数量进行比较。如果一个选择器比竞争选择器有更多高优先级选择器，那么这个选择器优先级就更高。例如：

#100  *.c20 *.c10{}的优先级高于 #100 *.c20 div p span em{}的优先级。

如果属于同一个选择器分组，并且两个竞争原则具有相同数量和级别的选择器，那么他们会进一步按照位置进行比较，位置优先级从高到底排列如下

• HTML页面中的style 元素
• style 中 @import的样式表
• link 附加的样式表
• link 中 @import的样式表
• 最终用户附加的样式表（!import 除外）
• 浏览器默认

如果在同一位置级别上附加或导入了多个样式表，由附加的顺序决定。后面的会覆盖掉前面的。

3、Span inline 元素

span 默认display:inline

       width ，height对其是无效的，如果想制定宽度或者高度，可以手工设置display:inline-block;

      行内元素默认是和基线对齐的

注意当span中的元素与所在块级元素的height值相同时，可能会出现span 比块级元素向下偏移，这是因为浏览器的vertical-align默认是对齐基线（可以想象成是英文表格中小写a对齐的那一格的底边）。如果想和div上边一致，可以使用： vertical-align:top;

说起 vertical-align，也是一个很有个性的元素属性，来认识一下它

The vertical-align property can be broken down into three easy-to-understand steps: It only applies to inline or inline-block elements It affects the alignment of the element itself, not its contents (except when applied to table cells) When it’s applied to a table cell, the alignment affects the cell contents, not the cell itself

以上内容摘自： http://www.impressivewebs.com/css-vertical-align/，读者感兴趣的话可以去看看相信会有收获滴。

4、 float高级特性

如何将元素从常规流中移出？如何将他渲染成与父级元素内边距对齐的块元素？此外如何使元素上边对齐到它所在的行？

可以使用float。float：漂浮，曾经和postion联手是HTML浮动布局的一大福音，现在随着box布局的推出，但是使文字围绕图片，简单改变某个元素的布局还是可以使用的。

使用float:left 或者float:right 可以使元素离开正常流，并将它显示在其父元素内边距区域的左边或者右边。浮动元素位于块级元素背景之上，井恩常规流中行内内容之后的第一层。左浮动元素使内容相对于其右边缩进，右浮动元素使内容相对于左边缩进。 注意：浮动不会影响块级元素的位置，而只影响行内内容。

5、 position高级特性