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、不同浏览器默认样式不同，容易出现兼容问题。解决：cssRest2、块级元素浮动，设置水平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   href4、css和js文件放在外面，且压缩。至少做到css在顶部，js在底部。5、用inner代替Dom.6、尽量避免使用css  expression。      原因：css  expression是：

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

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