CSS#3：定位元素

目录

1.理解盒模型

属性：

简写样式：

1.1 盒子边框

1.2 叠加外边距

1.3 外边距的单位

2.盒子有多大

3.浮动与清除 

 3.1浮动

3.1.1 文本绕排图片 

3.1.2 创建分栏

3.2围住浮动元素的三种方法

方法一：为父元素添加overflow:hidden

方法二：同时浮动父元素

方法三：添加非浮动的清除元素 

 4.没有父元素时如何清除

4 定位

4.1 静态定位(static)

4.2 相对定位(relative)

4.3 绝对定位(absolute) 

4.4 固定定位(fixed) 

4.5 定位上下文 

5 显示属性

6 背景 

6.1 背景颜色(background-color)

6.2 背景图片(background-image)

6.3 背景重复 (background-repeat)

6.4 背景位置(background-position) 

6.5 背景尺寸(background-size)

6.6 背景粘附(background-attachment)

6.7 简写背景属性

6.8 一些CSS3属性 

1.VSP（Vendor Specific Prefixes，厂商前缀）的概念

2. 渐变点 

 3. 放射性渐变

---

1.理解盒模型
 

属性：

• Border边框：宽窄、样式和颜色
• Padding内边距：盒子内容区与边框的间距
• Margin外边距：盒子与相邻元素的间距

简写样式：

顺序：上右下左（想象一个顺时针）

更改一个盒子的外边距：

{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;} 

使用简写样式：

{margin:5px 10px 12px 8px;} 

注意，4 个值之间有空格，但不能是其他分隔符。如果哪个值没写，就使用对边的值

例如，左边的值没有写，就会使用右边的值；上边的值没有写，就会使用下边的值

没有就写0

盒子的属性也分三种粒度。 三种粒度从一般到特殊分别是举例如下。

• 1. 全部 3 个属性，全部 4 条边

  {border:2px dashed red;} 

• 2. 1 个属性，全部 4 条边

  {border-style:dashed;} 

• 3. 1 个属性，1 条边

  {border-left-style:dashed;}

  移除边框用none：

  {border-right:none;}

其他属性也都有这三级粒度，例如padding和border-radius等。 

1.1 盒子边框

具有三种属性

1.  宽度（border-width）可以使用文本值：thin（细线）、medium（中粗线）和thick（粗线）或除了负数和百分比之外的绝对值
2. 样式（border-style）有none（无）、hidden（与nono相同,不过应用于表除外.对于表,hidden用于解决边框冲突。）、dotted（点组成的虚线）、dashed（短线组成的虚线）、solid（实线）、double（双线）、groove（3D凹槽边框）、ridge（3D脊状边框）、inset（颜色较深的3D内嵌边框）和outset（颜色较浅的3D外嵌边框）
3. 颜色（border-color）RGB、HSL、十六进制颜色值和颜色关键字

默认情况下，边框的三个相关属性的值分别为border-width:medium;、border-style:none;、border-color:black。由于border-style的默认值是none，所以不会显示盒子的边框。 

为了快速地把盒子边框显示出来，可以这样写一条规则：

p {border:solid 1px;}

推荐大家把下面这条规则作为样式表的第一条规则：

*{margin:0; padding:0;}

这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后，所有默认的外边距和内边距都会消失。然后，你可以为那些真正需要外边距的元素再添加外边距。

1.2 叠加外边距

垂直方向上的外边距会叠加。

上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。较宽的外边距决定两个元素最终离多远。

1.3 外边距的单位

为文本元素设置外边距时通常需要混合使用不同的单位。

比如说，一个段落的左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响。而对于上、下外边距，以em为单位则可以让段间距随字号变化而相应增大或缩小。

e.g.

p {font-size:1em; margin:.75em 30px;} 

段落的垂直间距始终会保持为字体高度的四分之三（上下外边距都是.75em，叠加后还是.75em）。如果用户增大了字号，那么不仅段落中的文本会变大，段间距也会成比例变大。这样，页面的整体布局就会比较协调一致。

