一、初识盒模型
html中所有的元素都被视为一个矩形盒子，从中心到外部依次包含：内容区域、内边距padding、边框border、外边距margin。
盒模型图
二、内、外边距
| 属性 | 定义 |
|---|---|
| magin-top | 上-外边距 |
| margin-right | 右-外边距 |
| margin-bottom | 下-外边距 |
| margin-left | 左-外边距 |
| 属性 | 定义 |
|---|---|
| padding-top | 上-内边距 |
| padding-right | 右-内边距 |
| padding-bottom | 下-内边距 |
| padding-left | 左-内边距 |
- 内、外边距只有大小，没有颜色及样式
- 设置上右下左等值的内、外边距
padding: 20px; /*上右下左为20像素的内边距*/
margin: 20px; /*上右下左为20像素的外边距*/
- 单独设置某一边的内、外边距大小
margin-top: 10px; /*上-外边距为10像素*/
margin-right: 20px; /*右-外边距为20像素*/
margin-bottom: 30px; /*下-外边距为30像素*/
margin-left: 40px; /*左-外边距为40像素*/
--
padding-top: 10px; /*上-内边距为10像素*/
padding-right: 20px; /*右-内边距为20像素*/
padding-bottom: 30px; /*下-内边距为30像素*/
padding-left: 40px; /*左-内边距为40像素*/
- 内、外边距只有大小，没有颜色及样式，他们是透明的。但会呈现背景色和背景图像。
- 元素的背景颜色（或背景图像）会延伸到内边距下，但不会延伸到外边距下。
三、边框——border
- 边框样式
border-style: solid; /*实线*/
border-style: double; /*双线*/
border-style: groove; /*槽线*/
border-style: outset; /*外凸*/
border-style: dotted; /*虚线或点线*/
border-style: dashed; /*破折线*/
border-style: inset; /*内凹*/
border-style: ridge; /*脊线*/
效果图
- 边框宽度
使用border-width属性来控制边框宽度，属性值为关键字或像素。
关键字为：thin，medium，thick
border-widht: thin; /*细*/
border-widht: medium; /*中等*/
border-widht: thick; /*粗*/
border-widht: 5px;
- 边框颜色
使用border-color属性指定边框颜色，跟字体颜色设定一样，使用颜色名、rgb值、十六进制码都可以。
border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;
- 指定某一边的边框样式、宽度、颜色
单独设置某一边的边框同单独设置某一边的内外边距一样，只是边框涉及到样式、宽度、颜色。
使用border-top、border-bottom、border-left、border-right加上style、width、color来分别表示上、下、左、右边框的样式、宽度、和颜色。
例子：
border-top-style: solid;
border-top-width: thin;
border-top-color: red;
--
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: red;
--
border-left-style: solid;
border-left-width: thin;
border-left-color: red;
--
border-right-style: solid;
border-right-width: thin;
border-right-color: red;
- 指定边框圆角
- 指定边框四周为圆角
border-radius: 15px;
四周圆角效果图
- 指定某一边边框为圆角
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-right-radius: 3em;
border-bottom-left-radius: 3em;
效果图
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
效果图
- 增加背景图片
background-image: url(image/background.gif);
- 调整背景图片的位置
background-image: url(image/background.gif);
background-position: top left; /*背景图放在左上角*/
- 背景图是否重复
默认背景图是“平铺”的方式显示，可设置不重复或在某一方向重复
background-image: url(image/background.gif);
background-position: top left; /*背景图放在左上角*/
--
background-repeat: repeat; /*默认平铺*/
background-repeat: no-repeat; /*不重复*/
background-repeat: repeat-x; /*水平方向重复*/
background-repeat: repeat-y; /*垂直方向重复*/
background-repeat: inherit; /*按父元素的设置来处理*/
四、class属性和id属性
-
class属性
首先要在HTML中加入一个类，需要使用<class>属性，再为其提供一个值。
例子：
<p class="greentea">
示例段落...
</p>
然后再在CSS中创建一个类选择器。
例子：
p.greentea{
color:green;
}
先选择元素p,再选择它的类名greentea，中间用一个.隔开。这样就会选择greentea类中的所有段落的文本为绿色。
- 使用
".classname"可以选择属性这个类的所有元素
例子：
.greentea{
color:greet;
}
此规则中，所有属性值（属性的类名）为greentea的元素的文本都会成为绿色
- 可以在一个
class属性中放入多个类名，中间用空格隔开，这个元素就属于多个类。
例子：
<p class="greentea raspberry blueberry">
2.id属性
为元素增加一个id属性
<p id="footer">greentea raspberry blueberry</p>
在CSS中选择这个值为：footer的id,需要在footerid前加#字符
#footer{ /* 选择id为footer的任意元素*/
color: greet;
}
--
p#footer{ /* 选择id为footer的<p>元素*/
color: greet;
}
id选择器只于页面一个元素相匹配，id必须是唯一性！
五、在HTML中引用多个样式表
- 下面html中引用了3个样式表，从上到下顺序很重要，最下面的样式表优先级最高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
--
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 481px)">
--
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width: 480px)">
--
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
--
</head>
<body>
......
</body>
</html>
- 为多个设备设定不一样的样式
- 在HTML中使用
media属性，创建媒体查询来指定设备，如手机、平板等。
<link href="lounge.css" rel="stylesheet"
media="screen and (max-device-width: 480p) ">
/*此规则应用到屏幕宽度不超过480px的设备*/
- 在css中增加创建媒体查询
@media screen and (min-device-width: 481px) /*设备屏幕宽度大于481px*/ {
#guarantee{
margin-right: 250px;
}
}
/*@media+媒体查询+{应用于此设备的规则}*/
