CSS之属性逻辑结构图

本文梳理之CSS属性结构

该图显示了一些CSS的属性，好了，下面就一个个具体讲解；

了解CSS的盒子模型

在CSS中，每个元素都被看做一个盒子模型，而这种盒子模型在二维上看就是一个矩形，如下图所示：

标准盒子模型

通常来说，我们指定width、height属性就是指定Content部分的宽度和长度，实际上我们可以通过设置box-sizing来定义长与宽所代表的内容；

box-sizing 是CSS3新引入的样式，其有如下可选值：

• content-box ： 默认属性，定义width、height指代Content的宽、高(上图内1层蓝色的部分)；

• padding-box ：定义width、height指代上图内2层黄色和蓝色部分的宽和高；

• border-box : 定义width、height指代上图内3层的宽和高；

边框

这里所说的边框主要指margin、border和padding三部分；

margin

margin包括4个部分：margin-top、margin-right、margin-bottom和margin-left，是指与其他元素之间的距离；margin可以对4个方向进行统一设置，也可以对其中的方向分别设置：

<style type="text/css">
  /*margin后面所跟的参数个数可以是1、2、3或4*/

  /*1：设置div 4个方向的margin(留白)都为20px；*/
  div{margin:20px;}
  /*2：设置div上下的margin为20px,左右的margin为10px*/
  div{margin:20px 10px;}
  /*3：设置div的上-右-下-左margin分别为30px,20px,10px,20px*/
  div{margin:30px 20px 10px;}
  /*4：设置div的上-右-下-左margin分别为40,30px,20px,10px*/
  div{margin:40px 30px 20px 10px;}

  /*也可以通过margin-XXX指定XXX方向的margin*/
  div{margin-top: 20px;}

</style>

margin的参数值还可以是：

• % : 规定基于父元素 宽度 的百分比的外边距；比如父元素style为 width:400px;height:200px; , 那么竖直方向上margin-top:%50等价于margin-top:200px，而不是margin-top:100px；

• auto : auto作用于水平方向而不是竖直方向；代码margin:auto，设置所有方向的margin为auto，浏览器将计算父元素和本元素的宽度，计算左右留白，计算公为：左(右)margin = (父元素宽度-本元素宽度)/2 ;

默认情况下，margin的值被设置为 0 ；

margin部分的背景色使用父元素的background-color ；

border

border即为元素的矩形边框；border最重要的3个属性为：

• border-width : 指定border的宽度，可以有的参数可以是1个、2个、3个或4个，与margin的4种不同参数的情况相同；参数类型可以是数值，如10px，也可以是thin(细)、medium(中等)、thick(粗)或inherit(继承)；

• border-style :边框线的样式，其取值如下：

• border-color : 定义边框颜色；

这3个属性可以单独定义，也可以通过border属性同时定义，eg：

border : 3px solid red;

其中，3个参数的顺序没有要求；

• border-radius : 设置border矩形4个角的圆角半径；

• border-image : 有时候，如果突发奇想，想为某个元素添加花圈，该属性就能派上用场了；

padding

设置content与border之间的距离；该部分使用background-color进行颜色填充；也是4个方向的设置：padding-top、padding-right、padding-bottom、padding-left；

box-shadow

设置边框的阴影，使其更有立体感；具体设置见 CSS3 box-shadow介绍;

背景

背景的内容有两种，一种是通过颜色进行填充，另一种是以图片进行填充；

• background-color : 设置背景以指定的颜色进行填充；

• background-image : 设置背景以指定的图片进行填充；

背景填充类型

当通过 background-image 指定以图片进行背景填充后，当图片尺寸小于元素尺寸导致图片不能覆盖整个元素时，可通过 background-repeat 设置图片的填充方式；该属性的值选项如下：

• repeat : 默认，背景图片在垂直和水平方向上重复；

• repeat-x : 背景图片只在水平方向上重复；

• repeat-y : 背景图片只在垂直方向上重复；

• no-repeat : 背景图片仅显示一次，不重复显示；

• inherit : 从父元素继承该属性；

背景是否固定

background-attachment 可以是指背景是否随滚动条的移动而移动；属性如下：

• scroll : 默认值，背景图片会随着页面其他部分一起移动；
• fixed : 当页面的其余部分滚动时，背景图片不会移动；
• inherit : 从父元素继承该属性；