2.盒子有多大

• 盒模型结论一：没有（就是没有设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
• 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

3.浮动与清除 

 3.1浮动

3.1.1 文本绕排图片 

为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。

<img ...... />

<p>...the paragraph text...</p> 

CSS规则如下。

/*为简明起见，省略了字体声明*/ 
p {margin:0; border:1px solid red;} 
/*外边距防止图片紧挨文本*/ 
img {float:left; margin:0 4px 4px 0;}

以上规则会让图片浮动到左侧，从而让文本绕排到右侧

在你浮动一张图片或者其他元素时，你是在要求浏览器把它往上方推，直到它碰到父元素的内边界。 浮动图片会从文档流中被移除，如果在标记中有文本元素跟在它后面， 则其中的文本会绕开图片。浮动非图片元素时，必须给它设定宽度。图片无所谓，因为它本身有默认的宽度。

3.1.2 创建分栏

在此基础上创建多栏，只要再用一次float属性。 只要给段落设定宽度，然后也浮动它即可。

p {float:left; margin:0; width:200px; border:1px solid red;} 
img {float:left; margin:0 4px 4px 0;}

浮动图片旁边的固定宽度段落一经浮动，就会变成布局中的一栏， 其文本也不会再绕排图片了。

同时浮动图片和“有宽度的”段落，会导致段落的文本绕排效果消失，而浮动的段落也会尽可能向左向上移动。如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行。

3.2围住浮动元素的三种方法

浮动元素位于“文档流外部”，因而它已经不被包含在标记中的父元素之内了。浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。

方法一：为父元素添加overflow:hidden

overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow:hidden还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。 

方法二：同时浮动父元素

需要用width:100%再让父元素与浏览器容器同宽。为了强制文档流下方的块级元素依然呆在父元素下方，要给它应用clear:left。被清除的元素不会被提升到浮动元素的旁边。

方法三：添加非浮动的清除元素 

给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。

这里有两种方式。 

第一种方式：简单地在HTML标记中添加一个子元素，并给它应用clear属性。

由于没有默认的样式，不会引入多余空间，div元素很适合这个目的。

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

例如，使用div元素，并为div添加了一个类，以便于在CSS中添加它。

<div class="clear_me"></div>

.clear_me {clear:left;}

这样，浮动的元素被父元素包围住了。 

第二种方式：

首先，要给父元素添加一个类。

<section class="clearfix">

然后，再使用这个神奇的clearfix规则！ 

.clearfix:after {
     content:".";
     display:block;
     height:0;
     visibility:hidden;
     clear:both; }

 而这三种方法要因地制宜地使用。

1. 不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部。而这恰恰是overflow:hidden所要阻止的。
2. 不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。

 4.没有父元素时如何清除

最简单的办法就是给一个浮动元素应用clear:both，强迫它定位在前一个浮动元素下方。

然而，在空间足以容纳多个元素向上浮动时，这个简单的办法未必奏效， 可以给每一个浮动元素使用clearfix规则。

4 定位

CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。

position属性有4个值：static、relative、absolute、fixed，默认值为static。

4.1 静态定位(static)

静态定位下的块级元素会在默认文档流中上下堆叠

4.2 相对定位(relative)

相对定位相对的是它原来在文档流中的位置（或者默认位置）。可以使用top、right、bottom和left属性来改变它的位置。

top和left属性的正值分别为向下，向右。可以给top和left属性设定负值，把元素向上、向左移动。

除了这个元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。也就是说这个元素原来占据的空间没有动，其他元素也没动。

使用相对定位的关键是要考虑到元素原来的空间。

4.3 绝对定位(absolute) 

绝对定位会把元素彻底从文档流中拿出来。

绝对定位的元素完全脱离了常规文档流，相对于顶级元素在定位，也就是定位上下文。在页面滚动的时候，为了维护与顶级元素的相对位置关系，被绝对定位了的元素也会相应地移动。

绝对定位元素默认的定位上下文是body

4.4 固定定位(fixed) 

固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。 

