css的入门——盒子
盒子
1.盒子的大小 width，height
默认情况下，一个盒子的大小刚好容纳下其中的内容，并根据其中内容的变化而变化。如果自定义盒子的大小，就需要用的width和height属性。指定盒子带下的最常用的方式是像素，百分数或em值。传统上，像素已经是最为普通的方式，因为设计人员可以利用像素对盒子加一精确地控制。
使用百分数时，盒子的大小与浏览器窗口的大小相关，但如果这个盒子被装入另一个盒子，那么百分数是相对外部的盒子大小而言的。
使用em值时，盒子的大小将以盒子中文本的大小作为基准。为了针对具有不同大小屏幕的设备创建灵活的设计方案。
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="width-height.css"> <title>Document</title> </head> <body> <div> <p>The Moog company pioneered the commercial manufacture of modular voltage-controlled ananlog synthesizer system in the early 1950s. </p> </div> </body> </html>
div{ height: 300px; width: 400px; background-color: #ee3e80; } p{ height: 75%; width: 75%; background-color: #e1ddda; }
2.宽度限制 min-width,max-width
为了适应用户的屏幕大小，有些设计会适当地产开收缩页面。在此类设计中，min-width属性指定一个盒子在浏览器窗口较窄时可以显示的最小宽度，max-width属性指定一个盒子在浏览器较宽时所能伸展的最大宽度。这些都是非常有用的属性，它们可以保证页面内容的清晰易读。
3.高度限制 min-height,max-heigjt
与限制盒子宽度的方式一样，你还可以对叶面上的某个盒子进行高度限制。高度限制可以利用min-height和max-height完成。如果一个盒子中的内容占据的空间过大并且溢出了盒子，那么这个盒子会显示得杂乱无章。要合理地控制这种情况，可采用overflow属性。
4.内容溢出 overflow
overflow属性告诉浏览器当盒子的内容超过盒子本身时如何显示。它有连个属性值可供选择：
hidden：该属性会直接把溢出的盒子空间的内容进行隐藏。
scroll：该属性会在和盒子上添加一个滚动条，这样用户可以通过滚动滑块来查看其余的内容。
5.边框，外边距和内边距
有三种属性可以应用在所有盒子上，可以通过调节这些属性来控制盒子的外观。
边框（border）：每个盒子都有边框（即使这些边框不可见或是其宽度被设置成0px）。边框将一个盒子的边缘与另一个盒子隔开。
外边距（margin）：外边距位于边框的边缘之外。你可以通过设置外边距的宽度在两个相邻盒子的边框之间创造空隙。
内边距（padding）：内边距是指盒子边框与盒子所包含内容之间的空隙。增加内边距可以提高内容的可读性。
6.空白区和垂直外边距
设计人员将页面上项目之间的空隙称为空白区。想象一下，在一个盒子周围有一圈边框，你一定不希望其中的文本紧贴住边框，否则文本就会难以阅读。如果有两个盒子放在一起，你肯定不想它们的外边缘贴在一起，因为这样会使贴在一起的边框看起来边框很粗。如果一个盒子下方的外边距与另一个盒子上方的外边距相接，那么浏览器的渲染效果只会显示其中较大的一个，如果相同大小则只会显示一个。
7.边框宽度 border-width
border-width属性用来控制边框的宽度。改属性值可以是像素值，也可以是：thin medium thick中的一个，但是该属性不能使用百分比。
可以通过以下4种属性分别对各个边框大的大小进行管理：
border-top-width border-right-width border-bottom-width border-left-width
还可以在一个属性种为四个边框指定不同的宽度：border-width：2px 1px 1px 2px；这个的顺序是 上，右，下，左的顺时针方向。
8.边框样式 border-style
可是哟个border-style属性来控制边框的样式。该属性可以选用以下值：
solid：一条实线 dotted：一串方形点 dashed：一条虚线 double：两条实线 groove：显示为雕入页面的效果 ridge：显示为在页面上的凸起效果
inset：显示为嵌入页面的效果 outset：看起来像是要凸出屏幕 hidden/none：不现实任何边框
可以利用以下属性对各个边框进行单独设置：border-top/left/right/bottom-style
9.边框颜色 border-color
可利用RGB值，十六进制码或是CSS颜色名称来指定边框的颜色。可以利用以下属性对各个边框进行单独设置：border-top/left/right/bottom-color
更快捷的方式在一个属性中控制四个方向的边框颜色：
border-color：darkdcyan deeppink darkcyan deeppink；这个的顺序是 上，右，下，左的顺时针方向。
10.快捷方式 border
border属性允许你在一个属性中同时指定边框的宽度，样式和颜色。
p{ width: 250px; border: 3px dotted #0088dd; }
11.内边距 padding
padding属性用来指定元素的内容与元素边框之间保持多大的空隙。该属性的值最长使用像素作为单位。如果使用的是百分数，那么内边距就会贼加到这个盒子的宽度上。可以使用以下属性分别指定各个方向的内边距：
padding-top padding-right padding-bottom padding-left
或者说也可以使用下面的快捷方式：padding：10px 5px 3px 1px；这个的顺序是 上，右，下，左的顺时针方向。
12.外边距 margin
margin属性用来控制盒子之间的间隙。该属性值一般以像素给出，当然可以使用百分比和em值。如果一个盒子位于两一个盒子的上方，就会出现外边距折叠现象，也就是说相连的这两个外边框中，较大的一个会生效，而较小的一个会被忽略。注意：如果一个盒子已经指定了宽度，那么外边距就会增加到这个盒子的宽度上。可使用以下属性分别指定哥哥方向上的外边距：margin-top/right/bottom/left。或者，也可以使用下面的快捷方式：margin：1xp 2px 3px 4px；这个的顺序是 上，右，下，左的顺时针方向。
也可使用以下形式：margin：10px 20px；这个顺序是左右为10像素，上下为20像素。
13.内容居中
如果想让一个盒子在页面上居中显示，可将letf-margin属性和right-margin属性的值设置为auto。为使盒子在页面上居中显示，你需要为这个盒子设置一个宽度。一旦指定了盒子的宽度并将其左右两侧的外边距设置为auto，浏览器就会在盒子的两侧显示相同大小的空隙。这样一来，盒子就会在页面上居中显示了。为使这一技巧在旧浏览器中正常工作，需要给包含盒子的外部元素添加一个text-align属性并将其值设置为center。
14.IE6的盒子模型
当你制定了盒子的宽度时，它的内边距和外边距就会增加到他的宽度上。但IE6却有一个浏览器的怪异现象，即将盒子的内边距和外边距包含到他的宽度上。为了回避这个问题，要确保为HTML页面提供一个DOCTYPE声明。
15.内联元素与块级元素的转换 display
display属性允许你将一个内联元素转换成一个块级元素，反之亦然，而且该属性还可以用于从页面上隐藏元素。该属性可以选用以下值：
inline：该值可以使一个块级元素变现得像一个内联元素。
block：该值可以使一个内联元素变现得像一个块级元素。
inline-block：该值可以使一个块级元素像内联元素那样浮动并保持其他的块级元素的特征。
none：该值将一个元素从页面上隐藏。此种情况下，页面上就像没有这个元素一样。
使用这个属性的时候一定要注意，不应该在内联盒子中创建块级元素。
16.盒子的隐藏 visibility
visibility属性允许从用户的视线中隐藏盒子，但他包括留了元素原来占用的空间。该属性可以选用以下值之一：
hidden：该值用于隐藏元素。
visible：该值用于显示元素。
如果一个元素的visibility属性值被设置成为hidden，那么该元素的位置会显示空白。如果不希望显示空白，你应该改用display属性，并将其值设置为none。
17.CSS3：边框图像 border-image
border-image属性将图片应用到盒子的边框是。它采用一张背景图片，并将此图片切割成九块。该属性需要三种信息：
（1）图片的URL；（2）切割图片的位置；
（3）如何处理直边，可以选用以下值：
stretch 伸展图片 repeat 重复图片 round 类似于repeat，但是如果重复图片遇到不合适，round值会根据边框的大小动态调整图片。
盒子的边框必须有一定宽度，这样图片才能显示出来。
18.CSS:盒子的投影 box-shadow
box-shadow属性允许你在盒子周围增加投影。该属性的工作原理与text-shadow属性类似。使用该属性时，至少应该包含下列项目中前两项的值以及一个颜色值：
水平偏移：负值表示将阴影置于盒子的左侧。
垂直偏移：扶着表示将阴影置于盒子的上方。
模糊距离：如果省略该值，阴影会显示为实边，就像边框一样。
阴影扩展：如果使用该值，正值会使阴阳向四周延伸，负值则会使阴影收缩。
此外，还可以在以上值的前面使用inset关键字，以此来创建内部阴影。
p{ box-shadow: inset 0 0 10px #777777; }
19.CSS3：圆角 border-radius
CSS3引入可在盒子上创建圆角的功能。为了实现该功能，需要使用一个称为border-radius的属性，该值表示半径（像素），不支持该属性的浏览器将盒子显示为直角。可使用以下属性为一个盒子的每个角分别指定值：
border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius
还可以使用快捷方式：border-radius：5px 10px 5px 10px；方向分别是上，右，下，左
20.CSS3：椭圆形 border-radius
要创建更复杂的形状，可给圆角的横向值和纵向值指定不同的距离。
21.示例
在这个示例中，我们展示一个音乐商店的首页。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Boxes</title> <link rel="stylesheet" href="Boxes.css"> </head> <body> <div id="page"> <ul id="navigation"> <li><a href="#" class="on">Home</a></li> <li><a href="#">For Sale</a></li> <li><a href="#">Repairs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <p><img src="7.jpg" alt="Fender Rhodes,Hohner Clavinet,and Wurlitzer EP200" id="piano"/></p> <p>We specialise in the sales and repair of classic keyboards,in particular the Fender Rhodes.Wurlitzer EP200,and Hohner Clavinet. </p> </div> </body> </html>
body{ font-size: 80%; font-family: "Courier New",Courier,monospace; letter-spacing: 0.15em; background-color: #efefef; } #page{ max-width: 940px; min-width: 720px; margin: 10px auto 10px auto; padding: 20px; border: 4px double #000; background-color: #ffffff; } #logo{ width: 150px; margin: 10px auto 25px auto; } ul{ width: 570px; padding: 15px; margin: 0px auto 0px auto; border-top: 2px solid #000; border-bottom: 1px solid #000; text-align: center; } li{ display: inline; margin: 0px 3px; } p{ text-align: center; width:600px; margin: 20px auto 20px auto; font-weight: normal; } a{ color: #000000; text-transform: uppercase; text-decoration: none; padding: 6px 18px 5px 18px; } a:hover,a.on{ color: #cc3333; background-color: #ffffff; }
