css盒子与框架的区别?请高手赐教!!!急

html-css010

css盒子与框架的区别?请高手赐教!!!急,第1张

CSS中任意一个元素都可以看成一个盒子模型,具有:外边距:margin 内补丁:padding 边框:border 和内容部分,而框架就是网页中引入别的网页,而框架页面不属于这个页面的一部分!

box-sizing: border-box叫做标准盒子模型

border-box意味着子容器的padding和border的厚度都算在50%之内

这样,你可以随意的修改padding和border的厚度值,根本不用担心父容器被撑爆

border-box兼容性非常好,可支持IE8及以上浏览器

现在最著名的CSS框架几乎都采用了border-box

但假如在全局上加上border-box,是没必要加的

事实上:你只需要在必须使用border-box的元素身上使用border-box,其他所有元素都保持content-box就好了

为什么?

因为:box-sizing属性本来就应该是灵活使用的,全局设定为border-box或者全局设定为content-box都有弊端

【使用场合】

子元素有padding和border,或者至少有其一

并且需要给子元素设定100%宽度(或者50%宽度等等),这时候显然需要border-box

布局属性(Layout properties) border 边框属性 该CSS属性用来设定边框宽度,风格和颜色。 border-bottom 下边框属性 该CSS属性用来设定下边框宽度,风格和颜色。 border-bottom-color 下边框颜色属性 该CSS属性用来设定下边框的颜色。 border-bottom-style 下边框风格属性 该CSS属性用来设定下边框的风格。 border-bottom-width 下边框宽度属性 该CSS属性用来设定下边框的宽度。 border-collapse 边框合并属性 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框。 border-color 边框颜色属性 该CSS属性用来设定边框的颜色。 border-left 左边框属性 该CSS属性用来设定左边框宽度,风格和颜色。 border-left-color 左边框颜色属性 该CSS属性用来设定左边框的颜色。 border-left-style 左边框风格属性 该CSS属性用来设定左边框的风格。 border-left-width 左边框宽度属性 该CSS属性用来设定左边框的宽度。 border-right 右边框属性 该CSS属性用来设定右边框宽度,风格和颜色。 border-right-color 右边框颜色属性 该CSS属性用来设定右边框的颜色。 border-right-style 右边框风格属性 该CSS属性用来设定右边框的风格。 border-right-width 右边框宽度属性 该CSS属性用来设定右边框的宽度。 border-style 边框风格属性 该CSS属性用来设定边框的风格。 border-top 上边框属性 该CSS属性用来设定上边框宽度,风格和颜色。 border-top-color 上边框颜色属性 该CSS属性用来设定上边框的颜色。 border-top-style 上边框风格属性 该CSS属性用来设定上边框的风格。 border-top-width 上边框宽度属性 该CSS属性用来设定上边框的宽度。 border-width 边框宽度属性 该CSS属性用来设定边框的宽度。 margin 边距属性 该CSS属性用来设定边距的宽度。 margin-bottom 下边距属性 该CSS属性用来设定下边距的宽度。 margin-left 左边距属性 该CSS属性用来设定左边距的宽度。 margin-right 右边距属性 该CSS属性用来设定右边距的宽度。 margin-top 上边距属性 该CSS属性用来设定下边距的宽度。 padding 间隙属性 该CSS属性用来设定间隙的宽度。 padding-bottom 下间隙属性 该CSS属性用来设定下间隙的宽度。 padding-left 左间隙属性 该CSS属性用来设定左间隙的宽度。 padding-right 右间隙属性 该CSS属性用来设定右间隙的宽度。 padding-top 上间隙属性 该CSS属性用来设定上间隙的宽度。 //除了以上属性外还有很多css布局属性,如: CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属性(padding) CSS盒子模式(Box Model) CSS列表属性(list-style) CSS伪类(pseudo-class) 这里就不一一介绍了,请到相关网站学习吧