4.5 定位上下文 

而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应祖先元素的position设定为relative即可。

e.g.

<body>
     <div id="outer">
         <div id="inner">This is text...</div>
     </div> 
</body>

请注意，对HTML中的文本应该使用恰当的语义标签来标记。我们这里为了说明问题的需要，才把文本直接放在了没有语义的div中。

div#outer {width:250px; margin:50px 40px; border-top:3px solid red;} 
div#inner {top:10px; left:20px; background:#ccc;}

它们俩的原点还一样。

原因在于，内外部div默认都是静态定位，它们之间不存在谁是谁的定位上下文这个问题。换句话说，在常规文档流中，由于外部div没有内容，内部div就会跟它共享相同的起点。只有将元素的position属性设定为relative、absolute或fixed，这个元素的top、right、bottom和left属性才会起作用。 

事实上，只要把元素的外边距和内边距设定好，多数情况下只用静态定位就足以实现页面布局了。因此，除非真需要那么做，否则不要轻易修改元素默认的position属性。

然而，外部div改为相对定位之后，其后代中绝对定位的元素就会按照top和left属性的设定，相对于外部div定位。 

e.g.

div#outer {position:relative; width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {position:absolute; top:10px; left:20px; background:#ccc;} 

5 显示属性

所有元素也都有display属性。

尽管display属性的值有很多，但大多数元素display属性的默认值不是block（块级元素），就是inline（行内元素）。

把块级元素变成行内元素（或者相反）的魔法如下。

     ∧＿∧

   (｡･ω･｡)つ━☆・*。

⊂　　 ノ 　　　・゜+.

　しーＪ　　　°。+ *´¨)

　　　 　　.· ´¸.·*´¨) ¸.·*¨)

