web网页搭建：HTML与CSS（四）

盒模型

• 从css的角度看，网页中的每个元素都可以看做是一个盒模型，每个盒子组成成分由里到外依次为：
  1.content aera：内容区
  2.padding：透明内边距框
  3.border：边框
  4.margin：透明外边距框
  模型图如下所示：

  
  
  

  盒模型
• 对盒模型的不同部分的参数进行调整得到想要的不同效果，属性参数调整给出一个示例如下：

.guarantee{
  line-height: 1.9em;                //行间距
  font-style: italic;
  border-color: #d2b48c;
  border-width: 5px;
  border-style:dashed;
  border-top-color: blue;          //注意和上面的border-corlor顺序
  border-radius: 20px;            //边框角半径
  color:#554444;             //字体颜色
  background-color: #a7cece;           //背景颜色
  padding:25px;                //内间距
  padding-left: 220px;           //左内间距
  margin: 30px;                  //外边框
  background-image: url(images/background.png);  //背景图
  background-repeat: repet-x;    //背景图设置
  background-position: top left;
  background-size: 55em;
}

效果图如下：

效果图

• ID属性
  id与class的区别为id选择器只与页面中的一个元素匹配。

...
css中如下：
#footer{        //或p#footer
     color:red;
}

• 使用多个样式表
  使用多个样式表可以指定修改某些样式，使结构更加清晰，方便修改。多个样式表的顺序很重要，下面的css样式表最为优先。在html文件中head部分中添加如下：

...

• 指定媒体类型
  围在不同设备上有不同的显示，可为同一个html文件设计多个样式表。为css指定特定属性的设备即可，有两种方法：
  ①在html文件head部分中：

其中：
screen意味查询指定有屏幕的设备
max-device-width意味屏幕宽度的最大值
②直接在css中添加媒体查询
使用@media规则，直接将下语句写在css中：

@media screen and (min-device-width: 480px){
 p{
margin-right:25px;
}
...
}