盒模型
-
从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选择器只与页面中的一个元素匹配。
<p id="footer">...</p>
css中如下：
#footer{ //或p#footer
color:red;
}
-
使用多个样式表
使用多个样式表可以指定修改某些样式，使结构更加清晰，方便修改。多个样式表的顺序很重要，下面的css样式表最为优先。在html文件中head部分中添加如下：
<link type="text/css" href="ex1.css" rel="stylesheet">
<link type="text/css" href="ex2.css" rel="stylesheet">
<link type="text/css" href="ex3.css" rel="stylesheet">
...
-
指定媒体类型
围在不同设备上有不同的显示，可为同一个html文件设计多个样式表。为css指定特定属性的设备即可，有两种方法：
①在html文件head部分中：
<link type="text/css" href="ex1.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
其中：
screen意味查询指定有屏幕的设备
max-device-width意味屏幕宽度的最大值
②直接在css中添加媒体查询
使用@media规则，直接将下语句写在css中：
@media screen and (min-device-width: 480px){
p{
margin-right:25px;
}
...
}