　　　 　(¸.·´ (¸.·’*

/*默认为block*/ 
p {display:inline;} 
/*默认为inline*/ 
a {display:block;}

 这种转换可以让原先的行内元素填满其父元素。

display属性还有一个值，就是none。把元素的display设定为none，该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。

与此相对的是visibility属性，这个属性最常用的两个相对的值是visible（默认值）和hidden。把元素的visibility设定为hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”

6 背景 

每个元素盒子都可以想象成由两个图层组成。

元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用background-color属性），也可以包含任意多个背景图片（使用background-image属性），背景图片叠加在背景颜色之上。 

6.1 背景颜色(background-color)

通过它可以设定元素的颜色。然后，元素就会以设定的颜色填充背景图层。

前景色既影响文本，也影响边框。

使用border设定边框的样式和宽度，而没有设定边框颜色（或者没有使用border-color单独设定边框颜色）的情况下，边框会使用color属性设定的字体颜色。默认颜色是黑色。

6.2 背景图片(background-image)

比元素小的背景图片会在水平和垂直方向上重复出现，直至填满整个背景空间。默认情况下背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域。 

要注意的是，指定背景图片来源的方式，与img标签中的方式不同，要这样：

background-image:url(图片路径/图片文件名)

 图片地址两边不用加引号，当然加了也没问题。

6.3 背景重复 (background-repeat)

控制背景重复方式的background-repeat属性有4个值。

• repeat：默认值 在水平和垂直方向都重复
• repeat-x：只在水平方向重复
• repeat-y：只在垂直方向重复
• no-repeat：只重复一次

CSS3还规定另外两个值（但尚未得到浏览器支持），以控制背景图片重复确切的次数，即所有图片都是完整的，不会出现半张图片的现象。

background-repeat:round：为确保图片不被剪切，通过调整图片大小来适应背景区域。

background-repeat:space，为确保图片不被剪切，通过在图片间添加空白来适应背景区域。

6.4 背景位置(background-position) 

background-position属性有5个关键字值。

• top
• left
• bottom
• right
• center

这些关键字中的任意两个组合起来都可以作为该属性的值。 只给background-position设定一个关键字值，则另一个也会取相同的值。

background-position属性设置元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。 

默认情况下，background-position的原点位于左上角。

设定背景位置时可以使用三种值：关键字、百分比、绝对或相对单位的数值。可以使用两个值分别设定水平和垂直位置。关键字指的顺序不重要，left bottom和bottom left意思相同。为了设定的值在所有浏览器中都有效，最好不要混用关键字值与数字值。

使用数值时，第一个值表示水平位置，第二个值表示垂直位置。要是只设定一个值，则将其用来设定水平位置，而垂直位置会被设为center。

在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。

像要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。

也可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只能看到部分图片。这同样可以通过给图片设定足够大的正值、把图片的右下角推到元素外部实现在元素中也只能看到部分图片的效果。位于元素外部的那部分图片不会显示。 

6.5 背景尺寸(background-size)

• 百分比：相对盒子百分之多少的大小来进行相应的图片缩放
• 像素：把图片调整到多少像素宽高。
• cover：拉大图片，使其完全填满背景区；保持宽高比。
• contain：缩放图片，使其恰好适合背景区；保持宽高比。

6.6 背景粘附(background-attachment)

 background-attachment属性控制滚动元素内的背景图片是否随元素滚动而移动。 默认值是scroll，即背景图片随元素移动。如果把它的值改为fixed，那么背景图片不会随元素滚动而移动。

background-attachment:fixed最常用于给body元素中心位置添加淡色水印，让水印不随页面滚动而移动。

6.7 简写背景属性

background属性可以用来设定所有背景相关的值。

e.g.

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

 声明中少写了哪个属性的值，就会使用相应属性的默认值。

6.8 一些CSS3属性 

• background-clip。控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的。

• background-origin。控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置。比如，可以设定以内容区左上角作为原点。

• background-break。控制分离元素（比如跨越多行的行内盒子）的显示效果

使用Modernizr来检测浏览器是否支持这些属性的使用，并为不支持它们的浏览器提供替代CSS 

CSS3还可以给元素背景添加多个背景图片，实现多个图片叠加起来的效果。图片加载失败时元素背景处于默认的透明状态，CSS 规则中先列出的图片在上层 。 

CSS可以创造出各种渐变效果。渐变分两种，一种线性渐变，一种放射性渐变。线性渐变从元素的一端延伸到另一端，放射性渐变则从元素内一点向四周发散。

1.VSP（Vendor Specific Prefixes，厂商前缀）的概念

VSP是为鼓励浏览器厂商尽早采用W3C的CSS3推荐标准产生的。 

以下 CSS3 属性必须加 VPS：

• border-image translate
• linear-gradient transition
• radial-gradient background*
• transform background-image*
• transform-origin *

针对背景图片或渐变 

2. 渐变点 

e.g.

/*例1：50%处有一个渐变点*/ 
.gradient1 {
    background:linear-gradient(#64d1dd, #fff 50%, #64d1dd); } 
/*例2：20%和80%处有两个渐变点*/ 
.gradient2 {
    background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%); } 
/*例3：25%、50%、75%处有三个渐变点*/ 
.gradient3 {
    background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%, #64d1dd); } 
/*例4：为同一个渐变点设定两种颜色可以得到突变效果*/ 
.gradient4 {
     background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%, #fff 75%, #e86a43); } 

渐变点的渐变效果是从开始颜色到渐变点颜色（白色），然后再从渐变点颜色到结束颜色。

注意，开始和结束位置如果没有声明，则默认为0%和100%。

如果不是使用百分比或其他值声明渐变点的位置，则三种颜色会均匀分布于整个渐变，其实际位置是0%、50%和100%。

.gradient1 {
     background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25); } 
.gradient2 {
     background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43); } 
.gradient3 {
     background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba); } 

 3. 放射性渐变

渐变属性其实是函数。

在创建放射性渐变时，可以使用参数指定形状、位置、尺寸、颜色和不透明度。

e.g.

.gradient1 {
     background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25); } 
.gradient2 {
     background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43); } 
.gradient3 {
     background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba); }

 第一个是默认的填满图形渐变，第二个是圆形渐变，第三个是 指定位置的圆形渐变