From ec82fc23d14f09211742366166aee36fcc11582f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 16 Jan 2018 15:18:15 +0800 Subject: [PATCH] =?UTF-8?q?add=20css=E5=9F=BA=E7=A1=80=EF=BC=9A=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E5=B1=9E=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-CSS/01-CSS属性：字体属性和文本属性.md | 107 +--- 02-CSS/08-CSS属性：定位属性.md | 511 ++++++++++++++++++ ...：博雅互动.md => 09-CSS案例讲解：博雅互动.md} | 107 +++- README.md | 2 + 4 files changed, 615 insertions(+), 112 deletions(-) create mode 100644 02-CSS/08-CSS属性：定位属性.md rename 02-CSS/{08-CSS案例讲解：博雅互动.md => 09-CSS案例讲解：博雅互动.md} (84%) diff --git a/02-CSS/01-CSS属性：字体属性和文本属性.md b/02-CSS/01-CSS属性：字体属性和文本属性.md index 3856f45..3cb3c91 100644 --- a/02-CSS/01-CSS属性：字体属性和文本属性.md +++ b/02-CSS/01-CSS属性：字体属性和文本属性.md @@ -216,106 +216,8 @@ ul li{ ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-26.png) -## 定位属性(position,float,overflow,z-index) -> 这一段涉及到**浮动**的知识，我们在[浮动](https://github.com/smyhvae/Web/blob/master/02-CSS/05-%E6%B5%AE%E5%8A%A8.md)这篇文章中会专门讲解。本段只做简单介绍。 - -### 1、pisition属性： - -定位属性position的属性值可以是absolute、relative。 - -position定位分为绝对定位和相对定位： - - - `position:absolute;` **绝对定位**：定义横纵坐标，原点在父容器的左上角。**脱离了本身的顺序流**。横坐标用left表示，纵坐标用top表示。 - -绝对定位的举例： - -```html - -``` - -- `position:relative;` **相对定位**：相对于自己原来的位置。 - -相对定位的举例： - -```html - - - - - - - - - Document - - - - - - -
有生之年
-
狭路相逢
- - - - -``` - -效果： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-28.png) - - -### 2、float属性：浮动 - -`float`属性会让元素脱离原来的顺序流，它的属性值可以是： - - `none`：默认值，对象不漂浮 - - `left`：文本流向对象的右边 - - `right`：文本流向对象的左边 - -举例： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.png) - -我们知道，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的两个`
`标签出现了浮动，于是这里两个标签在另外一个层面上水平排列了。而`

`标签还在自己的层面上遵从顺序流进行排列。 - -### 3、clear属性：禁止浮动 - -`clear`属性的属性值可以是： - - `none`：默认值，允许两边都可以有浮动对象 - - `left`：不允许左边有浮动对象 - - `right`：不允许右边有浮动对象 - - `both`：不允许有浮动对象 - -### 4、overflow属性：超出范围的内容要怎么处理 +## overflow属性：超出范围的内容要怎么处理 `overflow`属性的属性值可以是： @@ -378,17 +280,10 @@ position定位分为绝对定位和相对定位： ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png) -### 5、z-index属性：属性值大的位于上层，属性值小的位于下层 -这句话可能比较难理解。我们来看例子吧。 -这是默认情况下的例子：（div2在上层，div1在下层） -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-32.png) -现在加一个`z-index`属性，要求效果如下： - -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-33.png) ## 鼠标的属性cursor diff --git a/02-CSS/08-CSS属性：定位属性.md b/02-CSS/08-CSS属性：定位属性.md new file mode 100644 index 0000000..ffee4f3 --- /dev/null +++ b/02-CSS/08-CSS属性：定位属性.md @@ -0,0 +1,511 @@ + + +> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + + + +CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 + +``` + position: absolute; + + position: relative; + + position: fixed; + +``` + +下面逐一介绍。 + +## 相对定位 + +**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + +我们之前学习的背景属性中，是通过如下格式： + +``` + background-position:向右偏移量 向下偏移量; +``` + +但这回的定位属性，是通过如下格式： + +``` + position: relative; + left: 50px; + top: 50px; +``` + +相对定位的举例： + +```html + + + + + + + + + Document + + + + + + +

