20170212 pm html

1、box-sizing属性。

content-box：对象的宽度=content width+border+padding+margin。标准模式下的盒模型。

border-box：对象的宽度=content  width。padding和border包含在width里了。怪异模式下的盒模型。

inherit：继承父元素的box-sizing属性。

2、em   rem区别。

em：相对于父元素的文本大小。未指明则默认为16px。缺点:每个父元素的font-size不同。计算麻烦。

rem：相对于根元素html元素的文本大小。优点：通篇计算量小，都是根据根元素设计，不混乱，方便。

区别：一个是相对于根元素，一个相对于父元素。

共同点：二者均可实现响应式布局，即当屏幕分辨率改变时文本可以随之改变。

3、css样式表有哪几种。

1、内联：<div style="color:red ; size:5px">

2、内嵌：<div  class = "tfs">   </div>

                  <style>

                   .tfs{

                        color：red;

                         size:5px;

                        }

                  </style>

3、外部：<div  style="tfs.css">

4、清除浮动----->防止高度塌陷。  点击打开链接

为什么：元素有浮动属性存在--->影响inline-box----->影响inline-box高度------->没有高度------->塌陷。

什么时候出现：当标签元素只有样式没有高度时。（position为fixed  或 absolute时也会是元素脱离正常流，且行内元素的display被设为block。与float区别就是position在脱离正常流后在文档中不占据空间。而float仍需要占据空间，

如图）

浮动引起的问题：1、父元素的高度无法被撑开，影响与父元素同级的元素。

2、与浮动元素同级的元素会紧随其后。

浮动的优点：可以使块级元素横向排列。

怎么做：三种方法。

1、<div  style="clear:both"></div>父元素的最后一个标签。缺点：空标签，且只能用一次，浪费。标签之间若有空格，页面还会有一小段空白。

2、overflow+zoom。.fix{overflow:hidden; zoom:1}(非ie常用)

3、after+content。  （ie常用haslayout）                              

.fix{zoom:1}(用于低版本不支持，清除浮动)

.fix:after { display:inline-block ; content:'clear' ; clear:both ;line-height:0;  visibility:hidden}

方法3还可以使大小不固定图片垂直居中。

如下：

CSS代码：

.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}

HTML代码：

<div class="pic_box">
    <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>

注：zoom：缩放比例。zoom=1表示原尺寸大小

     zoom作用：触发haslayout。解决margin塌陷。清除浮动。

haslayout：有两个值，true或false。表示元素具有布局，具有布局即可对自身或其子元素进行布局管理，可以解决很多ie的bug，比如高度塌陷、内容错位。

触发haslayout：zoom:1;     float:left/right;    height/width:7px;    display:inline-block;        position:absolute;       

低版本的ie是不支持inline-block的，但display:inline-block触发了haslayout，从而具备haslayout具备的属性。

5、优雅降级和渐进增强。

优雅降级：一开始就针对高端的浏览器开发完备的功能，然后针对低版本浏览器进行兼容。

渐进升级：针对低版本浏览器构建页面，然后针对高端浏览器开发更高端的功能及更好的用户体验。

6、如何居中浮动和不浮动元素。

不浮动：div{margin:0  auto;width:100px;}。必须设置div的宽度，使其根据宽度自适应。且要声明doctype。

浮动：

1、已知元素的宽度：div{width:30%; float:left;  margin-left:50%（使浮动元素左边位于父元素中线）;  position:relative;  left:负元素宽度的一半（向左移动该元素长度的一半，使元素的中线和父元素的中线重合）；}

2、元素宽度不定：见5的after+content。

7、display属性的值。

none：内容不显示。不为隐藏的元素留物理空间。

block：块级元素

inline-block：内联元素

inline：行内元素

table：块元素级的表格。

8、浏览器兼容问题。

1、不同浏览器默认样式不同，容易出现兼容问题。

解决：cssRest

2、块级元素浮动，设置水平margin，ie6会使块级元素的margin变大。

解决：float：left；display:inline；

3、行内元素变为块级元素，浮动，设置水平margin，ie6会使margin变大。

解决：display:block; float:left; display:inline;display:table;

4、图像之间有空隙。

原因：插入图像的回车。

解决：用float。

5、一个父标签里边的子标签浮动，父标签不浮动，子标签撑不开父标签的高度。高度塌陷。

解决1：给父标签加上overflow:hidden;

        2、在子标签最后添加清除浮动；

        3、给父标签设置高度。

6、设置较小标签高度，ie6高度高于设置的高度。

解决：overflow:hidden;

9、性能优化。

1、减少http请求。使用css sprites。

2、使用cdn托管。（cdn托管：主服务器在北京，位于大连的网友想访问该网站的图片视频等，从北京到大连会有很长的时延，降低用户体验。而cdn托管的作用是把服务器里的图片是视频等存在大连的分站点，减少用户访问的时延）

3、避免空的src   href

4、css和js文件放在外面，且压缩。至少做到css在顶部，js在底部。

5、用inner代替Dom.

6、尽量避免使用css  expression。

      原因：css  expression是：

body {  
    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); 
}

为了确保实效性，css要频繁地进行求值，改变窗口大小，移动鼠标，滚动页面都有可能触发表达式进行求值，会严重影响浏览器的性能。