diff --git a/02-CSS/01-CSS样式表和选择器.md b/02-CSS/01-CSS样式表和选择器.md index 11afd0d..b2e13ea 100644 --- a/02-CSS/01-CSS样式表和选择器.md +++ b/02-CSS/01-CSS样式表和选择器.md @@ -83,7 +83,7 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c font-weight: bold; background-color: pink; } - + @@ -91,7 +91,7 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c

我是内容

- + ``` @@ -186,7 +186,7 @@ p{color: red;} ``` 效果： -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png) +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png) ### css代码的注释 @@ -310,10 +310,10 @@ CSS和HTML的结合方式有3种： - **引入外部样式表css文件**的方式。这种方式又分为两种： - 1、采用``标签。例如：`` - 2、采用import，必须写在` ``` @@ -846,7 +846,7 @@ p,h1,#mytitle,.one{ ``` 效果： - + ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-10.png) @@ -856,7 +856,7 @@ p,h1,#mytitle,.one{ - `link`：超链接点击之前 - `visited`：超链接点击之后 - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） -- `hover`：鼠标放到某个标签上的时候 +- `hover`：鼠标放到某个标签上的时候 - `active`：点击某个标签没有松鼠标时 CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种： @@ -885,14 +885,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 让超链接点击之前是红色 */ a:link{ - color:red; + color:red; } /* 让超链接点击之后是绿色 */ a:visited{ - color:green; + color:green; } @@ -904,7 +904,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 上图中，超链接点击之前是红色，点击之后是绿色。 - + 问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？ 答： @@ -917,7 +917,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 用于以下几种状态： - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） - - `hover`：鼠标放到某个标签上的时候 + - `hover`：鼠标放到某个标签上的时候 - `active`：点击某个标签没有松鼠标时 > 注意：上面这三种状态针适用于所有的标签。 @@ -946,14 +946,14 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 鼠标放在标签上时显示蓝色 */ label:hover{ - color:blue; + color:blue; } /* 点击标签鼠标没有松开时显示红色 */ label:active{ - color:red; + color:red; } @@ -1037,7 +1037,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选 > 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。 -PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 +PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 diff --git a/02-CSS/02-CSS属性.md b/02-CSS/02-CSS属性.md index 2aeb372..e6952ed 100644 --- a/02-CSS/02-CSS属性.md +++ b/02-CSS/02-CSS属性.md @@ -9,7 +9,6 @@ - 字体属性 - 文本属性 - 背景属性 - - 盒子模型 - 定位属性：position、float、overflow等 ## CSS的单位 @@ -297,82 +296,6 @@ ul li{ ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-26.png) -## 盒子模型（重要） - -之前我们是把标签看做是一个对象。从现在开始，我们要把标签理解成一个盒子。 - -标准盒子模型： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.jpg) - -IE盒子模型： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-30.jpg) - -上图显示： - - - - - - - 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： **内容、内边距、边框、外边距**。 - - 在 CSS的**标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。**IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。 - 注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有bording这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。 -
- -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.jpg) - -例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。 - - - -``标签有必要强调一下。很多人以为``标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是``，即浏览器。而``是``的儿子。浏览器给``默认的margin大小是8个像素，此时``占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。 - -```html - - - - - - - - - Document - - - - - - - -
有生之年
-
狭路相逢
- - - - - -``` - -上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png) - -补充一下，如果我在css样式中这样写： -```html -padding:20 30 40 50; -``` -上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。 ## 定位属性(position,float,overflow,z-index) diff --git a/02-CSS/03-CSS样式表的继承性和层叠性.md b/02-CSS/03-CSS样式表的继承性和层叠性.md index f4d44a2..799f700 100644 --- a/02-CSS/03-CSS样式表的继承性和层叠性.md +++ b/02-CSS/03-CSS样式表的继承性和层叠性.md @@ -133,7 +133,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ![](http://img.smyhvae.com/20170727_0843.png) -另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下： +另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的**。举例如下： ![](http://img.smyhvae.com/20170727_0845.png) @@ -156,8 +156,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ### CSS样式表的冲突的总结 -- 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） -- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器 +- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 - 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 > 总结：就近原则。ID选择器优先级最大。 @@ -168,8 +168,8 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 另外还有两个冲突的情况： -- 1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：**定义**的CSS样式表中，谁最近，就用谁。 -- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。 +- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。 +- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。 例如： diff --git a/02-CSS/04-盒子模型.md b/02-CSS/04-盒子模型.md index 2da1dd3..faf8d09 100644 --- a/02-CSS/04-盒子模型.md +++ b/02-CSS/04-盒子模型.md @@ -34,7 +34,82 @@ -上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！** +上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。 + +注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。 + + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.jpg) + +例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。 + + +### 标准盒子模型和IE盒子模型 + +> 我们目前所学习的知识中，以标准盒子模型为准。 + +标准盒子模型： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.jpg) + +IE盒子模型： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-30.jpg) + +上图显示： + + + - 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： **内容、内边距、边框、外边距**。 + - 在 CSS的**标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。**IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。 + + 注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。 +
+ + +### ``标签也有margin + +``标签有必要强调一下。很多人以为``标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是``，即浏览器。而``是``的儿子。浏览器给``默认的margin大小是8个像素，此时``占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。 + +```html + + + + + + + + + Document + + + + + + + +
有生之年
+
狭路相逢
+ + + + + +``` + +上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png) + ### 认识width、height @@ -117,7 +192,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。 -综合属性的写法：(上、右、下、左)（用空格隔开） +综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的） ``` @@ -182,7 +257,7 @@ padding: 20px; - + **题目2**：说出下面盒子真实占有宽高，并画出盒模型图。 ```css diff --git a/README.md b/README.md index d9dea9f..17b3315 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ - [02-CSS属性](./02-CSS/02-CSS属性.md) -- [03-CSS的继承性和层叠性](./02-CSS/03-CSS样式表的继承性和层叠性.md) +- [03-CSS样式表的继承性和层叠性](./02-CSS/03-CSS样式表的继承性和层叠性.md) - [04-盒子模型](./02-CSS/04-盒子模型.md)