设置背景图片开始绘制的位置

通过设置 background-position可以设置从什么地方开始绘制背景图片；

其选项有以下几种类型：

• x% y% : 设元素的宽度为e_width，高度为e_height；设图片的宽度img_width，高度为img_height，则x% y% 表示图片(img_width × x% , img_height × y%)的坐标点 与 元素中的 (e_width × x% , e_height × y%)的点重合；

注意:在计算机上，左上角点设为(0,0)点，x轴水平向右，y轴垂直向下；

故：0% 0%表示图片左上角点与元素的左上角点重合，100% 100%表示图片右下角点与元素的右下角点重合，50% 50%表示图片中心点与元素中心重合；

如果background-repeat为no-repeat时，因为只是绘制一张图片，上述论述非常容易理解；如果背景图片以repeat方式填充，可以理解为在完成上述一张图片的绘制后，以该图片为基准位置，进行重复填充；

• 通过 left/center/right 和 top/center/bottom 的组合设置位置

• 通过数值指定

例如，30px 20px 表示图片的左上角点位于元素(30px,20px)的坐标位置，换言之，从元素的(30px,20px)位置开始绘制图片；

确定元素的(0,0)点

设置background-position，我们说left top是指将图片的左上角点与元素的左上角点相重合，图片的左上角点容易确定，但哪里是元素的左上角点呢，这就需要通过下面的这个属性来确定了：

background-origin

该属性可以取以下的几种值：

• content-box : content 部分的左上角点设为元素(0,0)点；

• padding-box : padding部分的左上角点设为元素(0,0)点；

• border-box : border部分的左上角点设为元素(0,0)点；

您应该觉得挺眼熟，对的，box-sizing 的属性也是这3个值；

background-clip

该属性规定了填充到哪里终止，有以下3个属性：

• content-box : 只保留在content内的填充；

• padding-box : 保留content和padding内的填充；

• border-box : 保留content、padding、border的填充，注意，如果border-style是solid类型，则看不出结果，因为即使在border区域内填充，也会被border覆盖掉，可以通过设置border-style为dotted查看效果；

文本CSS设置

文本格式

text-transform : 该属性能够控制文本的大小写，而不论源文档中文本的大小写；该属性能取以下值：

• none : 默认值，不改变源文档中文本的大小写；

• capitalize : 文本中的每个单词以大写字母开头；

• uppercase : 文本中的所有字母变为大写；

• lowercase : 文本中的所有字母变为小写；

• inherit : 该属性从父元素继承；

字体控制

• font-size : 取求值如下

• font-weight : 定义字体加粗的程度，其取值如下：

• font-variant : 设置是否将文本转为小型大写字母显示，其可取的值如下：

• font-family : 定义字体类型；

• text-decoration : 定义文本修饰，其可取的值为：

• color : 定义文本颜色

文本布局

• line-height : 定义文本的行高，其可取的值如下：

• letter-spacing : 每个字符之间的水平间距大小，其可取值如下：

• word-spacing : 每个单词间的距离，以空格分割的称为一个单词，单词间的实际距离为 空格宽度 + wordspacing ；

其值与letter-spacing一样，有normal、length和inherit 3种；

• text-align : 设置块级元素内文本的对齐方向，其值可取：

• text-indent : 定义文本的首行缩进；

• vertical-align : 当一行元素中，有的元素高度不相同，定义这些元素在垂直方向上的对齐方式；

• white-space ： 定义某个元素对文本中空白符的处理；其取值如下：

列表控制

• list-style-type : 设置列表项标记类型，其可取值如下：

• list-style-position : 定义列表项标记的位置，其可取值如下：

• list-style-image : 定义列表项标记所使用的图片，其取值如下：

其他

• visiblity : 定义元素的可见性；

• overflow : 规定当内容溢出元素框时发生的事情；

• clip : 用于img对象，指定显示的区域；

• cursor : 指定当鼠标移动到元素上时所显示的鼠标形状；

PS

以上内容很多参考了w3c上的内容；

还有很多的内容没有写上来，因为CSS3涉及的内容实在太多，比如颜色模型、渐变、2D、3D模型；这些内容都有很多内容，所以，以后用到再总结好了；