有生之年
+
狭路相逢
+ + + + +``` + +效果： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-28.png) + +### 相对定位不脱标 + +**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 + +也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 + +### 相对定位的用途 + +相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个div放到另一个div之上）。页面中，效果极小。就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +PS：负数表示相反的方向。 + +↘： + +``` + position: relative; + left: 40px; + top: 10px; +``` + +↙： + +``` + position: relative; + right: 100px; + top: 100px; +``` + +↖： + +``` + position: relative; + right: 100px; + bottom: 100px; +``` + +↗： + +``` + position: relative; + left: 200px; + bottom: 200px; + +``` + +![](http://img.smyhvae.com/20180115_1716.png) + +如果要描述上面这张图的方向，我们可以首先可以这样描述： + +``` + position: relative; + left: 200px; + top: 100px; + +``` + +因为`left: 200px`等价于`right: -200px`，所以这张图其实有四种写法。 + +## 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 + +格式举例如下： + +``` + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 + +**绝对定位的盒子脱离了标准文档流。** + +所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 + +绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +### 绝对定位的参考点（重要） + +（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角： + +![](http://img.smyhvae.com/20180115_2120.png) + +（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角： + +![](http://img.smyhvae.com/20180115_2121.png) + +为了理解“**首屏**”二字的含义，我们来看一下动态图： + +![](http://img.smyhvae.com/20180115_2200.gif) + +问题： + +![](http://img.smyhvae.com/20180115_2131.png) + +答案： + +用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。 + +![](http://img.smyhvae.com/20180115_2132.png) + +### 以盒子为参考点 + +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + +如下：（子绝父相） + +![](http://img.smyhvae.com/20180115_2210.png) + +以下几点需要注意。 + +（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷： + +``` +
相对定位 +
没有定位 +

绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 +
+
+ +``` + +再比如： + +``` +
相对定位 +
相对定位 +

绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 +
+
+``` + +（2）不一定是相对定位，任何定位，都可以作为儿子的参考点： + +子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 + +**工程应用：** + +“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做： + +> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。 + +（3）绝对定位的儿子，无视参考的那个盒子的padding： + +下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么， +p将无视父亲的padding，在border内侧为参考点，进行定位： + +![](http://img.smyhvae.com/20180116_0812.png) + +**工程应用：** + +绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。 + +现在有如下两张图片素材： + +![](http://img.smyhvae.com/20180116_1115.png) + +![](http://img.smyhvae.com/20180116_1116.jpg) + +要求作出如下效果： + +![](http://img.smyhvae.com/20180116_1117.png) + +代码实现如下： + +```html + + + + + Document + + + +
+ +
+ +
+

广东深圳宝安区建安一路海雅缤纷城4楼

