CSS 布局之盒子模型

CSS盒子模型

盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每一个元素的用法，才能真正控制好页面中的各个元素。

所有页面中的元素都可以看成是一个盒子。

在CSS中，一个独立的盒子模型由content（内容），border（边框），padding（内边距）和margin（外边距）4部分组成。

在CSS中可以用很多长度单位，主要分成两种，一种是相对类型，一种是绝对类型。

1.       相对类型

(1)     PX：像素，由于它会根据设备的分辨率的多少而代表不同的长度，因此它属于相对类型。比如：在800*600的分辨率设置一张图片的高为100PX，当同样的显示器换成1024*768的分辨率时，就会发现图片相对减小了，因为现在的100PX和以前的100PX代表的不一样了。

(2)     Em：设置以目前字符的高度为单位。（不常用）。比如h1{ margin：2em}，就会以目前字符的两倍来显示。但是注意一点，em作为尺度单位时是以font-size属性为参考依据的，如果没font-size属性，就以浏览器默认的字符高度作为参考。

【p{ text-indent:2em; } 代表首行缩进2个字的距离。】

2.       绝对类型

所谓绝对，就是无论显示设备的分辨率是多少，都代表相同的尺度。无论在什么分辨率中设置像素。

其中的尺度单位：in（英寸），cm，mm，pt（点数），pc（印刷单位）1pc=12pt。

边框border，border会占据空间

Border的属性有3个，border-color颜色，border-width粗细，border-style样式。

其中border-style它可以设置为none无，hidden隐藏，dotted点线，dashed虚线，solid实线，double双线，groove凹槽ridge突脊或outset外凸。其中none、hidden都不显示border，二者效果完全相同，只是运用在表格中时，hidden可以用来解决边框冲突的问题。

 

盒子之间的关系

一个盒子的内部的关系不难理解，但是网页可能存在着大量的盒子，并且它们以各种关系相互影响着。

 

CSS规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化，各种网页元素构成的盒子按照这种标准的方式排列布局。【标准流、 浮动和定位】

 盒子的浮动与定位

盒子的浮动

  在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用‘浮动’方式后，块级元素的表现就会有所不同。

使用clear属性清除浮动的影响。

盒子的定位

Position属性可以设置为以下4个之一：

（1）       static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。

（2）       relative：称为相对定位，使用相对定位的盒子，的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准方式对待他。

（3）       absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

（4）       fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

**相对定位：

*效果：

：

￥￥绝对定位：如果没在父div中设置position：relative，这时是以浏览器窗口作为定位基准的。如果设置了，是以父div为基准的。

Absolute：

%%  fixed

  Z-Index空间位置

z-index属性用于调整定位时重叠块的上下位置，z-index值大的页面位于其值小的页面上方。

盒子的display属性

 

 

Web标准

网页主要右3部分组成：结构（struct）、表现（presentation）和行为（behavior）。

概括来说：“结构”决定网页””是什么”，‘表现’决定页面看起来是”什么样子”，而“行为”决定网页“行为”。

Html超文本标记语言，是用于描述网页文档的一种标记语言。

Css层叠样式表，又称风格样式表，它是用来进行网页风格设计的（如文字设为红色），它是一种依赖用来表现html或xml等文件式样的计算机语言。

JS是一种能让你的网页更加生动活泼的程序语言，你可以利用js轻易地做出亲切的欢迎讯息、有广告效果的跑马灯。增强网页的可观性。

 

6.1.5转换英文字母大小写

=英文 字母大小写转换，只需设定英文段落的text-transform属性。

P.one{ text-transform:capitalize;}单词首字母大写；

text-transform:lowercase;单词全部小写；

text-transform:uppercase;单词全部大写。

 

6.1.9设置字词间距

在英文中，文本是由单词构成的，而单词是由字母构成的，因此对于英文文本来说，要考虑单词内部的字母间距和单词之间的距离。

p{ letter-spacing:-1px;//控制字母间距，等于-1px比平时更紧密一些了。

 word-spacing:10px;//控制单词间距，等于10px；比平时距离大。}

 

6.1.10设置段落内部的文字行高

在css中使用line-height调整段落中行与行之间的距离。

假如：设置line-height:20px；表示行高为20像素。

而设置line-height:130%；表示行高为font-size的130%。

或line-height:1.5；表示行高为font-size的1.5倍。

6.2.5使图片与文字的最下端所在水平线对齐

 <p><imgsrc="demo.jpg"style=" vertical-align:text-bottom;" />lpsum</p>

vertical-align：垂直对齐。

6.3.4设置背景图像的位置

background-position：0% 0%；表示左上位置；[等同于从左上角开始截取]

50% 0%；靠上居中位置；

50% 50%； 正中位置；

（1）     第一个值用于设定水平方向的位置，可以选择left、center、right之一；

（2）     第二个值用于设定竖直方向的位置，可以选择top、center、bottom之一。

 

7.4鼠标指针效果

Cursor:pointer; hand; text;等很多

7.5列表符号

List-style-type：decimal；列表符号也可以是一个小图片list-tyle-image：url(icon1.jpg);

或者ul{ font-size:0.9em; color:#00458c; list-style-type:none;}

li{ background:url(lu.jpg); padding-left:25px;}；