七海的html和css学习笔记（九）

第九章 盒模型

        盒模型的分析

                一组元素分出来的段落可以看做为一个盒子。盒子分为内容区，内边距，边框和外边距。

                内容区就是文本或图片等所占的空间，内边距就是内容区和边框之间的距离。边框可以选择是否添加，外边距是边框之外和其他元素的距离。

        为文本添加边框

                使用border属性为文本添加边框的属性：

             border-color: black;  //将边框颜色设置为黑色
             border-width: 1px;    //设置边框为1像素宽
             border-style: solid;  //设置边框为实线

                border-style可以设置边框样式：

             border-style: soild; //一个实线边框
             border-style: double; //一个双线边框
             border-style: dotted; //虚线边框
             border-style: dashed; //破折线边框
             border-style: groove; //槽线，看起来就像页面中的一个槽
             border-style: inset;  //内凹，看起来像页面凹进去
             border-style: outset; //外凸，看起来像是从页面凸出来一样
             border-style: ridge;  //脊线，看起来像页面上一个凸起的山脊

                border-width可以控制边框的宽度，可以使用关键字thin，medium或thick指定边框宽度，或者用像素数指定：

             border-width = thin; //设置为细线
             border-width = medium; //设置为中等粗细线
             border-width = thick;  //设置为粗线
             border-width = 5px;  //设置边框宽度为5像素

                border-color可以设置边框的颜色，可以使用颜色名，rgb值或十六进制代码来指定颜色：

             border-color: red;
             border-color: rgb(100%,0%,0%);
             border-color: #f0000;

                指定某一边的边框。就像内边距一样，还可以指定任意一边的边框样式，宽度和颜色：

             border-top-color= red; //设定边框上线
             border-bottom-style= dashed; //设定边框下线
             border-left-width= thick; //设定边框左线
             border-right-color= red;  //设定边框右线

                指定边框圆角。可以在四个角上都创建圆角，或者只对一个角，或者任意组合创建圆角：

             border-radius: 15px; //指定四个角圆角15像素
             border-top-left-radius: 3em;  //指定左上角为圆角，字体大小的三倍
             border-top-right-radius: 3em; //指定右上角为圆角，字体大小的三倍
             border-bottom-left-radius: 3em; //指定左下为圆角，字体大小的三倍
             border-bottom-right-radius: 3em; //指定右下为圆角，字体大小的三倍

                也可以这样：

             border-top-left-radius: 15px; 
             border-top-right-radius: 0px; 
             border-bottom-left-radius: 0px; 
             border-bottom-right-radius: 15px;
             //只设定左上和右下角为圆角

               

        设置页面的内边距和外边距

                使用padding设置内边距、margin设置外边距：

             padding: 25px; //设置内容的上下左右增加25像素的内边距
             margin: 30px; //设置内容的上下左右增加30像素的外边距
             padding-left: 80px;//设置内容的左边内边距增加80像素（注意：与padding同时使用时，要放在padding的下面，不然会被覆盖！）
             margin-right; 250px;//设置内容右边的外边距增加250像素（同样要小心被覆盖！）

           

        在css中设置背景图像

                增加背景图像使用background-image属性：

          background-image: url(images/background.gif)//添加一张图片，url中可以是相对路径也可以是一个绝对路径

                background-image属性的用途非常特定，它只是要设置一个元素的背景图像。它只是要设置一个元素的背景图像，这个属性并不是用来在页面中放置图像的。要是想放置图像，肯定还要使用<img>元素。

                默认的，背景图像会重复。好在background-repeat属性有一个no-repeat属性。

                background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top、left、right、bottom和center：

           background-position: top left;//将这个图像放在元素的左上角
           background-repeat: repeat;//设置图像在水平和垂直方向上重复，这是默认的行为。
           background-repeat: no-repeat;// 不重复
           background-repeat: repeat-x; //图像只在水平方向上重复
           background-repeat: repeat-y; //图像只在垂直方向上重复
           background-repeat: intherit; //按父元素的设置来处理

                

        id属性

                使用id属性为元素指定一个唯一的名字，还可以使用id属性指定唯一的样式：

//在css中按id来选择元素只需要在id前面使用一个#字符。假设你想选择id为footer的任意元素：
#footer{
      color: red;
}
//或者可以只选择id为footer的一个<p>元素，如下所示：
p#footer{
     color: red;
}

                这两个都可以，它们会选择同一个元素。在这个页面上，我们知道肯定会有一个段落指定为这个id，所以用哪一个选择器都是可以的。不过，在一组更复杂的页面中，可能会出现这种情况：有些页面将这个唯一的id指定给一个段落，而在另外一些页面上可能会把这个id分配给一个列表或块引用。所以你可能需要为这个id定义多个规则，根据页面上不同类型的元素应用不同的规则，如p#someid和h1#someid。

        使用多个样式表

                在你的html中可以指定多个样式表：

            <link type="text/css" href="corporate.css" rel="stylesheet">
            <link type="text/css" href="beverage.css" rel="stylesheet">
            <link type="text/css" href="lounge.css" rel="stylesheet">

                指定多个样式表的顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式。

         面向设备指定css样式

                之所以希望有多个样式文件，实际上还有一个原因：你可能想针对要显示页面的设备类型如电脑，平板，手机甚至打印机等等来调整页面的样式。要做到这一点，可以利用一个media属性，在<link>元素中增加这个属性，只是用适用于指定设备的样式文件，下面来看一个例子：

<link href="lounge-mobile.css" rel="stylesheet" media="screen and(max-device-width:480px)">
//media属性允许你指定应用这个样式表的设备类型；screen指定了有屏幕的设备；max-debice-width:480px 

    指定了屏幕宽度不超过480像素

                 类似的，我们可以创建一个查询来匹配打印机设备，如下所示：

<link href="lounge-print.css" rel="stylesheet" media="print">

                 查询中还有很多属性可以使用，如min-device-width、max-device-width，以及显示方向的orientation，它可以是横向（landscape）或纵向（portrait）等等。

                  

                还可以直接在css中增加媒体查询，要为css指定特有属性的设备，还有一种方法，不是在link标记中使用媒体查询，还可以写在css中：

@media screen and(min-device-width:481px){
      p{
         color: red;
       }
}//对于与这个查询匹配的设备，将所有使用的规则放在大括号里，也就是说，如果屏幕的宽度大于480px就会使用这些规则

                采用这种方式，@media规则中只包含特定于一种媒体类型的css规则。在css文件中，要把对所有媒体类型都通用的规则凡在@media规则下面，这样一来，就不会不必要的重复规则了。另外，浏览器加载页面时，它会通过媒体类型来确定页面试用的规则，而将不匹配的规则忽略。