CSS设计指南---盒模式，浮动与清除，定位，背景

CSS设计指南—盒模式，浮动与清除，定位，背景

教材: CSS设计指南

---

盒模式

盒子的属性可以分为：

• 边框（border）。可以设置边框的宽窄、样式和颜色。
• 内边距（padding）。可以设置盒子内容区与边框的间距。
• 外边距（margin）。可以设置盒子与相邻元素的间距。

简写样式

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

注意，4 个值之间有空格，但不能是其他分隔符（比如逗号之类的）。甚至，你都不用把4个全都写出来——如果哪个值没有写，那就使用对边的值。

margin用百分比书写时，代表该元素的外边距为相对于其父元素(即相对于包含该元素的元素，而不是相对于该元素)大小的百分比。

相邻的盒之间margin由两个元素间更大的外边距决定。
相邻的外边距叠加起来是最合理的，哪个外边距宽，就以哪个外边距作为段间距。

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

/*这里使用了简写属性把上、下外边距设置为.75em，把左、右外边距设置为30 像素*/
p {font-size:1em; margin:.75em 30px;}

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

盒模型结论一：没有（就是没有设置width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。

盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

box-sizing属性默认是content-box，width表示内容区宽度；如果设定值为border-box，则width对应的是包含边框和内边距的宽度。

---

浮动与清除

浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

想强迫父元素包围其浮动的子元素有三种方式

• 为父元素应用样式overflow:hidden
• 浮动父元素(一起浮动，就仍然会包围)
• 在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元 素添加clearfix类来加（当然，样式表中得需要相应的clearfix 规则）

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

第二种
父元素一起浮动，保持原本的包围状态。

第三种
父元素末尾定义一个应用clear属性的子元素，

<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>

定义一个内容部分为空的<div>元素，并应用clear属性，使得父元素包围浮动元素。

section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

还有一种 clearfix清除浮动
作用原理类似，在元素内容后面添加一个不可见的有clear属性的元素，实现对浮动元素的包围。

---

定位

CSS 布局的核心是position 属性，对元素盒子应用这个属性，可以相对于它在常规
文档流中的位置重新定位。position 属性有4 个值：static、relative、absolute、
fixed，默认值为static。

relative ：相对的是它原来在文档流中的位置（或者默认位置）。
absolute：绝对定位会把元素彻底从文档流中拿出来。绝对定位元素默认的定位上下文是body 元素（标记层次中的祖先容器），而不是相对于它在文档流中的位置偏移多远——这一点与相对定位的元素不同。
fixed：固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。

绝对定位元素的任何祖先元素都可以成为它的定位上下文(相对的偏移量)，只要你把相应祖先元素的position 设定为relative 即可。
如

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

绝对定位的inner的<div>的定位上下文现在就是outer的<div>了，即相对于outer进行偏移。

---

display属性

display属性默认值为block和inline，分别表示该元素为块元素和行内元素。
可以通过display来对块元素和行内元素进行转换。

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

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

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

---

背景

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

在CSS3 被浏览器实现之前，只能在背景颜色上添加一张背景图片。而现在，可以为背景图层添加多张图片（以及CSS3 渐变）。

CSS 规定以下与背景相关属性。

• background-color
• background-image
• background-repeat
• background-position
• background-size
• background-attachment
• background（简写属性）
• background-clip、background-origin、background-break（目前尚未得到广泛支持）

关于background-position

background-position 属性有5个关键字值，分别是top、left、bottom、right 和center，这些关键字中的任意两个组合起来都可以作为该属性的值。background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。

关于background-size

background-size 是CSS3 规定的属性，但却得到了浏览器很好的支持。这个属性用
来控制背景图片的尺寸，可以给它设定的值及含义如下。

• 50%：缩放图片，使其填充背景区的一半。
• 100px 50px：把图片调整到100 像素宽，50 像素高。
• cover：拉大图片，使其完全填满背景区；保持宽高比。
• contain：缩放图片，使其恰好适合背景区；保持宽高比。

多背景图片

多张图片可以在背景中叠加起来，CSS 规则中先列出的图片在上层。

background:
url(images/turq_spiral.png) 30px -10px no-repeat,
url(images/pink_spiral.png) 145px 0px no-repeat,
url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;

背景渐变

渐变属性其实是函数控制。

1.线性渐变

/*例1：默认为从上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例2：从左到右*/
.gradient2 {
background:linear-gradient(left, #64d1dd, #fff);
}
/*例3：左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

例1 声明了一种开始属性和一种结束颜色，这两种颜色会按照默认的方向（从上到下）实现平滑过渡。例2 起点关键字left，于是渐变方向变成了从左到另一端。例3 声明了-45deg（deg 是“度”），等于把起点从默认的中上设定到了左上。

并且可以添加多个颜色作为渐变点，渐变点的位置一般使用整个渐变宽度的百分比来表示。

/*例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);
}

2.放射性渐变

放射性渐变比线性渐变复杂那么一点点，因为可用的控制点多一些。在创建放射性渐变时，可以使用参数指定形状、位置、尺寸、颜色和不透明度。

.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);
}