主页 >> JsCss > CSS样式调控之盒子模型

2014/09/27 | 星期六 分类:JsCss | 没有评论 标签: | 作者: | 923 views

CSS样式调控之盒子模型

什么是CSS?是英文Cascading Style Sheets的缩写,中文是层叠样式。说说样式的盒子,上图:
CSS-Style
CSS盒子模型:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性,请看衍生示例:
4.内容(CONTENT)就是盒子里装的东西;
3.而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其他抗震的辅料;
2.边框(BORDER)就是盒子本身了;.
1.至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,也为了方便取出;
如下从上几点细细说上四点:

1.对象外边框距设置
margin : auto | length
#一个值代表全部,否则将按“上-右-下-左”的顺序作用于四边,拆分:
margin-top : auto | length
margin-right : auto | length
margin-bottom : auto | length
margin-left : auto | length

2.对象设置边框样式
border : border-width || border-style || border-color
#可拆分为四
#如果只提供一个参数,将用于全部的四条边;如果只提供两个参数,第一个用于“上-下”,第二个用于“左-右”;如果只提供三个参数,第一个用于上,第二个用于“左-右”,第三个用于下;若提供全部四个参数值,将接“上-右-下-左”的顺序作用于四个边框。.
border-color border-style border-width
border-top-color border-top-style border-top-width
border-right-color border-right-style border-right-width
border-bottom-color border-bottom-style border-bottom-width
border-left-color border-left-style border-left-width

3.对象外边距设置
padding : length
#如果提供全部四个参数,将按“上-右-下-左”的顺序作用于四边,如果只提供一个,将用于全部的四条边;如果提供两个,第一个用于“上-下”,第二个用于“左-右”;如果提供三个,第一个用于上,第二个用于“左-右”,第三个用于下。.
padding-top padding-right padding-bottom padding-left

4.对象高度与长度设置(1+2+3)
height : auto | length
#按照样式表的规则,对象的实际高度为其下列属性值之和;
#margin-top + boder-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
width : auto | length
#按照样式表的规则,对象的实际宽度为其下列属性值之和;
#margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
max-height : none | length
min-height : none | length
max-width : none | length
min-width : none | length

===========================================

其他样式:对象布局设置
display : block | none
#块对象的默认值,块对象将占用整个空间
#隐藏对象,其不为被隐藏的对象保留其物理空间

CSS样式调控
设置样式背景样式
background:background-color || background-image || background-repeat || background-attachment || background-possition
#默认值为:transparent none repeat scroll 0% 0%
.example{background:#CEDFEF url(“normal.png”) no-repeat right center;}

定位问题
Position : static | absolute | fixed | relative
static : 默认值,无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。若不存在这样的父对象,则依据body对象,而层叠通过 z-index 属性进行定义。
relative : 对象不可叠层,将依据left,right,top,bottom 等属性在正常文档流中偏移位置。

z-index : auto | number
#auto : 默认值,遵从其父对象的定位number;无单位的整数值,可为负数;
#number : 好比一张张透明的纸叠在一起,数值大的在最前端,且此属性仅仅作用于position属性值为 retative 或 absolute 对象

===========================================

在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能够大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。

填充只有宽度属性,可以理解为生活中盒子每个HTML标记多可以看作一个盒子。

从上描述:CSS属性可以转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫盒子模式。

通篇看完,大致对CSS有所了解鸟。

  • 本文目前尚无任何评论.
    1. 本文目前尚无任何 trackbacks 和 pingbacks.