1、css盒模型

盒模型分为标准模型和ie盒模型。


在标准盒模型中,盒模型的宽高指的是内容(content)区域,而在ie盒模型中,盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。



(1)可以通过css设置盒模型:
/* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
(2)通过js获取content宽高的兼容写法:
function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]
:getComputedStyle(obj)[attr]; }//兼容IE的写法
(3)offsetWidth / offsetHeight      //返回元素的宽高(包括元素宽高、内边距和边框,不包括外边距)

         clientWidth / clientHeight       //返回元素的宽高(包括元素宽高、内边距,不包括边框和外边距)

         style.width / style.height        //返回元素的宽高(包括元素宽高,不包括内边距、边框和外边距)   
     scrollWidth / scrollHeigh     
//返回元素的宽高(包括元素宽高、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同

当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等)

         clientX / clientY       鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x/y轴的坐标;
 不随滚动条滚动而改变;

         pageX / pageY        鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x/y轴的坐标;  随滚动条滚动而改变;

         screenX / screenY    鼠标相对于显示器屏幕左上角x/y轴的坐标;  

         offsetX / offsetY       鼠标相对于事件源左上角x/y轴的坐标

         scrollLeft / scrollTop       
//此属性可以获取或者设置对象的最左/上边到对象在当前窗口显示的范围内的左/上边的距离,也就是元素被滚动条向左/上拉动的距离。返回值是一个整数,单位是像素。此属性是可读写的。

        注: style.width 返回的是字符串,如28px,offsetWidth返回的是数值28;

       
style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性

       
 style.width的值需要事先定义,否则取到的值为空。而且必须要定义在html里(内联样式),如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。

        offsetTop / offsetLeft  
 //返回元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。

        所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。

2、margin塌陷

父元素包含子元素(嵌套关系)  





实际效果是父元素出现20像素的margin-top值



解决方法:

(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合  (可以设置成透明:border:1px solid
transparent)。

(2)为父盒子添加overflow:hidden;

(3)为父盒子设定padding值;

3、元素垂直居中

(1)宽高固定

  或者   



(2)宽高不固定

   或者   



4、清除浮动、让浮动后的元素仍能撑起父元素

(1)给父元素添加伪类(ie兼容性不好,ie8及以下不支持伪类元素)



(2)给父元素添加overflow属性(overflow属性会导致有定位的子元素被隐藏)



(3).在结尾处添加空div标签clear:both

  

5、优化浏览器性能的方法

(1)减少请求次数,将css、js等静态文件通过打包工具打包

(2)雪碧图、图片压缩

(3)js文件放在文档最后加载

(4)事件委派

(5)避免太过复杂的for循环嵌套

6、各大浏览器的内核分别是什么

(1)Chrome:Blink(眨眼)

(2)IE内核:Trident (三叉戟   海王的武器??)

(3)Firefox:Gecko (壁虎)

(4)Safari:Webkit(极速)

(5)Opera:Presto

7、我碰到过的浏览器兼容性问题

(1)QQ浏览器内核解析不了span里面嵌套image标签,别问为什么,就是qq浏览器内核自带的b   u    g。
<span><img src="../images/1.png"/></span>
(2)这个也不算浏览器兼容性问题,但是特别值得注意,MAC系统+Chrome浏览器+<html lang="en">
会自动将中文网页翻译成英文后再翻译成中文,经过机器翻译之后内容就会错乱,Windows系统的话,则会弹窗询问你是否翻译本页。所以前端一定要将lang设置成“zh”。

(3)IOS Safari浏览器下固定定位position:fixed会失效,不是不起作用,是错乱,你无法预测它会出现什么样的样式。

(4)事件代理最好不要通过body冒泡给元素,因为在ios系统中,window
,html,document,body绑定click事件,并且代理元素是不可点击元素(如div
span等)的话,事件不会触发。但是如果是可点击元素(如button,a)的话,点击事件正常。
$(body).on('click', '.clear', function () { alert(123); })
以上浏览器兼容性问题是我在安卓和ios原生混合开发中踩过的坑,ie浏览器就不说了,太多了,心痛。

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信