盒模型

 

1.为什么网站在各个浏览器中的显示各不相同?

    浏览器对盒模型的解析不一致。

    尽量写兼容代码,对于IE6/7可以使用CSS Hack

    在代码开头加入这行代码,作用是让IE8以下对盒模型的解析,没有加上 doctype 声明,在 ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”。

    <!doctype html>

    依靠DOCTYPE来改变标准或怪异模式,类似这些低版本的浏览器下的标准模式,接近与“先进”浏览器下的几乎标准模式,因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下,各自的渲染还是是有差别的。没差别就不会有css hack的诞生。

         设置IE渲染方式默认为最高

        下面这段代码来让IE的文档模式永远都是最新的:

        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

        这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。

1.看一下W3C标准浏览器(Firefox,Safari,Chrome,Opera,IE6+)

.box{

         width:300px;

         padding:30px;

         border:20px solid;

         margin:30px;

         background:#ccc;

}

 

2. 解决form表单中各元素的兼容问题的基础。

目前浏览器大部分元素都是基于W3C标准的Box Model上,但对于form中的有部分元素还是基于传统的Box Model上,比如说input中的submit,reset,button和select等元素,这样如果我们给其设置border和padding他 也只会往内延伸,这也是我们介绍盒模型的重要原因--解决form表单中各元素的兼容问题的基础。

box-sizing的两个值如下:

content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding ) 。此属性表现为标准模式下的盒模型。

border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 。此属性表现为怪异模式下的盒模型。

 

1、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都带有2px的border;

2、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding;height在mac系统下会比在winxp win7系统下少1px,只有16px,(12px的字体时高度为17px);

3、【type="text"】默认情况下会有1px的上下padding;WinXP和Win7下高度为15px,Mac系统下为14px

4、【type="checkbox"】默认情况下会有margin:3px 3px 3px 4px,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

5、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

6、textarea默认情况带有1px的上下margin;

最后要说的一点是,上面那些常用的form元素只有【type="text"】和textarea两者是遵循W3C的标准Box Model,而其他几个都是还是遵循IE传统下的Box Model。

.submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio { 

margin: 0; 

padding: 0; 

border-width: 1px; 

height: 17px; 

-moz-box-sizing: border-box;

 -webkit-box-sizing: border-box; 

-o-box-sizing: border-box; 

-ms-box-sizing: border-box; 

box-sizing: border-box;   

}        

.checkbox, .radio { 

width: 13px;

height: 13px; 

-moz-box-sizing: border-box; 

-webkit-box-sizing: border-box; 

-o-box-sizing: border-box; 

-ms-box-sizing: border-box; 

box-sizing: border-box;   

}

3. 到底是用Margin还是用Padding(效果相同时)

margin是用来隔开元素与元素的间距;

padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干;

padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

4./*placeholder-color*/ 设置placeholder中的文字

::-moz-placeholder{

    color: rgba(205,205,205,1);

    text-indent: 2px;

    opacity: 1!important;

    font-size: 14px;

}

:-ms-input-placeholder{

    color: rgba(205,205,205,1);

    text-indent: 2px;

    font-size: 14px;

}

::-webkit-input-placeholder{

    color: rgba(205,205,205,1);

    text-indent: 2px;

    font-size: 14px;

}

5.outline问题

 .InputText:focus {

    outline: -webkit-focus-ring-color auto 5px;

    border: 1px solid rgba(77, 144, 203, 1);

}

6.关于盒模型中的兼容问题四个:

1.ie元素浮动时边界误差问题

在ie6浏览器预览浮动元素时,浮动的边界实际显示为指定边界的2倍,对于ie6边界的显示错误,我们可以设置浮动元素的display属性为inline,这样就可以避免边界加倍显示的问题。 

2.非ie浏览器中怎么让父级元素适应子元素高度 

在非ie浏览器中,怎么让父级元素的高度随子元素的高度自适应变化呢? 

首先我们需要定义父级元素的overflow属性,并且显示声明父级元素自适应调整陶都。 我们来看看目前哪些浏览器能解析自适应高度,非ie浏览器如opera,ntescape,firefox这些都不能够解析,而ie7取消了元素高度自适应;所以,我们为了实现自适应高度,应该增加overflow:auto的声明,但为了与ie不同版本解析兼容,我们还必须增加一个辅助元素,定义clear:both属性,这样就强制了元素的高度。

3元素低边界不被解析 

在css规定中,没有定义float属性的父元素不会自动计算高度,要让其计算出高度,就必须在子元素的最后添加一个辅助元素,并且设置clear:both。所以,我们不能设置父元素overflow:auto属性,而是要设置成父元素浮动属性float:left或者float:right. 

4子元素在ie溢出 

对于这个问题,子元素在ie中溢出,我们可以使用cssheck技巧,我们可以通过定义一个单独在ie浏览器中被解析的样式,如1px,解析父元素的继承性。

posted @ 2015-12-16 14:34  ricesm  阅读(178)  评论(0编辑  收藏  举报