update css02
This commit is contained in:
qianguyihao
parent
c0c53ba9ce
commit
41c1ac6302
@ -9,7 +9,6 @@
|
|||||||
- 字体属性
|
- 字体属性
|
||||||
- 文本属性
|
- 文本属性
|
||||||
- 背景属性
|
- 背景属性
|
||||||
- 盒子模型
|
|
||||||
- 定位属性：position、float、overflow等
|
- 定位属性：position、float、overflow等
|
||||||
|
|
||||||
## CSS的单位
|
## CSS的单位
|
||||||
@ -297,82 +296,6 @@ ul li{
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 盒子模型（重要）
|
|
||||||
|
|
||||||
之前我们是把标签看做是一个对象。从现在开始，我们要把标签理解成一个盒子。
|
|
||||||
|
|
||||||
标准盒子模型：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
IE盒子模型：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图显示：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
|
|
||||||
- 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
|
||||||
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有bording这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="Generator" content="EditPlus®">
|
|
||||||
<meta name="Author" content="">
|
|
||||||
<meta name="Keywords" content="">
|
|
||||||
<meta name="Description" content="">
|
|
||||||
<title>Document</title>
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
|
|
||||||
div{
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
border: 1px solid red;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div>有生之年</div>
|
|
||||||
<div>狭路相逢</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
补充一下，如果我在css样式中这样写：
|
|
||||||
```html
|
|
||||||
padding:20 30 40 50;
|
|
||||||
```
|
|
||||||
上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。
|
|
||||||
|
|
||||||
|
|
||||||
## 定位属性(position,float,overflow,z-index)
|
## 定位属性(position,float,overflow,z-index)
|
||||||
|
|||||||
@ -133,7 +133,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
|
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的**。举例如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -156,8 +156,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
### CSS样式表的冲突的总结
|
### CSS样式表的冲突的总结
|
||||||
|
|
||||||
- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
||||||
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||||
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||||
|
|
||||||
> 总结：就近原则。ID选择器优先级最大。
|
> 总结：就近原则。ID选择器优先级最大。
|
||||||
@ -168,8 +168,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
|||||||
|
|
||||||
另外还有两个冲突的情况：
|
另外还有两个冲突的情况：
|
||||||
|
|
||||||
- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
||||||
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||||
|
|
||||||
例如：
|
例如：
|
||||||
|
|
||||||
|
|||||||
@ -34,7 +34,82 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**
|
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
|
||||||
|
|
||||||
|
注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。
|
||||||
|
|
||||||
|
|
||||||
|
### 标准盒子模型和IE盒子模型
|
||||||
|
|
||||||
|
> 我们目前所学习的知识中，以标准盒子模型为准。
|
||||||
|
|
||||||
|
标准盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
IE盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上图显示：
|
||||||
|
|
||||||
|
|
||||||
|
- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
|
||||||
|
- 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
||||||
|
|
||||||
|
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
### `<body>`标签也有margin
|
||||||
|
|
||||||
|
`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
div{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid red;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>有生之年</div>
|
||||||
|
<div>狭路相逢</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 认识width、height
|
### 认识width、height
|
||||||
@ -117,7 +192,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
综合属性的写法：(上、右、下、左)（用空格隔开）
|
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
|
||||||
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user