+
+ + +``` + +代码解释如下： + +- 为了显示“多套餐”那个小图，我们需要用到精灵图。 + +- “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。 + +代码的效果如下： + +![](http://img.smyhvae.com/20180116_1335.png) + +### 让绝对定位中的盒子居中 + +我们知道，如果想让一个**标准流中的盒子居中**（水平方向看），可以将其设置`margin: 0 auto`属性。 + +可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中，可以这样做： + +``` +
+ width: 600px; + height: 60px; + position: absolute; 绝对定位的盒子 + left: 50%; 首先，让左边线居中 + top: 0; + margin-left: -300px; 然后，向左移动宽度（600px）的一半 +
+``` + +如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。 + +![](http://img.smyhvae.com/20180116_1356.png) + +我们可以总结成一个公式： + +> left:50%; margin-left:负的宽度的一半 + +## 固定定位 + +**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。 + +备注：IE6不兼容。 + +**用途1**：网页右下角的“返回到顶部” + +比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。 + +```html + +``` + +**用途2：**顶部导航条 + +我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。 + +需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。 + +顶部导航条的实现如下： + +```html + + + + + Document + + + +
+
+ +
+
+ + + +``` + +### 5、z-index属性： + +**z-index**属性：表示谁压着谁。数值大的压盖住数值小的。 + +有如下特性： + + （1）属性值大的位于上层，属性值小的位于下层。 + + （2）z-index值没有单位，就是一个正整数。默认的z-index值是0。 + + （3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。 + + （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。 + + （5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。 + +针对（1）（2）（3）条，举例如下： + +这是默认情况下的例子：（div2在上层，div1在下层） + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-32.png) + +现在加一个`z-index`属性，要求效果如下： + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-33.png) + +第五条分析： + +![](http://img.smyhvae.com/20180116_1445.png) + +z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。 diff --git a/02-CSS/08-CSS案例讲解：博雅互动.md b/02-CSS/09-CSS案例讲解：博雅互动.md similarity index 84% rename from 02-CSS/08-CSS案例讲解：博雅互动.md rename to 02-CSS/09-CSS案例讲解：博雅互动.md index 59031cb..852eedb 100644 --- a/02-CSS/08-CSS案例讲解：博雅互动.md +++ b/02-CSS/09-CSS案例讲解：博雅互动.md @@ -9,7 +9,7 @@ 首页的**版心**如下： -20170813_1535.png +![](http://img.smyhvae.com/20170813_1535.png) 这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。** @@ -165,8 +165,7 @@ 导航栏的效果如下： -20180114_1332.gif - +![](http://img.smyhvae.com/20180114_1332.gif) ## banenr图 @@ -393,15 +392,111 @@ ``` - 代码解释： +（1）导航栏，左侧的logo： + +**错误的写法：** + +可能会有人直接将img标签作为logo的布局： + + +```html + +``` + +然后将img的样式设置为： + +```css + .header .logo{ + float: left; + margin-right: 40px; + } +``` + + +这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。 + +**正确的写法：** + +正确的写法是将超链接作为logo的布局，里面放入文字（文字可以被SEO）： + +```html +

+ + 博雅互动-世界上最好的游戏公司 + +

+``` + + +然后将**logo设置为背景图**： + +```css + .header .logo{ + float: left; + padding-left: 12px; + margin-right: 39px; + width: 174px; + height: 58px; + } + .header .logo a{ + display: block; + width: 174px; + height: 58px; + background:url(images/logo.png) no-repeat; + text-indent: -999em; + } + +``` + +由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，**然后通过`text-indent`缩进的属性把文字赶走到视线以外的地方**。这是做搜索引擎优化的一个重要的技巧。 + +另外，背景要放在里层的a标签里，不要放在外层的h1标签里。假设背景图放在h1里，那么不管h1的padding有多大，背景图的位置都不会变。 + +（1）内容区域，“点击播放”右侧的小三角形： + + +我们在“点击播放”的右侧放了一个三角形。这个很有技巧。 + +![](http://img.smyhvae.com/20180115_1356.png) + + + +代码截取如下： + + + +```css + .content .product ul li p.djbf a{ + font-size: 12px; + color:#38B774; + text-decoration: none; + background:url(images/sanjiaoxing.png) no-repeat right center; + padding-right: 12px; + } +``` + +上方代码中，我们在第6行给“点击播放”这个超链接加一个右padding（很关键），然后在第5行把小三角这个背景图放在右padding的位置，就能达到想要的视觉效果。 + + + +（2） + + +导航栏+banner+内容区域的效果如下： + + +![](http://img.smyhvae.com/20180114_1405.png) + + + -最终实现的效果如下： -20180114_1405.png diff --git a/README.md b/README.md index 98d90fb..7b58d84 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,5 @@ - [07-浮动](./02-CSS/07-浮动.md) +- [08-CSS属性：定位属性](./02-CSS/08-CSS属性：定位属性.md) +