update: refactor
This commit is contained in:
qianguyihao
449
02-CSS基础/01-CSS属性：字体属性和文本属性.md
Normal file
449
02-CSS基础/01-CSS属性：字体属性和文本属性.md
Normal file
@@ -0,0 +1,449 @@
|
||||
|
||||
> 本文最初于2015-10-04发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 本文重要内容
|
||||
|
||||
- CSS的单位
|
||||
- 字体属性
|
||||
- 文本属性
|
||||
- 定位属性：position、float、overflow等
|
||||
|
||||
## CSS的单位
|
||||
|
||||
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
|
||||
<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
|
||||
|
||||
- **绝对单位：**
|
||||
|
||||
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
|
||||
|
||||
各种单位的含义：
|
||||
|
||||
- `in`：英寸Inches (1 英寸 = 2.54 厘米)
|
||||
- `cm`：厘米Centimeters
|
||||
- `mm`：毫米Millimeters
|
||||
- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
|
||||
- `pc`：皮卡Picas (1 皮卡 = 12 点)
|
||||
|
||||
- **相对单位：**
|
||||
`px`：像素
|
||||
`em`：印刷单位相当于12个点
|
||||
`%`：百分比，相对周围的文字的大小
|
||||
|
||||
为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。
|
||||
|
||||
百分比`%`这个相对单位要怎么用呢？这里也举个例子：
|
||||
|
||||
|
||||
|
||||
## 字体属性
|
||||
|
||||
### 行高
|
||||
|
||||
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||||
|
||||
如下图所示：
|
||||
|
||||
|
||||
|
||||
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
|
||||
|
||||
垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：
|
||||
|
||||
|
||||
|
||||
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
|
||||
|
||||
|
||||
### 如何让单行文本垂直居中
|
||||
|
||||
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
|
||||
|
||||
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
|
||||
|
||||
|
||||
|
||||
### font字体属性
|
||||
|
||||
css样式中，字体属性有以下几种：
|
||||
|
||||
```html
|
||||
p{
|
||||
font-size:50px; /*字体大小*/
|
||||
line-height: 30px; /*行高*/
|
||||
font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
|
||||
font-style:italic ; /*italic表示斜体，normal表示不倾斜*/
|
||||
font-weight:bold; /*粗体：属性值写成bolder也可以*/
|
||||
font-variant:small-caps; /*小写变大写*/
|
||||
}
|
||||
```
|
||||
|
||||
上面这些属性中，字号、行高、字体这三个属性是最常见的。我们继续看。
|
||||
|
||||
**1、字号、行高、字体三大属性：**
|
||||
|
||||
（1）字号：
|
||||
|
||||
```
|
||||
font-size:14px;
|
||||
```
|
||||
|
||||
（2）行高：
|
||||
|
||||
```
|
||||
line-height:24px;
|
||||
```
|
||||
|
||||
（3）字体：（font-family就是“字体”，family是“家庭”的意思）
|
||||
|
||||
```
|
||||
font-family:"宋体";
|
||||
```
|
||||
|
||||
是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
|
||||
|
||||
格式：
|
||||
|
||||
|
||||
```
|
||||
font: 加粗 字号/行高/ 字体
|
||||
|
||||
```
|
||||
|
||||
举例：
|
||||
|
||||
```
|
||||
font: 400 14px/24px “宋体”;
|
||||
```
|
||||
|
||||
PS：400是nomal，700是bold。
|
||||
|
||||
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。
|
||||
|
||||
|
||||
|
||||
**2、字体属性的说明：**
|
||||
|
||||
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
|
||||
|
||||
```
|
||||
font-family: "华文彩云";
|
||||
```
|
||||
|
||||
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
|
||||
|
||||
页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。
|
||||
|
||||
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个）
|
||||
|
||||
```
|
||||
font-family: "微软雅黑","宋体";
|
||||
```
|
||||
|
||||
上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
|
||||
|
||||
|
||||
（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
|
||||
|
||||
```
|
||||
font-family: "Times New Roman","微软雅黑","宋体";
|
||||
```
|
||||
|
||||
上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。
|
||||
|
||||
可是，如果我们把中文字体写在前面：(错误写法)
|
||||
|
||||
```
|
||||
font-family: "微软雅黑","Times New Roman","宋体";
|
||||
```
|
||||
|
||||
上方代码会导致，中文和英文都会采用微软雅黑字体。
|
||||
|
||||
（4）所有的中文字体，都有英语别名。
|
||||
|
||||
微软雅黑的英语别名：
|
||||
|
||||
```
|
||||
font-family: "Microsoft YaHei";
|
||||
```
|
||||
|
||||
宋体的英语别名：
|
||||
|
||||
```
|
||||
font-family: "SimSun";
|
||||
```
|
||||
|
||||
于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
|
||||
|
||||
```
|
||||
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
|
||||
```
|
||||
|
||||
（5）行高可以用百分比，表示字号的百分之多少。
|
||||
|
||||
一般来说，百分比都是大于100%的，因为行高一定要大于字号。
|
||||
|
||||
比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。
|
||||
|
||||
反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
|
||||
|
||||
|
||||
## 文本属性
|
||||
|
||||
CSS样式中，常见的文本属性有以下几种：
|
||||
|
||||
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
|
||||
- `word-spacing: 1cm;` 单词之间的间距
|
||||
- `text-decoration: none;` 字体修饰：none去掉下划线、**underline下划线**、line-through中划线、overline上划线、
|
||||
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
|
||||
- `color:red;` 字体颜色
|
||||
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
|
||||
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
## 列表属性
|
||||
|
||||
```html
|
||||
ul li{
|
||||
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
|
||||
margin-left:80px; /*公有属性*/
|
||||
}
|
||||
```
|
||||
|
||||
另外还有一个简写属性叫做`list-style`，它的作用是：将上面的多个属性写在一个声明中。
|
||||
|
||||
我们来看一下`list-style-image`属性的效果：
|
||||
|
||||
|
||||
|
||||
给列表前面的图片加个边距吧，不然显示不完整：
|
||||
|
||||
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## overflow属性：超出范围的内容要怎么处理
|
||||
|
||||
`overflow`属性的属性值可以是：
|
||||
|
||||
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
|
||||
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
|
||||
- `hidden`：不显示超过对象尺寸的内容。
|
||||
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
|
||||
- `scroll`：总是显示滚动条。
|
||||
|
||||
针对上面的不同的属性值，我们来看一下效果：
|
||||
举例：
|
||||
|
||||
```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;
|
||||
background-color: #00cc66;
|
||||
margin-right: 100px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#div1{
|
||||
overflow:auto;/*超出的部分让浏览器自行解决*/
|
||||
}
|
||||
#div2{
|
||||
overflow:visible;/*超出的部分会显示出来*/
|
||||
}
|
||||
|
||||
#div3{
|
||||
overflow:hidden;/*超出的部分将剪切掉*/
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="div1">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||
<div id="div2">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||
<div id="div3">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 鼠标的属性cursor
|
||||
|
||||
鼠标的属性`cursor`有以下几个属性值：
|
||||
|
||||
- `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
|
||||
- `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||
- `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||
|
||||
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
|
||||
|
||||
```html
|
||||
p:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
另外还有以下的属性：（不用记，需要的时候查一下就行了）
|
||||
|
||||
- all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
|
||||
- col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
|
||||
- crosshair : 简单的十字线光标。
|
||||
- default : 客户端平台的默认光标。通常是一个箭头。
|
||||
- hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||
- move : 十字箭头光标。用于标示对象可被移动。
|
||||
- help : 带有问号标记的箭头。用于标示有帮助信息存在。
|
||||
- no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
|
||||
- not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
|
||||
- progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
|
||||
- row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
|
||||
- text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
|
||||
- vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
|
||||
- wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
|
||||
- *-resize : 用于标示对象可被改变尺寸方向的箭头光标。
|
||||
- w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
|
||||
- url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
|
||||
|
||||
## 滤镜
|
||||
|
||||
这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：
|
||||
|
||||
```html
|
||||
<img src="3.jpg" style="filter:gray()">
|
||||
```
|
||||
|
||||
举例代码：
|
||||
|
||||
```html
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td>原始图片</td>
|
||||
<td>图片加入黑白效果</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="3.jpg"></td>
|
||||
<td><img src="3.jpg" style="filter:gray()"></td> /*滤镜：设置图片为灰白效果*/
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
```
|
||||
|
||||
效果如下：（IE有效果，google浏览器无效果）
|
||||
|
||||
|
||||
|
||||
**延伸：**
|
||||
滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
|
||||
|
||||
|
||||
|
||||
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
|
||||
|
||||
|
||||
## 导航栏的制作（本段内容请忽略）
|
||||
|
||||
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||||
|
||||
|
||||
|
||||
代码：
|
||||
|
||||
```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">
|
||||
ul{
|
||||
list-style: none;/*去掉列表前面的圆点*/
|
||||
width: 420px;
|
||||
height: 60px;
|
||||
background-color: black;/*设置整个导航栏的背景为灰色*/
|
||||
}
|
||||
|
||||
li{
|
||||
float: left;/*平铺*/
|
||||
margin-right: 30px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;/*去掉超链的下划线*/
|
||||
font-size: 20px;
|
||||
color: #BBBBBB;/*设置超链的字体为黑色*/
|
||||
font-family:微软雅黑;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="">博客园</a></li>
|
||||
<li><a href="">新随笔</a></li>
|
||||
<li><a href="">联系</a></li>
|
||||
<li><a href="">订阅</a></li>
|
||||
<li><a href="">管理</a></li>
|
||||
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
325
02-CSS基础/02-CSS属性：背景属性.md
Normal file
325
02-CSS基础/02-CSS属性：背景属性.md
Normal file
@@ -0,0 +1,325 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8277895.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## background系列属性
|
||||
|
||||
### 常见背景属性
|
||||
|
||||
CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
|
||||
|
||||
- `background-color:#ff99ff;` 设置元素的背景颜色。
|
||||
|
||||
- `background-image:url(images/2.gif);` 将图像设置为背景。
|
||||
|
||||
- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要）
|
||||
- `no-repeat`不要平铺；
|
||||
- `repeat-x`横向平铺；
|
||||
- `repeat-y`纵向平铺。
|
||||
|
||||
- `background-position:center top;` 设置背景图片在当前容器中的位置。
|
||||
|
||||
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
|
||||
属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
|
||||
- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
|
||||
|
||||
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
|
||||
|
||||
|
||||
### background-color：背景颜色的表示方法
|
||||
|
||||
css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
|
||||
|
||||
比如红色可以有下面的三种表示方法：
|
||||
|
||||
```
|
||||
background-color: red;
|
||||
background-color: rgb(255,0,0);
|
||||
background-color: #ff0000;
|
||||
```
|
||||
|
||||
下面分别介绍。
|
||||
|
||||
**1、用英语单词来表示：**
|
||||
|
||||
能够用英语单词来表述的颜色，都是简单颜色。比如红色：
|
||||
|
||||
```
|
||||
background-color: red;
|
||||
```
|
||||
|
||||
**2、rgb表示法：**
|
||||
|
||||
rgb表示三原色“红”red、“绿”green、“蓝”blue。
|
||||
|
||||
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
|
||||
|
||||
比如红色：
|
||||
|
||||
```
|
||||
background-color: rgb(255,0,0);
|
||||
```
|
||||
|
||||
黑色：
|
||||
|
||||
```
|
||||
background-color: rgb(0,0,0);
|
||||
```
|
||||
|
||||
颜色可以叠加，比如黄色就是红色和绿色的叠加：
|
||||
|
||||
```
|
||||
background-color: rgb(255,255,0);
|
||||
```
|
||||
|
||||
**3、十六进制表示法：**
|
||||
|
||||
比如红色：
|
||||
|
||||
```
|
||||
background-color: #ff0000;
|
||||
```
|
||||
|
||||
PS:所有用#开头的值，都是16进制的。
|
||||
|
||||
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
|
||||
|
||||
问：16进制中28等于10进制多少？
|
||||
答：2*16+8 = 40。
|
||||
|
||||
16进制中的af等于10进制多少？
|
||||
答：10 * 16 + 15 = 175
|
||||
|
||||
所以，#ff0000就等于rgb(255,0,0)。
|
||||
|
||||
`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
|
||||
|
||||
|
||||
**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
background-color:#ff0000;
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
background-color:#f00;
|
||||
```
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
background-color:#112233;
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
background-color:#123;
|
||||
```
|
||||
|
||||
但是，比如下面这个是无法简化的：
|
||||
|
||||
```
|
||||
background-color:#222333;
|
||||
```
|
||||
|
||||
再比如，下面这个也是无法简化的：
|
||||
|
||||
```
|
||||
background-color:#123123;
|
||||
```
|
||||
|
||||
几种常见的颜色简写可以记住。如下：
|
||||
|
||||
```
|
||||
#000 黑
|
||||
#fff 白
|
||||
#f00 红
|
||||
#222 深灰
|
||||
#333 灰
|
||||
#ccc 浅灰
|
||||
```
|
||||
|
||||
|
||||
### `background-repeat`属性（重要）
|
||||
|
||||
`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
|
||||
|
||||
- `no-repeat`（不要平铺）
|
||||
- `repeat-x`（横向平铺）
|
||||
- `repeat-y`（纵向平铺）
|
||||
|
||||
这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
|
||||
|
||||
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||
|
||||
|
||||
|
||||
PS：padding的区域也是有背景图的。
|
||||
|
||||
（2）属性值为`no-repeat`（不要平铺）时：
|
||||
|
||||
|
||||
|
||||
（3）属性值为`repeat-x`（横向平铺）时：
|
||||
|
||||
|
||||
|
||||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||||
|
||||
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
|
||||
|
||||
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
|
||||
`background-position`属性指的是**背景定位**属性。公式如下：
|
||||
|
||||
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
|
||||
|
||||
**1、用像素值描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position:向右偏移量 向下偏移量;
|
||||
```
|
||||
|
||||
属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**2、用单词描述属性值：**
|
||||
|
||||
格式如下：
|
||||
|
||||
```
|
||||
background-position: 描述左右的词 描述上下的词;
|
||||
```
|
||||
|
||||
- 描述左右的词：left、center、right
|
||||
- 描述上下的词：top 、center、bottom
|
||||
|
||||
比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
|
||||
|
||||
比如说，`bottom`表示图片的底边和父亲**底边贴齐**（好好理解）。
|
||||
|
||||
位置属性有很多使用场景的。我们来举两个例子。
|
||||
|
||||
场景1：（大背景图）
|
||||
|
||||
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
|
||||
|
||||
|
||||
|
||||
检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
|
||||
|
||||
|
||||
|
||||
实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
|
||||
|
||||
```
|
||||
body{
|
||||
background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
}
|
||||
```
|
||||
|
||||
上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
|
||||
|
||||
场景2：（通栏banner）
|
||||
|
||||
很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
|
||||
|
||||
|
||||
|
||||
正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
|
||||
|
||||
```css
|
||||
div{
|
||||
height: 465px;
|
||||
background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
```
|
||||
|
||||
上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：
|
||||
|
||||
|
||||
|
||||
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
|
||||
|
||||
### background-attachment属性
|
||||
|
||||
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
|
||||
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
- `scroll`（与fixed属性相反，默认属性）
|
||||
|
||||
`background-attachment:fixed;`的效果如下：
|
||||
|
||||
|
||||
|
||||
### background 综合属性
|
||||
|
||||
background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到border)
|
||||
|
||||
举例1:
|
||||
|
||||
```
|
||||
background:red url(1.jpg) no-repeat 100px 100px fixed;
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
background-color:red;
|
||||
background-image:url(1.jpg);
|
||||
background-repeat:no-repeat;
|
||||
background-position:100px 100px;
|
||||
background-attachment:fixed;
|
||||
```
|
||||
|
||||
以后，我们可以用小属性层叠掉大属性。
|
||||
|
||||
上面的属性中，可以任意省略其中的一部分。
|
||||
|
||||
比如说，对于下面这样的属性：
|
||||
|
||||
```
|
||||
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
1029
02-CSS基础/03-CSS样式表和选择器.md
Normal file
1029
02-CSS基础/03-CSS样式表和选择器.md
Normal file
File diff suppressed because it is too large
Load Diff
338
02-CSS基础/04-CSS选择器：伪类.md
Normal file
338
02-CSS基础/04-CSS选择器：伪类.md
Normal file
@@ -0,0 +1,338 @@
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8280814.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 伪类（伪类选择器）
|
||||
|
||||
|
||||
**伪类**：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。
|
||||
|
||||
|
||||
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
|
||||
|
||||
|
||||
|
||||
### 静态伪类和动态伪类
|
||||
|
||||
|
||||
伪类选择器分为两种。
|
||||
|
||||
（1）**静态伪类**：只能用于**超链接**的样式。如下：
|
||||
|
||||
- `:link` 超链接点击之前
|
||||
- `:visited` 链接被访问过之后
|
||||
|
||||
PS：以上两种样式，只能用于超链接。
|
||||
|
||||
（2）**动态伪类**：针对**所有标签**都适用的样式。如下：
|
||||
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
|
||||
|
||||
|
||||
## 超链接a标签
|
||||
|
||||
### 超链接的四种状态
|
||||
|
||||
|
||||
a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
- `:link` “链接”：超链接点击之前
|
||||
- `:visited` “访问过的”：链接被访问过之后
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
|
||||
|
||||
对应的代码如下：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*让超链接点击之前是红色*/
|
||||
a:link{
|
||||
color:red;
|
||||
}
|
||||
|
||||
/*让超链接点击之后是绿色*/
|
||||
a:visited{
|
||||
color:orange;
|
||||
}
|
||||
|
||||
/*鼠标悬停，放到标签上的时候*/
|
||||
a:hover{
|
||||
color:green;
|
||||
}
|
||||
|
||||
/*鼠标点击链接，但是不松手的时候*/
|
||||
a:active{
|
||||
color:black;
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
记住，在css中，这四种状态**必须按照固定的顺序写**：
|
||||
|
||||
> a:link 、a:visited 、a:hover 、a:active
|
||||
|
||||
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
|
||||
|
||||
看一下这四种状态的动图效果：
|
||||
|
||||
|
||||
|
||||
### 超链接的美化
|
||||
|
||||
问：既然`a{}`定义了超链的属性，和`a:link{}`定义了超链点击之前的属性，那这两个有啥区别呢？
|
||||
|
||||
答：
|
||||
|
||||
**`a{}`和`a:link{}`的区别：**
|
||||
|
||||
- `a{}`定义的样式针对所有的超链接(包括锚点)
|
||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||
|
||||
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
|
||||
|
||||
我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
|
||||
|
||||
针对超链接，我们来举个例子：
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上面这个效果，完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.nav{
|
||||
width: 960px;
|
||||
height: 50px;
|
||||
border: 1px solid red;
|
||||
margin: 100px auto;
|
||||
}
|
||||
.nav ul{
|
||||
/*去掉小圆点*/
|
||||
list-style: none;
|
||||
}
|
||||
.nav ul li{
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
/*让内容水平居中*/
|
||||
text-align: center;
|
||||
/*让行高等于nav的高度，就可以保证内容垂直居中*/
|
||||
line-height: 50px;
|
||||
}
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
<li><a href="#">网站栏目</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
/*两个伪类的属性，可以用逗号隔开*/
|
||||
.nav ul li a:link , .nav ul li a:visited{
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
```
|
||||
|
||||
如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
|
||||
|
||||
> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
|
||||
|
||||
|
||||
```css
|
||||
.nav ul li a{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
background-color: purple;
|
||||
color:white;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
|
||||
|
||||
|
||||
## 动态伪类举例
|
||||
|
||||
我们在第一段中描述过，下面这三种动态伪类，针对所有标签都适用。
|
||||
|
||||
- `:hover` “悬停”：鼠标放到标签上的时候
|
||||
- `:active` “激活”： 鼠标点击标签，但是不松手时。
|
||||
- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
|
||||
|
||||
我们不妨来举下例子。
|
||||
|
||||
举例1：
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
/*
|
||||
伪类选择器：动态伪类
|
||||
*/
|
||||
|
||||
/*
|
||||
让文本框获取焦点时：
|
||||
边框：#FF6F3D这种橙色
|
||||
文字：绿色
|
||||
背景色：#6a6a6a这种灰色
|
||||
*/
|
||||
input:focus{
|
||||
border:3px solid #FF6F3D;
|
||||
color:white;
|
||||
background-color:#6a6a6a;
|
||||
}
|
||||
|
||||
/*
|
||||
鼠标放在标签上时显示蓝色
|
||||
*/
|
||||
label:hover{
|
||||
color:blue;
|
||||
}
|
||||
|
||||
/*
|
||||
点击标签鼠标没有松开时显示红色
|
||||
*/
|
||||
label:active{
|
||||
color:red;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
|
||||
```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">
|
||||
|
||||
/*整个表格的样式*/
|
||||
table{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid blue;
|
||||
/*border-collapse属性：对表格的线进行折叠*/
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*鼠标悬停时，让当前行显示#868686这种灰色*/
|
||||
table tr:hover{
|
||||
background: #868686;
|
||||
}
|
||||
|
||||
/*每个单元格的样式*/
|
||||
table td{
|
||||
border:1px solid red;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
456
02-CSS基础/05-CSS样式表的继承性和层叠性.md
Normal file
456
02-CSS基础/05-CSS样式表的继承性和层叠性.md
Normal file
@@ -0,0 +1,456 @@
|
||||
|
||||
|
||||
|
||||
> 本文最初于2017-07-29发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 本文重点
|
||||
|
||||
- CSS的继承性
|
||||
- CSS的层叠性
|
||||
- 计算权重
|
||||
- 权重问题大总结
|
||||
- CSS样式表的冲突的总结
|
||||
- 权重问题深入
|
||||
- 同一个标签，携带了多个类名
|
||||
- !important标记
|
||||
|
||||
## CSS的继承性
|
||||
|
||||
我们来看下面这样的代码，来引入继承性：
|
||||
|
||||
|
||||
|
||||
|
||||
上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论：
|
||||
|
||||
> 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是**继承性。**
|
||||
|
||||
继承性是从自己开始，直到最小的元素。
|
||||
|
||||
但是呢，如果再给上方的代码加一条属性：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
|
||||
|
||||
- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
|
||||
|
||||
- 关于盒子、定位、布局的属性，都不能继承。
|
||||
|
||||
|
||||
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS的层叠性
|
||||
|
||||
很多公司如果要笔试，那么一定会考层叠性。
|
||||
|
||||
|
||||
### 层叠性：计算权重
|
||||
|
||||
|
||||
**层叠性：就是css处理冲突的能力。** 所有的权重计算，没有任何兼容问题！
|
||||
|
||||
CSS像艺术家一样优雅，像工程师一样严谨。
|
||||
|
||||
我们来看一个例子，就知道什么叫层叠性了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
|
||||
|
||||
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
|
||||
|
||||
> **id的数量，类的数量，标签的数量**
|
||||
|
||||
因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
|
||||
|
||||
针对上面这句话，我们接下来举一些复杂一点的例子。
|
||||
|
||||
|
||||
### 层叠性举例
|
||||
|
||||
#### 举例1：计算权重
|
||||
|
||||
|
||||
|
||||
|
||||
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
|
||||
|
||||
PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
|
||||
|
||||
#### 举例2：权重相同时
|
||||
|
||||
|
||||
|
||||
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
|
||||
|
||||
|
||||
#### 举例3：具有实战性的例子
|
||||
|
||||
|
||||
|
||||
|
||||
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
|
||||
|
||||
如果写成下面这种代码是无法实现的：
|
||||
|
||||
|
||||
|
||||
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
|
||||
|
||||
正确的做法是：（**非常重要**）
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
|
||||
|
||||
这种方式好用是好用，但用好很难。
|
||||
|
||||
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：**把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。**
|
||||
|
||||
|
||||
上面这个例子很具有实战性。
|
||||
|
||||
#### 举例4：继承性造成的影响
|
||||
|
||||
这里需要声明一点：
|
||||
|
||||
>如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
|
||||
|
||||
为了验证上面这句话，我们来看看下面这样的例子：
|
||||
|
||||
|
||||
|
||||
另外：**如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的**。举例如下：(box3 描述得最近，所以采用 box3 的属性)
|
||||
|
||||
|
||||
|
||||
上方代码的文字版如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta />
|
||||
<meta />
|
||||
<meta />
|
||||
<title>Document</title>
|
||||
<style>
|
||||
#box1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#box2 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#box3 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="box1">
|
||||
<div id="box2">
|
||||
<div id="box3"><p>猜猜我是什么颜色</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 层叠性：权重计算的问题大总结（非常重要）
|
||||
|
||||
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
|
||||
|
||||
通过列举上面几个例子，我们对权重问题做一个总结。
|
||||
|
||||
|
||||
|
||||
|
||||
上面这个图非常重要，我们针对这个图做一个文字描述：
|
||||
|
||||
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
|
||||
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
|
||||
|
||||
|
||||
|
||||
### CSS样式表的冲突的总结
|
||||
|
||||
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
|
||||
- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
|
||||
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
|
||||
|
||||
> 总结：就近原则。ID选择器优先级最大。
|
||||
|
||||
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
||||
|
||||
|
||||
|
||||
另外还有两个冲突的情况：
|
||||
|
||||
- 1、对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
|
||||
- 2、对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 题目演示
|
||||
|
||||
CSS的层叠性讲完了，我们来做几个题目吧。
|
||||
|
||||
#### 题目1
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目2
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目3
|
||||
|
||||
|
||||
|
||||
|
||||
#### 题目4
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 权重问题深入
|
||||
|
||||
### 同一个标签，携带了多个类名，有冲突：
|
||||
|
||||
这里需要补充两种冲突的情况：
|
||||
|
||||
- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
|
||||
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
|
||||
|
||||
|
||||
例如：（就近原则）
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
|
||||
|
||||
|
||||
### !important标记
|
||||
|
||||
来看个很简单的例子：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，显然id选择器的权重最大，所以文字的颜色是红色。
|
||||
|
||||
如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
important是英语里面的“重要的”的意思。我们可以通过如下语法：
|
||||
|
||||
```
|
||||
k:v !important;
|
||||
```
|
||||
|
||||
来给一个属性提高权重。这个属性的权重就是**无穷大**。
|
||||
|
||||
注意，一定要注意语法的正确性。
|
||||
|
||||
正确的语法：
|
||||
|
||||
```
|
||||
font-size:60px !important;
|
||||
```
|
||||
|
||||
错误的语法：
|
||||
|
||||
|
||||
```
|
||||
font-size:60px; !important; 不能把!important写在外面
|
||||
font-size:60px important; 不能忘记感叹号
|
||||
```
|
||||
|
||||
`!important`标记需要强调如下3点：
|
||||
|
||||
**（1）!important提升的是一个属性，而不是一个选择器**
|
||||
|
||||
|
||||
```css
|
||||
p{
|
||||
color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
|
||||
font-size: 100px ; 这条属性没有写!important，所以没有提升权重
|
||||
}
|
||||
#para1{
|
||||
color:blue;
|
||||
font-size: 50px;
|
||||
}
|
||||
.spec{
|
||||
color:green;
|
||||
font-size: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。
|
||||
|
||||
|
||||
**（2）!important无法提升继承的权重，该是0还是0**
|
||||
|
||||
|
||||
比如HTML结构：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>哈哈哈哈哈哈哈哈</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
有CSS样式：
|
||||
|
||||
```css
|
||||
div{
|
||||
color:red !important;
|
||||
}
|
||||
p{
|
||||
color:blue;
|
||||
}
|
||||
```
|
||||
|
||||
由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
|
||||
|
||||
干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
|
||||
|
||||
**(3)!important不影响就近原则**
|
||||
|
||||
如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
|
||||
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
|
||||
|
||||
为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
PS：! important做站的时候，不允许使用。因为会让css写的很乱。
|
||||
现在，我们知道层叠性能比较很多东西：
|
||||
选择器的写法权重，谁离的近，谁写在下面。
|
||||
|
||||
|
||||
|
||||
## 知识回顾
|
||||
|
||||
> 我们把以上内容和上一篇文章做一个简单的知识回顾。
|
||||
|
||||
|
||||
### CSS属性
|
||||
|
||||
> css属性，面试的时候会有笔试，笔试没有智能感应的。
|
||||
|
||||
加粗，倾斜，下划线：
|
||||
|
||||
```
|
||||
font-weight:bold;
|
||||
font-style:italic;
|
||||
text-decoration:underline;
|
||||
```
|
||||
|
||||
|
||||
背景颜色、前景色：
|
||||
|
||||
```
|
||||
background-color:red;
|
||||
color:red;
|
||||
```
|
||||
|
||||
### class和id的区别
|
||||
|
||||
class用于css的，id用于js的。
|
||||
|
||||
1）class页面上可以重复。id页面上唯一，不能重复。
|
||||
2）一个标签可以有多个class，用空格隔开。但是id只能有id。
|
||||
|
||||
### 各种选择器(浏览器兼容性)
|
||||
|
||||
IE6层面兼容的选择器： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：
|
||||
|
||||
```
|
||||
p
|
||||
#box
|
||||
.spec
|
||||
div p
|
||||
div.spec
|
||||
div,p
|
||||
*
|
||||
```
|
||||
|
||||
|
||||
IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
|
||||
|
||||
```
|
||||
div>p
|
||||
h3+p
|
||||
```
|
||||
|
||||
IE8能够兼容的：
|
||||
|
||||
```
|
||||
ul li:first-child
|
||||
ul li:last-child
|
||||
```
|
||||
|
||||
### css两个性质
|
||||
|
||||
- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
|
||||
|
||||
- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
|
||||
|
||||
|
||||
再看几个题目：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
权重问题大总结，最后有个例子，比较难，暂时略掉。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
545
02-CSS基础/06-CSS盒模型详解.md
Normal file
545
02-CSS基础/06-CSS盒模型详解.md
Normal file
@@ -0,0 +1,545 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7256371.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新。以下是正文。
|
||||
|
||||
## 盒子模型
|
||||
|
||||
### 前言
|
||||
|
||||
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
|
||||
|
||||
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
|
||||
|
||||
|
||||
### 盒子中的区域
|
||||
|
||||
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
|
||||
|
||||
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
|
||||
- padding：内边距。
|
||||
- border：边框。
|
||||
- margin：外边距。
|
||||
|
||||
盒子模型的示意图：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
|
||||
|
||||
注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
|
||||
|
||||
|
||||
### 标准盒模型和IE盒模型
|
||||
|
||||
> 我们目前所学习的知识中，以标准盒子模型为准。
|
||||
|
||||
标准盒子模型：
|
||||
|
||||
|
||||
|
||||
IE盒子模型：
|
||||
|
||||
|
||||
|
||||
上图显示：
|
||||
|
||||
|
||||
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
|
||||
|
||||
|
||||
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
|
||||
- padding：内边距。
|
||||
- border：边框。
|
||||
- margin：外边距。
|
||||
|
||||
CSS盒模型和IE盒模型的区别：
|
||||
|
||||
- 在 <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
|
||||
|
||||
|
||||
一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
|
||||
|
||||
比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
下面这两个盒子，真实占有宽高，都是302*302：
|
||||
|
||||
盒子1：
|
||||
|
||||
```css
|
||||
.box1{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 100px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
```
|
||||
|
||||
盒子2：
|
||||
|
||||
```css
|
||||
.box2{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
padding: 25px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
|
||||
|
||||
上面这两个盒子的盒模型图如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
|
||||
|
||||
|
||||
|
||||
### 认识padding
|
||||
|
||||
|
||||
#### padding区域也有颜色
|
||||
|
||||
|
||||
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### padding有四个方向
|
||||
|
||||
padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
||||
|
||||
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
|
||||
|
||||
小属性的写法：
|
||||
|
||||
```
|
||||
padding-top: 30px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 100px;
|
||||
```
|
||||
|
||||
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
|
||||
|
||||
```
|
||||
padding:30px 20px 40px 100px;
|
||||
```
|
||||
|
||||
如果写了四个值，则顺序为：上、右、下、左。
|
||||
|
||||
如果只写了三个值，则顺序为：上、右、下。??和右一样。
|
||||
|
||||
如果只写了两个值，比如说：
|
||||
|
||||
```
|
||||
padding: 30px 40px;
|
||||
```
|
||||
|
||||
则顺序等价于：30px 40px 30px 40px;
|
||||
|
||||
|
||||
要懂得，**用小属性层叠大属性**。比如：
|
||||
|
||||
```
|
||||
padding: 20px;
|
||||
padding-left: 30px;
|
||||
```
|
||||
|
||||
上面的padding对应盒子模型为：
|
||||
|
||||
|
||||
|
||||
|
||||
下面的写法：
|
||||
|
||||
```
|
||||
padding-left: 30px;
|
||||
padding: 20px;
|
||||
```
|
||||
|
||||
第一行的小属性无效，因为被第二行的大属性层叠掉了。
|
||||
|
||||
|
||||
下面的题，会做了，说明你明白了。
|
||||
|
||||
#### 一些题目
|
||||
|
||||
**题目1**：说出下面盒子真实占有宽高，并画出盒模型图。
|
||||
|
||||
```css
|
||||
div{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 10px 20px 30px;
|
||||
padding-right: 40px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
|
||||
|
||||
```css
|
||||
div{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
padding:40px 50px 60px;
|
||||
padding-bottom: 30px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
```
|
||||
|
||||
答案：
|
||||
|
||||
`padding-left:10px；` 和`padding-right:20px;` 没用，因为后面的padding大属性，层叠掉了他们。
|
||||
|
||||
盒子模型如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
|
||||
|
||||
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
```
|
||||
width:123px;
|
||||
height:123px;
|
||||
padding:20px 40px;
|
||||
border:1px solid red;
|
||||
```
|
||||
|
||||
**题目4**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
|
||||
|
||||
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
```
|
||||
width:123px;
|
||||
height:123px;
|
||||
padding:20px;
|
||||
padding-right:40px;
|
||||
border:1px solid red;
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 一些元素，默认带有padding
|
||||
|
||||
一些元素，默认带有`padding`，比如ul标签。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，不加任何样式的ul，也是有40px的padding-left。
|
||||
|
||||
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
|
||||
|
||||
可以使用`*`进行清除：
|
||||
|
||||
```
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
但是，`*`的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
|
||||
|
||||
```
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 认识border
|
||||
|
||||
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
|
||||
|
||||
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
|
||||
|
||||
#### border-style
|
||||
|
||||
border的所有的线型如下：（我们可以通过查看`CSS参考手册`得到）
|
||||
|
||||
|
||||
|
||||
|
||||
比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。
|
||||
|
||||
所以，比较稳定的border-style就几个：solid、dashed、dotted。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### border拆分
|
||||
|
||||
border是一个大综合属性。比如说：
|
||||
|
||||
```
|
||||
border:1px solid red;
|
||||
```
|
||||
|
||||
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
|
||||
|
||||
PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
|
||||
|
||||
border属性是能够被拆开的，有两大种拆开的方式：
|
||||
|
||||
- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
|
||||
|
||||
- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
|
||||
|
||||
现在我们明白了：**一个border属性，是由三个小属性综合而成的**。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
|
||||
|
||||
```
|
||||
border-width:10px 20px;
|
||||
border-style:solid dashed dotted;
|
||||
border-color:red green blue yellow;
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（1）按三要素拆：
|
||||
|
||||
```
|
||||
border-width:10px; //边框宽度
|
||||
border-style:solid; //线型
|
||||
border-color:red; //颜色。
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
border:10px solid red;
|
||||
```
|
||||
|
||||
(2)按方向来拆：
|
||||
|
||||
```
|
||||
border-top:10px solid red;
|
||||
border-right:10px solid red;
|
||||
border-bottom:10px solid red;
|
||||
border-left:10px solid red;
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
border:10px solid red;
|
||||
```
|
||||
|
||||
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
|
||||
|
||||
|
||||
|
||||
```
|
||||
border-top-width:10px;
|
||||
border-top-style:solid;
|
||||
border-top-color:red;
|
||||
border-right-width:10px;
|
||||
border-right-style:solid;
|
||||
border-right-color:red;
|
||||
border-bottom-width:10px;
|
||||
border-bottom-style:solid;
|
||||
border-bottom-color:red;
|
||||
border-left-width:10px;
|
||||
border-left-style:solid;
|
||||
border-left-color:red;
|
||||
```
|
||||
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
border:10px solid red;
|
||||
|
||||
```
|
||||
|
||||
|
||||
工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上方效果，写法如下：
|
||||
|
||||
```
|
||||
border:10px solid red;
|
||||
border-right-color:blue;
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上方效果，写法如下：
|
||||
|
||||
```
|
||||
border:10px solid red;
|
||||
border-style:solid dashed;
|
||||
```
|
||||
|
||||
border可以没有：
|
||||
|
||||
```
|
||||
border:none;
|
||||
```
|
||||
|
||||
可以某一条边没有：
|
||||
|
||||
```
|
||||
border-left: none;
|
||||
```
|
||||
|
||||
也可以调整左边边框的宽度为0：
|
||||
|
||||
```
|
||||
border-left-width: 0;
|
||||
```
|
||||
|
||||
|
||||
#### 举例：利用border属性画一个三角形（小技巧）
|
||||
|
||||
步骤如下：
|
||||
|
||||
（1）当我们设置盒子的width和height为0时，此时效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
（2）然后将border的底部取消：
|
||||
|
||||
|
||||
|
||||
|
||||
（3）最后设置border的左边和右边为白色：
|
||||
|
||||
|
||||
|
||||
|
||||
这样，一个三角形就画好了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
979
02-CSS基础/07-浮动.md
Normal file
979
02-CSS基础/07-浮动.md
Normal file
@@ -0,0 +1,979 @@
|
||||
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7297736.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新。以下是正文。
|
||||
|
||||
|
||||
|
||||
|
||||
## 文本主要内容
|
||||
|
||||
- 标准文档流
|
||||
- 标准文档流的特性
|
||||
- 行内元素和块级元素
|
||||
- 行内元素和块级元素的相互转换
|
||||
- 浮动的性质
|
||||
- 浮动的清除
|
||||
- 浏览器的兼容性问题
|
||||
- 浮动中margin相关
|
||||
- 关于margin的IE6兼容问题
|
||||
|
||||
## 标准文档流
|
||||
|
||||
|
||||
宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
|
||||
|
||||
|
||||
### 标准文档流的特性
|
||||
|
||||
**（1）空白折叠现象：**
|
||||
|
||||
无论多少个空格、换行、tab，都会折叠为一个空格。
|
||||
|
||||
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
|
||||
|
||||
```
|
||||
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
|
||||
```
|
||||
|
||||
|
||||
**（2）高矮不齐，底边对齐：**
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**（3）自动换行，一行写不满，换行写。**
|
||||
|
||||
|
||||
### 行内元素和块级元素
|
||||
|
||||
学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
|
||||
|
||||
- 行内元素
|
||||
- 块级元素
|
||||
|
||||
|
||||
我们可以举一个例子，看看块级元素和行内元素的区别：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
|
||||
|
||||
现在我们尝试给两个标签设置宽高。效果如下：
|
||||
|
||||
|
||||
|
||||
上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
|
||||
|
||||
**行内元素和块级元素的区别：**（非常重要）
|
||||
|
||||
行内元素：
|
||||
|
||||
- 与其他行内元素并排；
|
||||
- 不能设置宽、高。默认的宽度，就是文字的宽度。
|
||||
|
||||
块级元素：
|
||||
|
||||
- 霸占一行，不能与其他任何元素并列；
|
||||
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
|
||||
|
||||
|
||||
|
||||
|
||||
**行内元素和块级元素的分类：**
|
||||
|
||||
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
|
||||
|
||||
从HTML的角度来讲，标签分为：
|
||||
|
||||
- 文本级标签：p、span、a、b、i、u、em。
|
||||
- 容器级标签：div、h系列、li、dt、dd。
|
||||
|
||||
> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
|
||||
|
||||
现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
|
||||
|
||||
- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
|
||||
|
||||
- 块级元素：所有的容器级标签都是块级元素，还有p标签。
|
||||
|
||||
我们把上面的分类画一个图，即可一目了然：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 行内元素和块级元素的相互转换
|
||||
|
||||
我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
|
||||
|
||||
#### 块级元素可以转换为行内元素：
|
||||
|
||||
一旦，给一个块级元素（比如div）设置：
|
||||
|
||||
```
|
||||
display: inline;
|
||||
```
|
||||
|
||||
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
|
||||
|
||||
- 此时这个div不能设置宽度、高度；
|
||||
- 此时这个div可以和别人并排了。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
#### 行内元素转换为块级元素：
|
||||
|
||||
同样的道理，一旦给一个行内元素（比如span）设置：
|
||||
|
||||
```
|
||||
display: block;
|
||||
```
|
||||
|
||||
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
|
||||
|
||||
- 此时这个span能够设置宽度、高度
|
||||
- 此时这个span必须霸占一行了，别人无法和他并排
|
||||
- 如果不设置宽度，将撑满父亲
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
|
||||
|
||||
|
||||
css中一共有三种手段，使一个元素脱离标准文档流：
|
||||
|
||||
- （1）浮动
|
||||
- （2）绝对定位
|
||||
- （3）固定定位
|
||||
|
||||
这便引出我们今天要讲的内容：浮动。
|
||||
|
||||
|
||||
## 浮动的性质
|
||||
|
||||
> 浮动是css里面布局用的最多的属性。
|
||||
|
||||
现在有两个div，分别设置宽高。我们知道，它们的效果如下：
|
||||
|
||||
|
||||
|
||||
此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
|
||||
|
||||
|
||||
|
||||
这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
|
||||
|
||||
浮动想学好，一定要知道三个性质。接下来讲一讲。
|
||||
|
||||
### 性质1：浮动的元素脱标
|
||||
|
||||
脱标即脱离标准流。我们来看几个例子。
|
||||
|
||||
证明1：
|
||||
|
||||
|
||||
|
||||
上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`<div>`标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个`<div>`还在自己的层面上遵从标准流进行排列。
|
||||
|
||||
证明2：
|
||||
|
||||
|
||||
|
||||
上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
|
||||
|
||||
所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。
|
||||
|
||||
|
||||
### 性质2：浮动的元素互相贴靠
|
||||
|
||||
我们来看一个例子就明白了。
|
||||
|
||||
我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
|
||||
如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
|
||||
|
||||
不过3号自己去贴墙的时候，注意：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，3号贴左墙的时候，并不会往1号里面挤。
|
||||
|
||||
同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。
|
||||
|
||||
|
||||
### 性质3：浮动的元素有“字围”效果
|
||||
|
||||
来看一张图就明白了。我们让div浮动，p不浮动。
|
||||
|
||||
|
||||
|
||||
上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。
|
||||
|
||||
总结：**标准流中的文字不会被浮动的盒子遮挡住**。（文字就像水一样）
|
||||
|
||||
关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
|
||||
|
||||
|
||||
### 性质4：收缩
|
||||
|
||||
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩
|
||||
|
||||
|
||||
### 浮动的补充（做网站时注意）
|
||||
|
||||
|
||||
|
||||
|
||||
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 布置一个作业
|
||||
|
||||
布置一个作业，要求实现下面的效果：
|
||||
|
||||
|
||||
|
||||
|
||||
为实现上方效果，代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.header{
|
||||
width: 970px;
|
||||
height: 103px;
|
||||
/*居中。这个语句的意思是：居中：*/
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header .logo{
|
||||
float: left;
|
||||
width: 277px;
|
||||
height: 103px;
|
||||
background-color: red;
|
||||
}
|
||||
.header .language{
|
||||
float: right;
|
||||
width: 137px;
|
||||
height: 49px;
|
||||
background-color: green;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.header .nav{
|
||||
float: right;
|
||||
width: 679px;
|
||||
height: 46px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.content{
|
||||
width: 970px;
|
||||
height: 435px;
|
||||
/*居中，这个语句今天没讲，你照抄，就是居中：*/
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.content .banner{
|
||||
float: left;
|
||||
width: 310px;
|
||||
height: 435px;
|
||||
background-color: gold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.content .rightPart{
|
||||
float: left;
|
||||
width: 650px;
|
||||
height: 435px;
|
||||
}
|
||||
.content .rightPart .main{
|
||||
width: 650px;
|
||||
height: 400px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content .rightPart .links{
|
||||
width: 650px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
.content .rightPart .main .news{
|
||||
float: left;
|
||||
width: 450px;
|
||||
height: 400px;
|
||||
}
|
||||
.content .rightPart .main .hotpic{
|
||||
float: left;
|
||||
width: 190px;
|
||||
height: 400px;
|
||||
background-color: purple;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.content .rightPart .main .news .news1{
|
||||
width: 450px;
|
||||
height: 240px;
|
||||
background-color: skyblue;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content .rightPart .main .news .news2{
|
||||
width: 450px;
|
||||
height: 110px;
|
||||
background-color: skyblue;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content .rightPart .main .news .news3{
|
||||
width: 450px;
|
||||
height: 30px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
.footer{
|
||||
width: 970px;
|
||||
height: 35px;
|
||||
background-color: pink;
|
||||
/*没学，就是居中：*/
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<div class="logo">logo</div>
|
||||
<div class="language">语言选择</div>
|
||||
<div class="nav">导航条</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div class="content">
|
||||
<div class="banner">大广告</div>
|
||||
<div class="rightPart">
|
||||
<div class="main">
|
||||
<div class="news">
|
||||
<div class="news1"></div>
|
||||
<div class="news2"></div>
|
||||
<div class="news3"></div>
|
||||
</div>
|
||||
<div class="hotpic"></div>
|
||||
</div>
|
||||
<div class="links"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页尾 -->
|
||||
<div class="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
其实，这个页面的布局是下面这个网站：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 浮动的清除
|
||||
|
||||
> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
|
||||
|
||||
### 前言
|
||||
|
||||
通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。
|
||||
|
||||
比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。
|
||||
|
||||
从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。
|
||||
|
||||
下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上面这个例子很简单。可如果我们给里面的`<li>`标签加浮动。效果却成了下面这个样子：
|
||||
|
||||
代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
|
||||
}
|
||||
li{
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: pink;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1">
|
||||
<ul>
|
||||
<li>生命壹号1</li>
|
||||
<li>生命壹号2</li>
|
||||
<li>生命壹号3</li>
|
||||
<li>生命壹号4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<ul>
|
||||
<li>许嵩1</li>
|
||||
<li>许嵩2</li>
|
||||
<li>许嵩3</li>
|
||||
<li>许嵩4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。
|
||||
|
||||
这便引出我们要讲的：清除浮动的第一种方式。
|
||||
那该怎么解决呢？
|
||||
|
||||
|
||||
### 方法1：给浮动元素的祖先元素加高度
|
||||
|
||||
|
||||
|
||||
造成前言中这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。
|
||||
|
||||
撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。
|
||||
|
||||
好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：
|
||||
|
||||
|
||||
|
||||
|
||||
给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：
|
||||
|
||||
|
||||
|
||||
**总结：**
|
||||
|
||||
**如果一个元素要浮动，那么它的祖先元素一定要有高度。**
|
||||
|
||||
**有高度的盒子，才能关住浮动**。（记住这句过来人的经验之语）
|
||||
|
||||
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法2：clear:both;
|
||||
|
||||
网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。
|
||||
|
||||
那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
|
||||
|
||||
这个时候，我们可以使用`clear:both;`这个属性。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
clear:both;
|
||||
```
|
||||
|
||||
clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思就是：**不允许左侧和右侧有浮动对象。**
|
||||
|
||||
这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**。读者可以试试看。
|
||||
|
||||
|
||||
margin失效的本质原因是：上图中的box1和box2，高度为零。
|
||||
|
||||
|
||||
|
||||
### 方法3：隔墙法
|
||||
|
||||
上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
|
||||
|
||||
|
||||
我们看看例子效果就知道了：
|
||||
|
||||
|
||||
|
||||
上图这个例子就是隔墙法。
|
||||
|
||||
|
||||
**内墙法：**
|
||||
|
||||
|
||||
近些年，有演化出了“内墙法”：
|
||||
|
||||
|
||||
|
||||
上面这个图非常重要，当作内墙法的公式，先记下来。
|
||||
|
||||
|
||||
为了讲内墙法，我们先记住一句重要的话：**一个父亲是不能被浮动的儿子撑出高度的**。举例如下：
|
||||
|
||||
（1）我们在一个div里放一个有宽高的p，效果如下：（很简单）
|
||||
|
||||
|
||||
|
||||
（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：
|
||||
|
||||
|
||||
|
||||
（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：
|
||||
|
||||
|
||||
|
||||
于是，我们采用内墙法解决前言中的问题：
|
||||
|
||||
|
||||
|
||||
与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。
|
||||
|
||||
而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。
|
||||
|
||||
|
||||
### 清除浮动方法4：overflow:hidden;
|
||||
|
||||
我们可以使用如下属性：
|
||||
|
||||
```
|
||||
overflow:hidden;
|
||||
```
|
||||
|
||||
|
||||
overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：
|
||||
|
||||
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。这是一个偏方。
|
||||
|
||||
举个例子：
|
||||
|
||||
|
||||
|
||||
|
||||
那么对于前言中的例子，我们同样可以使用这一属性：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 浮动清除的总结
|
||||
|
||||
|
||||
> 我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。
|
||||
|
||||
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。
|
||||
|
||||
### 1、加高法
|
||||
|
||||
工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
|
||||
|
||||
```html
|
||||
<div> //设置height
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div> //设置height
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### 2、`clear:both;`法
|
||||
|
||||
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
|
||||
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div> //clear:both;
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
|
||||
|
||||
|
||||
|
||||
### 3、隔墙法
|
||||
|
||||
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
|
||||
墙用自己的身体当做了间隙。
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div class="cl h10"></div>
|
||||
|
||||
<div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
|
||||
|
||||
内墙法：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<div class="cl h10"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
|
||||
|
||||
|
||||
### 4、`overflow:hidden;`
|
||||
|
||||
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
|
||||
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。
|
||||
并且,overflow:hidden;能够让margin生效。
|
||||
|
||||
|
||||
**清除浮动的例子：**
|
||||
|
||||
我们现在举个例子，要求实现下图中无序列表部分的效果：
|
||||
|
||||
|
||||
|
||||
对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul中不能插入div标签，因为ul中只能插入li，如果插入li的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁：
|
||||
|
||||
|
||||
|
||||
上方代码中，如果没有加`overflow:hidden;`，那么第二行的li会紧跟着第一行li的后面。
|
||||
|
||||
|
||||
## 浏览器的兼容性问题
|
||||
|
||||
|
||||
|
||||
> 讲一下上述知识点涉及到的浏览器兼容问题。
|
||||
|
||||
|
||||
### 兼容性1（微型盒子）
|
||||
|
||||
**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。
|
||||
|
||||
举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果：
|
||||
|
||||
|
||||
|
||||
解决办法很简单，就是将盒子的字号大小，设置为**小于盒子的高**，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下：
|
||||
|
||||
```
|
||||
height: 5px;
|
||||
_font-size: 0px;
|
||||
```
|
||||
|
||||
我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
|
||||
|
||||
|
||||
IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性。
|
||||
|
||||
|
||||
比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）
|
||||
|
||||
```
|
||||
height: 10px;
|
||||
_font-size:0;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 兼容性2
|
||||
|
||||
**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。
|
||||
|
||||
解决办法，以毒攻毒。追加一条：
|
||||
|
||||
```
|
||||
_zoom:1;
|
||||
```
|
||||
|
||||
完整写法：
|
||||
|
||||
```
|
||||
overflow: hidden;
|
||||
_zoom:1;
|
||||
```
|
||||
|
||||
实际上，`_zoom:1;`能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。
|
||||
|
||||
需要强调的是，`overflow:hidden;`的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是`overflow:hidden;`清除浮动的时候。
|
||||
|
||||
|
||||
**总结：**
|
||||
|
||||
我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。
|
||||
|
||||
属性1：
|
||||
|
||||
```
|
||||
height:6px;
|
||||
_font-size:0;
|
||||
```
|
||||
|
||||
属性2：
|
||||
|
||||
```
|
||||
overflow:hidden;
|
||||
_zoom:1;
|
||||
```
|
||||
|
||||
|
||||
## margin相关
|
||||
|
||||
> 我们来讲一下浮动中和margin相关的知识。
|
||||
|
||||
|
||||
### margin塌陷/margin重叠
|
||||
|
||||
|
||||
|
||||
**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
|
||||
|
||||
### 盒子居中`margin:0 auto;`
|
||||
|
||||
margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
|
||||
|
||||
```
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
```
|
||||
|
||||
盒子居中的简写为：
|
||||
|
||||
```
|
||||
margin:0 auto;
|
||||
```
|
||||
|
||||
对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。
|
||||
|
||||
注意：
|
||||
|
||||
- （1）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
|
||||
- （2）使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
|
||||
- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
|
||||
|
||||
对上面的第三条总结一下：（非常重要）
|
||||
|
||||
```
|
||||
margin:0 auto; //让这个div自己在大容器中的水平方向上居中。
|
||||
text-align: center; //让这个div内部的文本居中。
|
||||
```
|
||||
|
||||
顺便普及一下知识，text-align还有：
|
||||
|
||||
```
|
||||
text-align:left; //没啥用，因为默认居左
|
||||
text-align:right; //文本居右
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 善于使用父亲的padding，而不是儿子的margin
|
||||
|
||||
我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
|
||||
|
||||
```
|
||||
<div>
|
||||
<p></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
|
||||
|
||||
|
||||
|
||||
|
||||
此时我们给父亲div加一个border属性，就正常了：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
|
||||
|
||||
**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
|
||||
|
||||
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
|
||||
|
||||
|
||||
## 关于margin的IE6兼容问题
|
||||
|
||||
|
||||
### IE6的双倍margin的bug：
|
||||
|
||||
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
|
||||
|
||||
```
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
解决方案：
|
||||
|
||||
（1）使浮动的方向和margin的方向，相反。
|
||||
|
||||
所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
|
||||
|
||||
```
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
```
|
||||
|
||||
|
||||
|
||||
（2）使用hack：（没必要，别惯着这个IE6）
|
||||
|
||||
单独给队首的元素，写一个一半的margin：
|
||||
|
||||
```
|
||||
<li class="no1"></li>
|
||||
```
|
||||
|
||||
```
|
||||
ul li.no1{
|
||||
_margin-left:20px;
|
||||
}
|
||||
```
|
||||
|
||||
PS：双倍margin的问题，面试经常问哦。
|
||||
|
||||
|
||||
|
||||
### IE6的3px bug
|
||||
|
||||
|
||||
|
||||
解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。
|
||||
|
||||
|
||||
IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。
|
||||
|
||||
|
||||
|
||||
## Fireworks和others
|
||||
|
||||
### Fireworks
|
||||
|
||||
fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
|
||||
|
||||
标尺的快捷键：Ctrl + Alt+ R
|
||||
|
||||
|
||||
### others
|
||||
|
||||
|
||||
|
||||
首行缩进两个汉字：
|
||||
|
||||
```
|
||||
text-indent: 2em;
|
||||
```
|
||||
|
||||
上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
528
02-CSS基础/08-CSS属性：定位属性.md
Normal file
528
02-CSS基础/08-CSS属性：定位属性.md
Normal file
@@ -0,0 +1,528 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8296748.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
|
||||
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
|
||||
|
||||
```
|
||||
position: absolute; <!-- 绝对定位 -->
|
||||
|
||||
position: relative; <!-- 相对定位 -->
|
||||
|
||||
position: fixed; <!-- 固定定位 -->
|
||||
|
||||
```
|
||||
|
||||
下面逐一介绍。
|
||||
|
||||
## 相对定位
|
||||
|
||||
**相对定位**：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
|
||||
|
||||
我们之前学习的背景属性中，是通过如下格式：
|
||||
|
||||
```
|
||||
background-position:向右偏移量 向下偏移量;
|
||||
```
|
||||
|
||||
但这回的定位属性，是通过如下格式：
|
||||
|
||||
```
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
```
|
||||
|
||||
相对定位的举例：
|
||||
|
||||
```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">
|
||||
|
||||
body{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.div1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.div2{
|
||||
position: relative;/*相对定位：相对于自己原来的位置*/
|
||||
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
|
||||
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="div1">有生之年</div>
|
||||
<div class="div2">狭路相逢</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### 相对定位不脱标
|
||||
|
||||
**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。
|
||||
|
||||
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
|
||||
|
||||
### 相对定位的用途
|
||||
|
||||
如果想做“压盖”效果（把一个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;
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
如果要描述上面这张图的方向，我们可以首先可以这样描述：
|
||||
|
||||
```
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 100px;
|
||||
|
||||
```
|
||||
|
||||
因为`left: 200px`等价于`right: -200px`，所以这张图其实有四种写法。
|
||||
|
||||
## 绝对定位
|
||||
|
||||
**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
|
||||
|
||||
格式举例如下：
|
||||
|
||||
```
|
||||
position: absolute; /*绝对定位*/
|
||||
left: 10px; /*横坐标*/
|
||||
top/bottom: 20px; /*纵坐标*/
|
||||
```
|
||||
|
||||
### 绝对定位脱标
|
||||
|
||||
**绝对定位的盒子脱离了标准文档流。**
|
||||
|
||||
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
|
||||
|
||||
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。
|
||||
|
||||
### 绝对定位的参考点（重要）
|
||||
|
||||
（1）如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角：
|
||||
|
||||
|
||||
|
||||
（2）如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角：
|
||||
|
||||
|
||||
|
||||
为了理解“**首屏**”二字的含义，我们来看一下动态图：
|
||||
|
||||
|
||||
|
||||
问题：
|
||||
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
|
||||
|
||||
|
||||
|
||||
### 以盒子为参考点
|
||||
|
||||
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
|
||||
|
||||
如下：（子绝父相）
|
||||
|
||||
|
||||
|
||||
以下几点需要注意。
|
||||
|
||||
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
|
||||
|
||||
```
|
||||
<div class="box1"> 相对定位
|
||||
<div class="box2"> 没有定位
|
||||
<p></p> 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
再比如：
|
||||
|
||||
```
|
||||
<div class="box1"> 相对定位
|
||||
<div class="box2"> 相对定位
|
||||
<p></p> 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
|
||||
|
||||
子绝父绝、**子绝父相**、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
|
||||
|
||||
**工程应用：**
|
||||
|
||||
“**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
|
||||
|
||||
> 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
|
||||
|
||||
（3）绝对定位的儿子，无视参考的那个盒子的padding：
|
||||
|
||||
下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，
|
||||
p将无视父亲的padding，在border内侧为参考点，进行定位：
|
||||
|
||||
|
||||
|
||||
**工程应用：**
|
||||
|
||||
绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
|
||||
|
||||
现在有如下两张图片素材：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
要求作出如下效果：
|
||||
|
||||
|
||||
|
||||
代码实现如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
.box{
|
||||
margin: 100px;
|
||||
width: 308px;
|
||||
height: 307px;
|
||||
border: 1px solid #FF7E00;
|
||||
position: relative; /*子绝父相*/
|
||||
|
||||
}
|
||||
.box .image img{
|
||||
width: 308px;
|
||||
height: 196px;
|
||||
}
|
||||
.box .dtc{
|
||||
display: block; /*转为块级元素，才能设置span的宽高*/
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
background-image: url(http://img.smyhvae.com/20180116_1115.png);
|
||||
background-position: -108px 0px; /*这里用到了精灵图*/
|
||||
position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/
|
||||
top: -9px;
|
||||
left: 13px;
|
||||
}
|
||||
.box h4{
|
||||
background-color: black;
|
||||
color: white;
|
||||
width:308px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
top: 156px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<span class="dtc"></span>
|
||||
<div class="image">
|
||||
<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
|
||||
</div>
|
||||
<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h3>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释如下：
|
||||
|
||||
- 为了显示“多套餐”那个小图，我们需要用到精灵图。
|
||||
|
||||
- “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。
|
||||
|
||||
代码的效果如下：
|
||||
|
||||
|
||||
|
||||
### 让绝对定位中的盒子在父亲里居中
|
||||
|
||||
我们知道，如果想让一个**标准流中的盒子在父亲里居中**（水平方向看），可以将其设置`margin: 0 auto`属性。
|
||||
|
||||
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
|
||||
|
||||
```
|
||||
div {
|
||||
width: 600px;
|
||||
height: 60px;
|
||||
position: absolute; 绝对定位的盒子
|
||||
left: 50%; 首先，让左边线居中
|
||||
top: 0;
|
||||
margin-left: -300px; 然后，向左移动宽度（600px）的一半
|
||||
}
|
||||
```
|
||||
|
||||
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
|
||||
|
||||
|
||||
|
||||
我们可以总结成一个公式：
|
||||
|
||||
> left:50%; margin-left:负的宽度的一半
|
||||
|
||||
## 固定定位
|
||||
|
||||
**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
|
||||
|
||||
备注：IE6不兼容。
|
||||
|
||||
**用途1**：网页右下角的“返回到顶部”
|
||||
|
||||
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
|
||||
|
||||
```html
|
||||
<style type="text/css">
|
||||
.backtop{
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: gray;
|
||||
text-align: center;
|
||||
line-height:30px;
|
||||
color:white;
|
||||
text-decoration: none; /*去掉超链接的下划线*/
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**用途2：**顶部导航条
|
||||
|
||||
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
|
||||
|
||||
需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
|
||||
|
||||
顶部导航条的实现如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/*为什么要写这个？*/
|
||||
/*不希望我们的页面被nav挡住*/
|
||||
padding-top: 60px;
|
||||
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
|
||||
_padding-top:0;
|
||||
}
|
||||
.nav{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #333;
|
||||
z-index: 99999999;
|
||||
}
|
||||
.inner_c{
|
||||
width: 1000px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
.inner_c ul{
|
||||
list-style: none;
|
||||
}
|
||||
.inner_c ul li{
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
.inner_c ul li a{
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
color:white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.inner_c ul li a:hover{
|
||||
background-color: gold;
|
||||
}
|
||||
p{
|
||||
font-size: 30px;
|
||||
}
|
||||
.btn{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
background-color: orange;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<div class="inner_c">
|
||||
<ul>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
<li><a href="#">网页栏目</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
### 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在下层）
|
||||
|
||||
|
||||
|
||||
现在加一个`z-index`属性，要求效果如下：
|
||||
|
||||
|
||||
|
||||
第五条分析：
|
||||
|
||||
|
||||
|
||||
|
||||
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。
|
||||
|
||||
|
||||
**层级：**
|
||||
|
||||
（1）必须有定位（除去static）
|
||||
|
||||
（2）用`z-index`来控制层级数。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
508
02-CSS基础/09-CSS案例讲解：博雅互动.md
Normal file
508
02-CSS基础/09-CSS案例讲解：博雅互动.md
Normal file
@@ -0,0 +1,508 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动](http://www.boyaa.com/)的官网首页举例。
|
||||
|
||||
### 版心
|
||||
|
||||
首页的**版心**如下：
|
||||
|
||||
|
||||
|
||||
这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
|
||||
|
||||
比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
|
||||
|
||||
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
|
||||
|
||||
|
||||
### 网页的结构
|
||||
|
||||
从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
|
||||
|
||||
|
||||
|
||||
## 导航栏的制作
|
||||
|
||||
在此我们只讲基础知识的使用，不涉及浏览器的优化。
|
||||
|
||||
|
||||
`class==header`这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为`class=inner_c`，c指的是center。
|
||||
|
||||
`class=inner_c`不需要给高，因为它可以被内容撑高。
|
||||
|
||||
现在我们需要在`class=inner_c`里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
|
||||
|
||||
|
||||
|
||||
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
|
||||
|
||||
我们最好把「加入我们」这个超链接`<a>`放到`div`里，然后设置div的margin和padding，而不是直接设置`<a>`的边距。
|
||||
|
||||
我们起个名字叫`class=jrwm`是没有问题的，这在工作当中很常见，如果写成`class=join_us`反倒很别扭。
|
||||
|
||||
暂时我们的做法是：
|
||||
|
||||
- （1）给`class=jrwm_box`这个div里放一个`class=jrwm`的div。`class=jrwm`用来放绿色的背景图片。
|
||||
- （2）在`class=jrwm`里放一个超链接，并将超链接转为块级元素。
|
||||
|
||||
最终，导航栏的代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
body{
|
||||
font-size: 14px;
|
||||
font-family: "Microsoft YaHei","SimSun";
|
||||
height: 8888px;
|
||||
}
|
||||
.header{
|
||||
height: 58px;
|
||||
background-color: #191D3A;
|
||||
}
|
||||
/*版心*/
|
||||
.inner_c{
|
||||
width: 1000px;
|
||||
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
|
||||
}
|
||||
/*导航条的logo*/
|
||||
.header .logo{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.header .nav{
|
||||
float: left;
|
||||
}
|
||||
.header .nav ul{
|
||||
list-style: none; /*去掉列表前面的圆点*/
|
||||
}
|
||||
.header .nav ul li{
|
||||
float: left;
|
||||
width: 100px;
|
||||
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
|
||||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||||
}
|
||||
.header .nav ul li.last{
|
||||
border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
|
||||
}
|
||||
.header .nav ul li a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
height: 58px;
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color:#818496;
|
||||
text-align: center; /*让这个div内部的文本居中*/
|
||||
}
|
||||
.header .nav ul li a.current{
|
||||
color:white;
|
||||
background: #252947;
|
||||
}
|
||||
.header .nav ul li a:hover{
|
||||
color: white;
|
||||
background: #252947;
|
||||
}
|
||||
|
||||
.header .jrwm_box{
|
||||
float: left;
|
||||
height: 58px;
|
||||
width: 100px;
|
||||
padding-left: 48px;
|
||||
padding-top: 12px;
|
||||
|
||||
}
|
||||
/*放背景图片的div*/
|
||||
.header .jrwm_box .jrwm{
|
||||
height: 34px;
|
||||
background-image: url(images/jrwm.png);
|
||||
background-repeat: no-repeat;
|
||||
text-align: center; /*让这个div内部的超链接居中*/
|
||||
}
|
||||
.header .jrwm_box .jrwm a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="inner_c">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png " alt="">
|
||||
</div>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#" class="current">首页</a></li>
|
||||
<li><a href="#">博雅游戏</a></li>
|
||||
<li><a href="#">博雅新闻</a></li>
|
||||
<li><a href="#">关于我们</a></li>
|
||||
<li><a href="#">客服中心</a></li>
|
||||
<li class="last"><a href="#">投资者关系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jrwm_box">
|
||||
<div class="jrwm">
|
||||
<a href="https://www.google.com/" target="_blank">加入我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
导航栏的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## banenr图
|
||||
|
||||
> 因为涉及到 js 的内容，这里先不讲内容区域**轮播图**的效果。
|
||||
|
||||
我们首先在导航条和banner图之间加一道墙，即`class=cl`，然后采用隔墙法对其设置`clear: both;`的属性。
|
||||
|
||||
|
||||
然后设置banner的背景图片属性，添加banner图。
|
||||
|
||||
|
||||
## 内容区域的制作
|
||||
|
||||
导航栏+banner+内容区域的完整代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*清除浮动的影响*/
|
||||
.cl{
|
||||
clear: both;
|
||||
}
|
||||
body{
|
||||
font-size: 14px;
|
||||
font-family: "Microsoft YaHei","SimSun";
|
||||
height: 8888px;
|
||||
}
|
||||
.header{
|
||||
height: 58px;
|
||||
background-color: #191D3A;
|
||||
}
|
||||
/*版心*/
|
||||
.inner_c{
|
||||
width: 1000px;
|
||||
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
|
||||
}
|
||||
/*导航条的logo*/
|
||||
.header .logo{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.header .nav{
|
||||
float: left;
|
||||
}
|
||||
.header .nav ul{
|
||||
list-style: none; /*去掉列表前面的圆点*/
|
||||
}
|
||||
.header .nav ul li{
|
||||
float: left;
|
||||
width: 100px;
|
||||
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
|
||||
border-left: 1px solid #252947; /*每个li之间有间隔线*/
|
||||
}
|
||||
.header .nav ul li.last{
|
||||
border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
|
||||
}
|
||||
.header .nav ul li a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
height: 58px;
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color:#818496;
|
||||
text-align: center; /*让这个div内部的文本居中*/
|
||||
}
|
||||
.header .nav ul li a.current{
|
||||
color:white;
|
||||
background: #252947;
|
||||
}
|
||||
.header .nav ul li a:hover{
|
||||
color: white;
|
||||
background: #252947;
|
||||
}
|
||||
|
||||
.header .jrwm_box{
|
||||
float: left;
|
||||
height: 58px;
|
||||
width: 100px;
|
||||
padding-left: 48px;
|
||||
padding-top: 12px;
|
||||
|
||||
}
|
||||
/*放背景图片的div*/
|
||||
.header .jrwm_box .jrwm{
|
||||
height: 34px;
|
||||
background-image: url(images/jrwm.png);
|
||||
background-repeat: no-repeat;
|
||||
text-align: center; /*让这个div内部的超链接居中*/
|
||||
}
|
||||
.header .jrwm_box .jrwm a{
|
||||
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
|
||||
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
|
||||
text-decoration: none; /*去掉超链的下划线*/
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner{
|
||||
height: 465px;
|
||||
background: url(images/banner.jpg) no-repeat center top;
|
||||
}
|
||||
.content{
|
||||
padding-top: 50px;
|
||||
}
|
||||
.content .product{
|
||||
height: 229px;
|
||||
border-bottom: 1px solid #DBE1E7;
|
||||
}
|
||||
.content .product ul{
|
||||
list-style: none;
|
||||
}
|
||||
.content .product ul li{
|
||||
float: left;
|
||||
width: 218px;
|
||||
margin-right: 43px;
|
||||
}
|
||||
.content .product ul li.last{
|
||||
margin-right: 0;
|
||||
width: 217px;
|
||||
}
|
||||
.content .product ul li img{
|
||||
width: 218px;
|
||||
height: 130px;
|
||||
}
|
||||
.content .product ul li.last img{
|
||||
width: 217px;
|
||||
}
|
||||
|
||||
.content .product ul li h3{
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content .product ul li p.djbf{
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
}
|
||||
.content .product ul li p.djbf a{
|
||||
font-size: 12px;
|
||||
color:#38B774;
|
||||
text-decoration: none;
|
||||
background:url(images/sanjiaoxing.png) no-repeat right 5px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="inner_c">
|
||||
<div class="logo">
|
||||
<img src="images/logo.png " alt="">
|
||||
</div>
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="#" class="current">首页</a></li>
|
||||
<li><a href="#">博雅游戏</a></li>
|
||||
<li><a href="#">博雅新闻</a></li>
|
||||
<li><a href="#">关于我们</a></li>
|
||||
<li><a href="#">客服中心</a></li>
|
||||
<li class="last"><a href="#">投资者关系</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jrwm_box">
|
||||
<div class="jrwm">
|
||||
<a href="https://www.google.com/" target="_blank">加入我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在导航条和banner之间隔一堵墙 -->
|
||||
<div class="cl"></div>
|
||||
|
||||
<div class="banner"></div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content inner_c">
|
||||
<div class="product">
|
||||
<ul>
|
||||
<li>
|
||||
<p><img src="images/pro1.jpg" alt="" /></p>
|
||||
<h3>BPT宣传片</h3>
|
||||
<p class="djbf">
|
||||
<a href="#">点击播放</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><img src="images/pro2.jpg" alt="" /></p>
|
||||
<h3>BPT宣传片</h3>
|
||||
<p class="djbf">
|
||||
<a href="#">点击播放</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><img src="images/pro3.jpg" alt="" /></p>
|
||||
<h3>BPT宣传片</h3>
|
||||
<p class="djbf">
|
||||
<a href="#">点击播放</a>
|
||||
</p>
|
||||
</li>
|
||||
<li class="last">
|
||||
<p><img src="images/pro4.jpg" alt="" /></p>
|
||||
<h3>BPT宣传片</h3>
|
||||
<p class="djbf">
|
||||
<a href="#">点击播放</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
|
||||
（1）导航栏，左侧的logo：
|
||||
|
||||
**错误的写法：**
|
||||
|
||||
可能会有人直接将img标签作为logo的布局：
|
||||
|
||||
|
||||
```html
|
||||
<div class="logo">
|
||||
<img src="images/logo.png " alt="">
|
||||
</div>
|
||||
```
|
||||
|
||||
然后将img的样式设置为：
|
||||
|
||||
```css
|
||||
.header .logo{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。
|
||||
|
||||
**正确的写法：**
|
||||
|
||||
正确的写法是将超链接作为logo的布局，里面放入文字（文字可以被SEO）：
|
||||
|
||||
```html
|
||||
<h1 class="logo">
|
||||
<a href="#">
|
||||
博雅互动-世界上最好的游戏公司
|
||||
</a>
|
||||
</h1>
|
||||
```
|
||||
|
||||
|
||||
然后将**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）内容区域，“点击播放”右侧的小三角形：
|
||||
|
||||
|
||||
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
代码截取如下：
|
||||
|
||||
|
||||
|
||||
```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+内容区域的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
125
02-CSS基础/10-CSS的一些小知识.md
Normal file
125
02-CSS基础/10-CSS的一些小知识.md
Normal file
@@ -0,0 +1,125 @@
|
||||
|
||||
|
||||
|
||||
## 隐藏盒子的几种方式
|
||||
|
||||
隐藏盒子，有以下几种方式：
|
||||
|
||||
（1）方式一：
|
||||
|
||||
```
|
||||
overflow：hidden; //隐藏盒子超出的部分
|
||||
```
|
||||
|
||||
|
||||
（2）**方式二**：
|
||||
|
||||
```
|
||||
display: none; 隐藏盒子，而且不占位置(用的最多)
|
||||
```
|
||||
|
||||
比如，点击`X`，关闭京东首页上方的广告栏。
|
||||
|
||||
（3）方式三：
|
||||
|
||||
```
|
||||
visibility: hidden; //隐藏盒子，占位置。
|
||||
visibility: visible; //让盒子重新显示
|
||||
|
||||
```
|
||||
|
||||
（4）方式四：
|
||||
|
||||
```
|
||||
pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置
|
||||
```
|
||||
|
||||
|
||||
（4）方式五：
|
||||
|
||||
```
|
||||
Position/top/left/...-999px //把盒子移得远远的，占位置。
|
||||
```
|
||||
|
||||
（5）方式六：
|
||||
|
||||
```
|
||||
margin-left: 1000px;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 设置盒子的半透明
|
||||
|
||||
方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明
|
||||
|
||||
|
||||
方式二：css3的技术来解决半透明。如下：
|
||||
|
||||
- background: rgba(0,0,0,0.3);
|
||||
|
||||
- background: rgba(0,0,0,.3);
|
||||
|
||||
备注：`a`指的是alpha透明度。
|
||||
|
||||
|
||||
### 给标签的形状设置为圆角矩形
|
||||
|
||||
```
|
||||
border-radius: 50%;
|
||||
border-radius: 10px 0 0 10px;
|
||||
```
|
||||
|
||||
|
||||
### 行高的问题：儿子把父亲撑开
|
||||
|
||||
比如对于下面这样的标签：
|
||||
|
||||
```
|
||||
<div>
|
||||
<a href=""></a>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
|
||||
前置条件：如果我们给父亲div的行高设为31px，然后给儿子a的行高也设置为31
|
||||
|
||||
结果：当我们给儿子a设置了字体属性之后，会发现，父亲被撑高为32px了。因为font字体自身会比较大，多撑出了一个像素。
|
||||
|
||||
解决办法：**行内元素尽量不要设置font属性**。对于行内元素而言，如果它和父亲都设置了行高，就不要去给自己设置font属性了。要么就，不要同时设置行高。
|
||||
|
||||
|
||||
### 背景图不能撑开盒子
|
||||
|
||||
高和行高都可以城开盒子，但背景图不能撑开盒子。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## JS
|
||||
|
||||
### 超链接`<a>`的href跳转
|
||||
|
||||
一个空白的超链接如下：
|
||||
|
||||
```
|
||||
<a href=""></a>
|
||||
```
|
||||
|
||||
当点击超链接时，由于 href 的属性值的不同，可以产生很多种情况：
|
||||
|
||||
```bash
|
||||
href="" //刷新页面
|
||||
|
||||
href="#" //跳转到当前页面的顶部（不会刷新）
|
||||
|
||||
href="javascript:void(0)" // 什么都不做
|
||||
|
||||
href="javascript:;" // 什么都不做
|
||||
|
||||
```
|
||||
|
||||
500
02-CSS基础/11-CSS3选择器详解.md
Normal file
500
02-CSS基础/11-CSS3选择器详解.md
Normal file
@@ -0,0 +1,500 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8426799.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## CSS3介绍
|
||||
|
||||
CSS3在CSS2基础上，**增强**或**新增**了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
|
||||
|
||||
### CSS3的现状
|
||||
|
||||
- 浏览器支持程度不够好，有些需要添加**私有前缀**
|
||||
|
||||
- 移动端支持优于PC端
|
||||
|
||||
- 不断改进中
|
||||
|
||||
- 应用相对广泛
|
||||
|
||||
### 应对的策略：渐进增强
|
||||
|
||||
- （1）坚持**渐进增强**的原则：**让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好**。【重要】
|
||||
|
||||
比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。
|
||||
|
||||
- （2）考虑用户群体。
|
||||
|
||||
- （3）遵照产品的方案。
|
||||
|
||||
参考链接：
|
||||
|
||||
- [渐进增强 VS 优雅降级 | 简书](https://www.jianshu.com/p/d313f1108862)
|
||||
|
||||
- [渐进增强和优雅降级之间的不同（面试题目）](https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html)
|
||||
|
||||
### 浏览器的版本问题
|
||||
|
||||
由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：
|
||||
|
||||
- Chrome浏览器 version 46+
|
||||
|
||||
- Firefox浏览器 firefox 42+
|
||||
|
||||
### 如何使用手册
|
||||
|
||||
CSS参考手册的网址：<http://css.doyoe.com/>
|
||||
|
||||
CSS参考手册的下载链接：<http://download.csdn.net/download/smyhvae/10243974>
|
||||
|
||||
在查看[CSS参考手册](http://download.csdn.net/download/smyhvae/10243974)时，需要注意以下符号：
|
||||
|
||||
|
||||
|
||||
比如说，`{1,4}`表示可以设置一至四个参数。
|
||||
|
||||
下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。
|
||||
|
||||
## CSS3 选择器
|
||||
|
||||
我们之前学过 CSS 的选择器，比如：
|
||||
|
||||
```
|
||||
div 标签选择器
|
||||
|
||||
.box 类名选择器
|
||||
|
||||
#box id选择器
|
||||
|
||||
div p 后代选择器
|
||||
|
||||
div.box 交集选择器
|
||||
|
||||
div,p,span 并集选择器
|
||||
|
||||
div>p 子代选择器
|
||||
|
||||
* : 通配符
|
||||
|
||||
div+p: 选中div后面相邻的第一个p
|
||||
|
||||
div~p: 选中的div后面所有的p
|
||||
|
||||
```
|
||||
|
||||
CSS3新增了许多**灵活**查找元素的方法，极大的提高了查找元素的效率和**精准度**。CSS3选择器与 jQuery 中所提供的**绝大部分**选择器兼容。
|
||||
|
||||
### 属性选择器
|
||||
|
||||
属性选择器的标志性符号是 `[]`。
|
||||
|
||||
匹配含义：
|
||||
|
||||
```
|
||||
^：开头 $：结尾 *：包含
|
||||
```
|
||||
|
||||
格式：
|
||||
|
||||
- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
|
||||
|
||||
- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。
|
||||
|
||||
- `E[attr~=val]` 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
|
||||
|
||||
- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
|
||||
|
||||
- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
|
||||
|
||||
- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
|
||||
|
||||
- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
|
||||
|
||||
比如说，我们用属性选择器去匹配标签的className，是非常方便的。
|
||||
|
||||
这里我们用class属性来举例。代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>选择器 - 属性</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: '微软雅黑';
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrapper > section {
|
||||
min-height: 300px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 1px 1px 4px #DDD;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.wrapper > header {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.wrapper section > header {
|
||||
line-height: 1;
|
||||
padding: 10px;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.wrapper .wrap-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form input[type="text"] {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
form input[type="password"] {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.attr1 {
|
||||
|
||||
}
|
||||
|
||||
.download {
|
||||
}
|
||||
|
||||
.attr1 a[href="./a.rmvb"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.attr1 a[href="./b.rmvb"] {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
/* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
|
||||
.attr2 a[class~="download"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
|
||||
.attr3 a[class|="download"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
|
||||
.attr4 a[class*="download"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
|
||||
.attr5 a[class^="download"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
|
||||
.attr6 a[class$="download"] {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>CSS3-属性选择器</header>
|
||||
<section>
|
||||
<header>简介</header>
|
||||
<div class="wrap-box">
|
||||
<form action="">
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
姓名: <input type="text">
|
||||
</li>
|
||||
<li>
|
||||
密码: <input type="password">
|
||||
</li>
|
||||
|
||||
<li>
|
||||
性别: <input type="radio">男
|
||||
<input type="radio"> 女
|
||||
</li>
|
||||
<li>
|
||||
兴趣: <input type="checkbox" name="" id="">写代码
|
||||
</li>
|
||||
<li>
|
||||
<input type="submit" value="提交">
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr1">
|
||||
<header>E[attr]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download download-movie">下载</a>
|
||||
<a href="./b.rmvb" class="download download-movie">下载</a>
|
||||
<a href="./a.mp3" class="download download-music">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr2">
|
||||
<header>E[attr~=attr]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download download-movie">下载</a>
|
||||
<a href="./b.rmvb" class="download download-movie">下载</a>
|
||||
<a href="./a.mp3" class="download download-music">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr3">
|
||||
<header>E[attr|=attr]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download">下载</a>
|
||||
<a href="./b.rmvb" class="download-movie">下载</a>
|
||||
<a href="./a.mp3" class="download-music">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr4">
|
||||
<header>E[attr*=val]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download">下载</a>
|
||||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr5">
|
||||
<header>E[attr^=val]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download">下载</a>
|
||||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attr6">
|
||||
<header>E[attr$=val]</header>
|
||||
<div class="wrap-box">
|
||||
<a href="./a.rmvb" class="download">下载</a>
|
||||
<a href="./b.rmvb" class="moviedownload">下载</a>
|
||||
<a href="./a.mp3" class="downloadmusic">下载</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
最后来张表格：
|
||||
|
||||
|
||||
|
||||
### 结构伪类选择器
|
||||
|
||||
伪类选择器的标志性符号是 `:`。
|
||||
|
||||
CSS中有一些伪类选择器，比如`:link`、`:active`、`:visited`、`:hover`，这些是动态伪类选择器。
|
||||
|
||||
CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的**结构伪类选择器**：即通过**结构**来进行筛选。
|
||||
|
||||
|
||||
**1、格式：（第一部分）**
|
||||
|
||||
- `E:first-child` 匹配父元素的第一个子元素E。
|
||||
|
||||
- `E:last-child` 匹配父元素的最后一个子元素E。
|
||||
|
||||
- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
|
||||
|
||||
- `E:nth-child(odd)` 匹配奇数
|
||||
|
||||
- `E:nth-child(even)` 匹配偶数
|
||||
|
||||
- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
|
||||
|
||||
理解：
|
||||
|
||||
（1）这里我们要好好理解**父元素**的含义，它指的是：以 E 元素的父元素为参考。
|
||||
|
||||
（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的`E:nth-child(n)`的示例。我们可以理解成：**先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效**。
|
||||
|
||||
（3）另外，`E:nth-child(n)`这个属性也很有意思。比如，针对下面这样一组标签：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
<li>10</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
上方代码中：
|
||||
|
||||
- 如果选择器写成`li:nth-child(2)`，则表示第2个 `li`。
|
||||
|
||||
- 如果选择器写成`li:nth-child(n)`，则表示**所有的**`li`。因为此时的 `n` 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的）
|
||||
|
||||
- 如果选择器写成`li:nth-child(2n)`，则表示所有的**第偶数个** li。
|
||||
|
||||
- 如果选择器写成`li:nth-child(2n+1)`，则表示所有的**第奇数个** li。
|
||||
|
||||
- 如果选择器写成`li:nth-child(-n+5)`，则表示**前5个** li。
|
||||
|
||||
- 如果选择器写成`li:nth-last-child(-n+5)`，则表示**最后5个** li。
|
||||
|
||||
- 如果选择器写成`li:nth-child(7n)`，则表示选中7的倍数。。
|
||||
|
||||
上面列举的选择器中，我们只要记住： `n` 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
|
||||
|
||||
**2、格式：（第二部分）**
|
||||
|
||||
- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。
|
||||
|
||||
- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。
|
||||
|
||||
- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。
|
||||
|
||||
- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。
|
||||
|
||||
既然上面这几个选择器带有`type`，我们可以这样理解：先在同级里找到所有的E类型，然后根据 n 进行匹配。
|
||||
|
||||
|
||||
**3、格式：（第三部分）**
|
||||
|
||||
- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。
|
||||
|
||||
- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。
|
||||
|
||||
|
||||
**举例：**
|
||||
|
||||
我们可以把多个伪类选择器结合起来使用，比如：
|
||||
|
||||
|
||||
|
||||
|
||||
如果想把上图中，第一行的前三个 span 标红，我们可以这样使用结构伪类选择器：
|
||||
|
||||
```css
|
||||
dt:first-child span:nth-of-type(-n+3) {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
最后来张表格：
|
||||
|
||||
|
||||
|
||||
### 伪元素选择器
|
||||
|
||||
伪元素选择器的标志性符号是 `::`。
|
||||
|
||||
**1、格式：（第一部分）**
|
||||
|
||||
- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
|
||||
|
||||
- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
|
||||
|
||||
`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
/*::before 和::after 是通过 css 模拟出的html标签的效果*/
|
||||
span::before{
|
||||
content:"smyhvae";
|
||||
color:red;
|
||||
background-color: pink;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span::after{
|
||||
content:"永不止步";
|
||||
color:yellowgreen;
|
||||
}
|
||||
|
||||
/*给原本的span标签设置一个默认的属性*/
|
||||
span{
|
||||
border: 1px solid #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<span>生命壹号</span>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
**上图可以看出**：
|
||||
|
||||
- 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
|
||||
|
||||
- 通过这两个属性添加的伪元素，是**行内元素**，需要转换成块元素才能设置宽高。
|
||||
|
||||
**2、格式：（第二部分）**
|
||||
|
||||
- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
|
||||
|
||||
- `E::first-line` 设置元素 E 里面的**第一行**的样式。
|
||||
|
||||
- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
|
||||
|
||||
`E::first-letter` 的举例：
|
||||
|
||||
|
||||
|
||||
`E::first-line`的举例：
|
||||
|
||||
|
||||
|
||||
最后来张表格：
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
861
02-CSS基础/12-CSS3属性详解（一）.md
Normal file
861
02-CSS基础/12-CSS3属性详解（一）.md
Normal file
@@ -0,0 +1,861 @@
|
||||
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 前言
|
||||
|
||||
我们在上一篇文章中学习了[CSS3的选择器](http://www.cnblogs.com/smyhvae/p/8426799.html)，本文来学一下CSS3的一些属性。
|
||||
|
||||
本文主要内容：
|
||||
|
||||
- 颜色
|
||||
|
||||
- 文本
|
||||
|
||||
- 盒模型中的 box-sizing 属性
|
||||
|
||||
- 处理兼容性问题：私有前缀
|
||||
|
||||
- 边框
|
||||
|
||||
- 背景属性
|
||||
|
||||
- 渐变
|
||||
|
||||
## 颜色
|
||||
|
||||
CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
|
||||
|
||||
RGBA、HSLA可应用于**所有**使用颜色的地方。
|
||||
|
||||
**RGBA 举例**：
|
||||
|
||||
```javascript
|
||||
background-color: rgba(0, 0, 255, 0.3);
|
||||
|
||||
border: 30px solid rgba(0, 255, 0, 0.3);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- RGBA 即：Red、Green、Blue、Alpha
|
||||
|
||||
- R、G、B 的取值范围是：0~255
|
||||
|
||||
**HSLA 举例**：
|
||||
|
||||
```javascript
|
||||
background-color: hsla(240,50%,50%,0.4);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
|
||||
|
||||
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
|
||||
|
||||
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
|
||||
|
||||
- `A` 透明度，取值范围 0~1。
|
||||
|
||||
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
|
||||
|
||||
|
||||
|
||||
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
|
||||
|
||||
**关于设置透明度的其他方式：**
|
||||
|
||||
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
|
||||
|
||||
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
|
||||
|
||||
|
||||
## 文本
|
||||
|
||||
### text-shadow：设置文本的阴影
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
text-shadow: 20px 27px 22px pink;
|
||||
```
|
||||
|
||||
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
|
||||
|
||||
效果举例：
|
||||
|
||||
|
||||
|
||||
### 举例：凹凸文字效果
|
||||
|
||||
text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
|
||||
|
||||
代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 100px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: "Microsoft Yahei";
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
|
||||
.tu {
|
||||
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
.ao {
|
||||
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ao">生命壹号</div>
|
||||
<div class="tu">生命壹号</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。
|
||||
|
||||
|
||||
## 盒模型中的 box-sizing 属性
|
||||
|
||||
我们在**[之前的文章](http://www.cnblogs.com/smyhvae/p/7256371.html)**中专门讲过盒子模型。
|
||||
|
||||
CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽度和高度的计算方式**。
|
||||
|
||||
这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`。解释如下。
|
||||
|
||||
**外加模式：**（css的默认方式）
|
||||
|
||||
```javascript
|
||||
box-sizing: content-box;
|
||||
```
|
||||
|
||||
解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
|
||||
|
||||
|
||||
**内减模式：**【需要注意】
|
||||
|
||||
```javascript
|
||||
box-sizing: border-box;
|
||||
```
|
||||
|
||||
|
||||
解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
|
||||
|
||||
|
||||
## 处理兼容性问题：私有前缀
|
||||
|
||||
通过网址<http://caniuse.com/> 可以查询CSS3各特性的支持程度。
|
||||
|
||||
处理兼容性问题的常见方法：为属性添加**私有前缀**。
|
||||
|
||||
如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。
|
||||
|
||||
**私有前缀的举例**：
|
||||
|
||||
比如说，我想给指定的div设置下面这样一个属性：
|
||||
|
||||
```css
|
||||
background: linear-gradient(left, green, yellow);
|
||||
```
|
||||
|
||||
上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
|
||||
|
||||
如果直接这样写属性，是看不到效果的：
|
||||
|
||||
|
||||
|
||||
此时，我们可以**为浏览器添加不同的私有前缀**，属性就可以生效了。
|
||||
|
||||
格式如下：
|
||||
|
||||
```html
|
||||
-webkit-: 谷歌 苹果
|
||||
-moz-:火狐
|
||||
-ms-：IE
|
||||
-o-：欧朋
|
||||
```
|
||||
|
||||
格式举例如下：
|
||||
|
||||
```css
|
||||
background: -webkit-linear-gradient(left, green, yellow);
|
||||
background: -moz-linear-gradient(left, green, yellow);
|
||||
background: -ms-linear-gradient(left, green, yellow);
|
||||
background: -o-linear-gradient(left, green, yellow);
|
||||
background: linear-gradient(left, green, yellow);
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
## 边框
|
||||
|
||||
边框的属性很多，其中**边框圆角**和**边框阴影**这两个属性，应用十分广泛，兼容性也相对较好，且符合**渐进增强**的原则，需要重点熟悉。
|
||||
|
||||
### 边框圆角：`border-radius` 属性
|
||||
|
||||
边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
|
||||
|
||||
单个属性的写法：
|
||||
|
||||
```
|
||||
border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
|
||||
|
||||
border-top-right-radius: 60px 120px;
|
||||
|
||||
border-bottom-left-radius: 60px 120px;
|
||||
|
||||
border-bottom-right-radius: 60px 120px;
|
||||
|
||||
```
|
||||
|
||||
复合写法：
|
||||
|
||||
```
|
||||
border-radius: 60px/120px; //参数：水平半径/垂直半径
|
||||
|
||||
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
|
||||
|
||||
border-radius: 20px 60px;
|
||||
```
|
||||
|
||||
最简洁的写法：（四个角的半径都相同时）
|
||||
|
||||
```
|
||||
border-radius: 60px;
|
||||
```
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
.parent {
|
||||
width: 400px;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
border: 1px solid rgb(144, 12, 63);
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
font-size: 50px;
|
||||
background-color: rgb(255, 141, 26);
|
||||
|
||||
}
|
||||
|
||||
/*画圆形的方式一*/
|
||||
.box:nth-child(1) {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/*画圆形的方式二*/
|
||||
.box:nth-child(2) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.box:nth-child(3) {
|
||||
border-radius: 100px 0 0 0;
|
||||
}
|
||||
|
||||
.box:nth-child(4) {
|
||||
border-radius: 100px/50px;
|
||||
}
|
||||
|
||||
.box:nth-child(5) {
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.box:nth-child(6) {
|
||||
border-radius: 0 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="parent">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
<div class="box">4</div>
|
||||
<div class="box">5</div>
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
### 边框阴影：`box-shadow` 属性
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
|
||||
|
||||
box-shadow: 15px 21px 48px -2px #666;
|
||||
```
|
||||
|
||||
参数解释：
|
||||
|
||||
- 水平偏移：正值向右 负值向左。
|
||||
|
||||
- 垂直偏移：正值向下 负值向上。
|
||||
|
||||
- 模糊程度：不能为负值。
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：
|
||||
|
||||
```javascript
|
||||
box-shadow:3px 3px 3px 3px #666 inset;
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
20180207_2028.png
|
||||
|
||||
|
||||
**注意**：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
|
||||
|
||||
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。
|
||||
|
||||
### 边框图片
|
||||
|
||||
边框图片有以下属性：
|
||||
|
||||
```javascript
|
||||
/* 边框图片的路径*/
|
||||
border-image-source: url("images/border.png");
|
||||
|
||||
/* 图片边框的裁剪*/
|
||||
border-image-slice: 27;
|
||||
|
||||
/*图片边框的宽度*/
|
||||
border-image-width: 27px;
|
||||
|
||||
/*边框图片的平铺*/
|
||||
/* repeat :正常平铺 但是可能会显示不完整*/
|
||||
/*round: 平铺 但是保证 图片完整*/
|
||||
/*stretch: 拉伸显示*/
|
||||
border-image-repeat: stretch;
|
||||
```
|
||||
|
||||
我们也可以写成一个综合属性：
|
||||
|
||||
```javascript
|
||||
border-image: url("images/border.png") 27/20px round;
|
||||
```
|
||||
|
||||
这个属性要好好理解，我们假设拿下面这张图来作为边框图片：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这张图片将会被“切割”成**九宫格**形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
|
||||
|
||||
|
||||
|
||||
再具体一点：
|
||||
|
||||
|
||||
|
||||
|
||||
### 常见的边框图片汇总
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## 背景属性
|
||||
|
||||
背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
|
||||
|
||||
### 背景尺寸：`background-size`属性
|
||||
|
||||
`background-size`属性：设置背景图片的尺寸。
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
/* 宽、高的具体数值 */
|
||||
background-size: 500px 500px;
|
||||
|
||||
/* 宽高的百分比 */
|
||||
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
|
||||
|
||||
background-size: 100% auto; //这个属性可以自己试验一下。
|
||||
|
||||
/* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
|
||||
background-size: cover;
|
||||
|
||||
/* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。 */
|
||||
background-size: contain;
|
||||
```
|
||||
|
||||
这里我们对属性值 `cover` 和 `contain`进行再次强调：
|
||||
|
||||
- `cover`：会自动调整缩放比例，保证图片始终**填充满**背景区域，如有**溢出部分**则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。
|
||||
|
||||
- `contain`：会自动调整缩放比例，保证图片始终**完整显示**在背景区域。也就是说，保证背景图片最大化地在盒子里，**等比例**显示，但不保证能铺满盒子。
|
||||
|
||||
|
||||
### 背景原点：`background-origin` 属性
|
||||
|
||||
`background-origin` 属性：控制背景从什么地方开始显示。
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
|
||||
/* 从 padding-box 内边距开始显示背景图 */
|
||||
background-origin: padding-box; //默认值
|
||||
|
||||
/* 从 border-box 边框开始显示背景图 */
|
||||
background-origin: border-box;
|
||||
|
||||
/* 从 content-box 内容区域开始显示背景图 */
|
||||
background-origin: content-box;
|
||||
|
||||
```
|
||||
|
||||
如果属性值设置成了`border-box`，那边框部分也会显示图片哦。
|
||||
|
||||
如下图所示：
|
||||
|
||||
|
||||
|
||||
### 背景裁剪：`background-clip`属性
|
||||
|
||||
格式举例：
|
||||
|
||||
`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
|
||||
|
||||
- `border-box` 超出 border-box 的部分，将裁剪掉
|
||||
|
||||
- `padding-box` 超出 padding-box 的部分，将裁剪掉
|
||||
|
||||
- `content-box` 超出 content-box 的部分，将裁剪掉
|
||||
|
||||
假设现在有这样的属性设置：
|
||||
|
||||
|
||||
```javascript
|
||||
background-origin: border-box;
|
||||
|
||||
background-clip: content-box;
|
||||
```
|
||||
|
||||
上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。
|
||||
|
||||
### 同时设置多个背景
|
||||
|
||||
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.box {
|
||||
height: 416px;
|
||||
border: 1px solid #000;
|
||||
margin: 100px auto;
|
||||
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
|
||||
background: url(images/bg1.png) no-repeat left top,
|
||||
url(images/bg2.png) no-repeat right top,
|
||||
url(images/bg3.png) no-repeat right bottom,
|
||||
url(images/bg4.png) no-repeat left bottom,
|
||||
url(images/bg5.png) no-repeat center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
|
||||
|
||||
## 渐变
|
||||
|
||||
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
|
||||
|
||||
渐变分为：
|
||||
|
||||
- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
|
||||
|
||||
- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
|
||||
|
||||
- 重复渐变。
|
||||
|
||||
见下图：
|
||||
|
||||
|
||||
|
||||
注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
|
||||
|
||||
### 线性渐变
|
||||
|
||||
格式：
|
||||
|
||||
```javascript
|
||||
|
||||
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
|
||||
|
||||
background-image: linear-gradient(to right, yellow, green);
|
||||
```
|
||||
|
||||
参数解释：
|
||||
|
||||
- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
|
||||
|
||||
格式举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
margin: 10px auto;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
/* 语法：
|
||||
linear-gradient(方向，起始颜色，终止颜色);
|
||||
方向：to left to right to top to bottom 角度 30deg
|
||||
起始颜色
|
||||
终止颜色
|
||||
*/
|
||||
div:nth-child(1) {
|
||||
background-image: linear-gradient(to right, yellow, green);
|
||||
}
|
||||
|
||||
/* 不写方向，表示默认的方向是：从上往下 */
|
||||
div:nth-child(2) {
|
||||
background-image: linear-gradient(yellow, green);
|
||||
}
|
||||
|
||||
/* 方向可以指定角度 */
|
||||
div:nth-child(3) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: linear-gradient(135deg, yellow, green);
|
||||
}
|
||||
|
||||
/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
|
||||
div:nth-child(4) {
|
||||
background-image: linear-gradient(to right,
|
||||
yellow 0%,
|
||||
red 40%,
|
||||
green 70%,
|
||||
blue 100%);
|
||||
|
||||
}
|
||||
|
||||
/* 颜色之间，出现突变 */
|
||||
div:nth-child(5) {
|
||||
background-image: linear-gradient(45deg,
|
||||
yellow 0%,
|
||||
yellow 25%,
|
||||
blue 25%,
|
||||
blue 50%,
|
||||
red 50%,
|
||||
red 75%,
|
||||
green 75%,
|
||||
green 100%
|
||||
);
|
||||
}
|
||||
|
||||
div:nth-child(6) {
|
||||
background-image: linear-gradient(to right,
|
||||
#000 0%,
|
||||
#000 25%,
|
||||
#fff 25%,
|
||||
#fff 50%,
|
||||
#000 50%,
|
||||
#000 75%,
|
||||
#fff 75%,
|
||||
#fff 100%
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
**举例**：按钮
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS3 渐变</title>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f8fcd4;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 800px;
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*设置按钮基本样式*/
|
||||
.nav a {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: 1px solid #e59500;
|
||||
background-color: #FFB700;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
#FFB700 0%,
|
||||
#FF8C00 100%
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<a href="javascript:;">导航1</a>
|
||||
<a href="javascript:;">导航2</a>
|
||||
<a href="javascript:;">导航3</a>
|
||||
<a href="javascript:;">导航4</a>
|
||||
<a href="javascript:;">导航5</a>
|
||||
<a href="javascript:;">导航6</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### 径向渐变
|
||||
|
||||
格式：
|
||||
|
||||
```
|
||||
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
|
||||
|
||||
background-image: radial-gradient(100px at center,yellow ,green);
|
||||
|
||||
```
|
||||
|
||||
解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
|
||||
|
||||
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
|
||||
|
||||
当然，还有其他的各种参数。格式举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 1px solid #000;
|
||||
margin: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*
|
||||
径向渐变：
|
||||
radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
|
||||
中心点位置：at left right center bottom top
|
||||
*/
|
||||
|
||||
/*辐射半径为100px，中心点在中间*/
|
||||
div:nth-child(1) {
|
||||
background-image: radial-gradient(100px at center, yellow, green);
|
||||
}
|
||||
|
||||
/*中心点在左上角*/
|
||||
div:nth-child(3) {
|
||||
background-image: radial-gradient(at left top, yellow, green);
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
background-image: radial-gradient(at 50px 50px, yellow, green);
|
||||
}
|
||||
|
||||
/*设置不同的颜色渐变*/
|
||||
div:nth-child(4) {
|
||||
background-image: radial-gradient(100px at center,
|
||||
yellow 0%,
|
||||
green 30%,
|
||||
blue 60%,
|
||||
red 100%);
|
||||
}
|
||||
|
||||
/*如果辐射半径的宽高不同，那就是椭圆*/
|
||||
div:nth-child(5) {
|
||||
background-image: radial-gradient(100px 50px at center, yellow, green);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS3 渐变</title>
|
||||
<style>
|
||||
|
||||
div:nth-child(1) {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 40px auto;
|
||||
border-radius: 100px;
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 40px auto;
|
||||
border-radius: 100px;
|
||||
background-color: yellowgreen;
|
||||
background-image: radial-gradient(
|
||||
200px at 100px 100px,
|
||||
rgba(0, 0, 0, 0),
|
||||
rgba(0, 0, 0, 0.5)
|
||||
);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
|
||||
|
||||
CSS3的更多属性，且听下文继续。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
1452
02-CSS基础/13-CSS3属性详解：动画详解.md
Normal file
1452
02-CSS基础/13-CSS3属性详解：动画详解.md
Normal file
File diff suppressed because it is too large
Load Diff
614
02-CSS基础/14-CSS3属性详解：flex布局.md
Normal file
614
02-CSS基础/14-CSS3属性详解：flex布局.md
Normal file
@@ -0,0 +1,614 @@
|
||||
|
||||
## 多列布局
|
||||
|
||||
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。
|
||||
|
||||
格式举例：
|
||||
|
||||
```css
|
||||
.wrapper{
|
||||
/* 分成几列 */
|
||||
-webkit-column-count: 3;
|
||||
|
||||
/* 每列之间，用分割线隔开 */
|
||||
-webkit-column-rule: 1px dashed red;
|
||||
|
||||
/* 设置列之间的间距 */
|
||||
-webkit-column-gap: 60px;
|
||||
|
||||
/* 设置每一列的宽度 */
|
||||
/* -webkit-column-width: 400px; */
|
||||
|
||||
/*-webkit- -moz- -ms- -o-*/
|
||||
}
|
||||
|
||||
h4{
|
||||
/* 设置跨列：让h4这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/
|
||||
-webkit-column-span: all;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
|
||||
|
||||
|
||||
## flex：伸缩布局
|
||||
|
||||
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
|
||||
|
||||
|
||||
|
||||
|
||||
如上图所示，有几个概念需要了解一下：
|
||||
|
||||
- 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
|
||||
|
||||
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
|
||||
|
||||
PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
|
||||
|
||||
|
||||
### 设置伸缩布局的步骤
|
||||
|
||||
（1）指定一个盒子为伸缩布局：
|
||||
|
||||
```javascript
|
||||
display: flex;
|
||||
```
|
||||
|
||||
（2）设置 `flex-direction` 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。
|
||||
|
||||
（3）可互换主侧轴，也可改变主侧轴的方向。
|
||||
|
||||
|
||||
### 各属性详解
|
||||
|
||||
**1、`flex-direction`属性：**设置主轴方向。
|
||||
|
||||
- `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
|
||||
- `row` 水平方向（默认值）
|
||||
- `reverse-row` 反转
|
||||
- `column` 垂直方向
|
||||
- `reverse-column` 反转列
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
body{
|
||||
background-color: #eee;
|
||||
font-family: "Microsoft Yahei";
|
||||
font-size:22px;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-weight: normal;
|
||||
}
|
||||
section{
|
||||
width: 1000px;
|
||||
|
||||
margin:40px auto;
|
||||
}
|
||||
|
||||
ul{
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
}
|
||||
|
||||
ul li{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: pink;
|
||||
margin:10px;
|
||||
}
|
||||
section:nth-child(1) ul{
|
||||
overflow: hidden; /* 清除浮动 */
|
||||
}
|
||||
section:nth-child(1) ul li{
|
||||
float: left;
|
||||
}
|
||||
/* 设置伸缩盒子*/
|
||||
section:nth-child(2) ul{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
section:nth-child(3) ul{
|
||||
/* 设置伸缩布局*/
|
||||
display: flex;
|
||||
/* 设置主轴方向*/
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
section:nth-child(4) ul{
|
||||
/* 设置伸缩布局*/
|
||||
display: flex;
|
||||
/* 设置主轴方向 :水平翻转*/
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
section:nth-child(5) ul{
|
||||
/* 设置伸缩布局*/
|
||||
display: flex;
|
||||
/* 设置主轴方向 :垂直*/
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section:nth-child(6) ul{
|
||||
/* 设置伸缩布局*/
|
||||
display: flex;
|
||||
/* 设置主轴方向 :垂直*/
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h3>传统布局</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>伸缩布局 display:flex</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴方向 flex-direction:row</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴方向 flex-direction:row-reverse</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴方向 flex-direction:column</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴方向 flex-direction:column-reverse</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
**2、justify-content：**设置子元素在**主轴上的对齐方式**。
|
||||
|
||||
|
||||
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
|
||||
- `flex-start` 从主轴的起点对齐（默认值）
|
||||
- `flex-end` 从主轴的终点对齐
|
||||
- `center` 居中对齐
|
||||
- `space-around` 在父盒子里平分
|
||||
- `space-between` 两端对齐 平分
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style:none;}
|
||||
body{
|
||||
background-color: #eee;
|
||||
font-family: "Microsoft Yahei";
|
||||
|
||||
}
|
||||
section{
|
||||
width: 1000px;
|
||||
margin:50px auto;
|
||||
}
|
||||
section h3{
|
||||
font-size:22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul{
|
||||
border: 1px solid #999;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
ul li{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin:10px;
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(1) ul{
|
||||
/* 主轴对齐方式：从主轴开始的方向对齐*/
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
section:nth-child(2) ul{
|
||||
/* 主轴对齐方式：从主轴结束的方向对齐*/
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
section:nth-child(3) ul{
|
||||
/* 主轴对齐方式：居中对齐*/
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section:nth-child(4) ul{
|
||||
/* 主轴对齐方式：在父盒子中平分*/
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(5) ul{
|
||||
/* 主轴对齐方式：两端对齐 平分*/
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h3>主轴的对齐方式：justify-content:flex-start</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴的对齐方式：justify-content:flex-end</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴的对齐方式：justify-content:center</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴的对齐方式：justify-content:space-round</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>主轴的对齐方式：justify-content:space-bettwen</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
</ul>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
**3、align-items：**设置子元素在**侧轴上的对齐方式**。
|
||||
|
||||
|
||||
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
|
||||
- `flex-start` 从侧轴开始的方向对齐
|
||||
- `flex-end` 从侧轴结束的方向对齐
|
||||
- `baseline` 基线 默认同flex-start
|
||||
- `center` 中间对齐
|
||||
- `stretch` 拉伸
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
body{
|
||||
background-color: #eee;
|
||||
font-family: "Microsoft Yahei";
|
||||
|
||||
}
|
||||
section{
|
||||
width: 1000px;
|
||||
margin:50px auto;
|
||||
}
|
||||
section h3{
|
||||
font-size:22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul{
|
||||
border: 1px solid #999;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
height:500px;
|
||||
|
||||
}
|
||||
|
||||
ul li{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin:10px;
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(1) ul{
|
||||
/* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
section:nth-child(2) ul{
|
||||
/* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
|
||||
align-items:flex-end;
|
||||
}
|
||||
|
||||
section:nth-child(3) ul{
|
||||
/* 侧轴对齐方式 ：居中*/
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
section:nth-child(4) ul{
|
||||
/* 侧轴对齐方式 ：基线 默认同flex-start*/
|
||||
align-items:baseline;
|
||||
}
|
||||
|
||||
section:nth-child(5) ul{
|
||||
/* 侧轴对齐方式 ：拉伸*/
|
||||
align-items:stretch;
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(5) ul li{
|
||||
height:auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h3>侧轴的对齐方式:align-items ：flex-start</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>侧轴的对齐方式：align-items:flex-end</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>侧轴的对齐方式：align-items:center</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>侧轴的对齐方式：align-itmes:baseline</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>侧轴的对齐方式：align-itmes: stretch</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
**4、`flex`属性**：设置子盒子的权重
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style:none;
|
||||
}
|
||||
body{
|
||||
background-color: #eee;
|
||||
font-family: "Microsoft Yahei";
|
||||
|
||||
}
|
||||
section{
|
||||
width: 1000px;
|
||||
margin:50px auto;
|
||||
}
|
||||
section h3{
|
||||
font-size:22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul{
|
||||
border: 1px solid #999;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
ul li{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin:10px;
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(1) ul li:nth-child(1){
|
||||
flex:1;
|
||||
}
|
||||
|
||||
section:nth-child(1) ul li:nth-child(2){
|
||||
flex:1;
|
||||
}
|
||||
|
||||
section:nth-child(1) ul li:nth-child(3){
|
||||
flex:8;
|
||||
}
|
||||
|
||||
section:nth-child(2) ul li:nth-child(1){
|
||||
|
||||
}
|
||||
|
||||
section:nth-child(2) ul li:nth-child(2){
|
||||
flex:1;
|
||||
}
|
||||
|
||||
section:nth-child(2) ul li:nth-child(3){
|
||||
flex:4;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h3>伸缩比例:flex</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>伸缩比例:flex</h3>
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## CSS Flexbox 可视化手册
|
||||
|
||||
可视化的截图如下：（请点开链接，查看大图）
|
||||
|
||||
<http://img.smyhvae.com/20190821_2101.png>
|
||||
|
||||
相关文章：
|
||||
|
||||
- 【英文原版】 CSS Flexbox Fundamentals Visual Guide：<https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac>
|
||||
|
||||
- 【中文翻译】CSS Flexbox 可视化手册：<https://zhuanlan.zhihu.com/p/56046851>
|
||||
|
||||
## flex 相关的推荐文章
|
||||
|
||||
- flex 效果在线演示：<https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/>
|
||||
|
||||
- A Complete Guide to Flexbox | 英文原版：<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
|
||||
|
||||
- CSS3 Flexbox 布局完全指南 | 中文翻译：<https://www.html.cn/archives/8629>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
385
02-CSS基础/15-CSS3属性详解：Web字体.md
Normal file
385
02-CSS基础/15-CSS3属性详解：Web字体.md
Normal file
@@ -0,0 +1,385 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
|
||||
开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。
|
||||
|
||||
支持程度比较好，甚至 IE 低版本的浏览器也能支持。
|
||||
|
||||
## 字体的常见格式
|
||||
|
||||
> 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。
|
||||
|
||||
#### TureTpe格式：(**.ttf**)
|
||||
|
||||
.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。
|
||||
|
||||
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。
|
||||
|
||||
|
||||
|
||||
#### OpenType格式：(**.otf**)
|
||||
|
||||
.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。
|
||||
|
||||
支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。
|
||||
|
||||
|
||||
#### Web Open Font Format格式：(**.woff**)
|
||||
|
||||
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。
|
||||
|
||||
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。
|
||||
|
||||
#### Embedded Open Type格式：(**.eot**)
|
||||
|
||||
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。
|
||||
|
||||
|
||||
#### SVG格式：(**.svg**)
|
||||
|
||||
.svg字体是基于SVG字体渲染的一种格式。
|
||||
|
||||
支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。
|
||||
|
||||
**总结：**
|
||||
|
||||
了解了上面的知识后，**我们就需要为不同的浏览器准备不同格式的字体**。通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式之间的区别。
|
||||
|
||||
|
||||
下载字体的网站推荐：
|
||||
|
||||
- <http://www.zhaozi.cn/>
|
||||
|
||||
- <http://www.youziku.com/>
|
||||
|
||||
|
||||
## WebFont 的使用步骤
|
||||
|
||||
打开网站<http://iconfont.cn/webfont#!/webfont/index>，如下：
|
||||
|
||||
|
||||
|
||||
上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。
|
||||
|
||||
下载完成后是一个压缩包，压缩包链接：http://download.csdn.net/download/smyhvae/10253561
|
||||
|
||||
解压后如下：
|
||||
|
||||
|
||||
|
||||
上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的**使用步骤**：
|
||||
|
||||
|
||||
|
||||
（1）第一步：使用font-face声明字体
|
||||
|
||||
```css
|
||||
@font-face {font-family: 'webfont';
|
||||
src: url('webfont.eot'); /* IE9*/
|
||||
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('webfont.woff') format('woff'), /* chrome、firefox */
|
||||
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
（2）第二步：定义使用webfont的样式
|
||||
|
||||
```css
|
||||
.web-font{
|
||||
font-family:"webfont" !important;
|
||||
font-size:16px;font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;}
|
||||
```
|
||||
|
||||
|
||||
（3）第三步：为文字加上对应的样式
|
||||
|
||||
```html
|
||||
<i class="web-font">这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。</i>
|
||||
```
|
||||
|
||||
**举例：**
|
||||
|
||||
我们按照上图中的步骤来，引入这个字体。完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
|
||||
p{
|
||||
font-size:30px;
|
||||
}
|
||||
|
||||
/* 如果要在网页中使用web字体（用户电脑上没有这种字体）*/
|
||||
/* 第一步：声明字体*/
|
||||
/* 告诉浏览器 去哪找这个字体*/
|
||||
@font-face {font-family: 'my-web-font';
|
||||
src: url('font/webfont.eot'); /* IE9*/
|
||||
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/webfont.woff') format('woff'), /* chrome、firefox */
|
||||
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
/* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
|
||||
.webfont{
|
||||
font-family: 'my-web-font';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 第三步：引用 webfont 字体 -->
|
||||
<p class="webfont">生命壹号，永不止步</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
代码解释：
|
||||
|
||||
（1）`my-web-font`这个名字是随便起的，只要保证第一步和第二步中的名字一样就行。
|
||||
|
||||
（2）因为我把字体文件单独放在了font文件夹中，所以在src中引用字体资源时，写的路径是 `font/...`
|
||||
|
||||
工程文件：
|
||||
|
||||
- [2018-02-20-WebFont举例.zip](http://download.csdn.net/download/smyhvae/10253565)
|
||||
|
||||
|
||||
## 字体图标（阿里的 iconfont 网站举例）
|
||||
|
||||
我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：
|
||||
|
||||
- 将所有图标打包成字体库，减少请求；
|
||||
|
||||
- 具有矢量性，可保证清晰度；
|
||||
|
||||
- 使用灵活，便于维护。
|
||||
|
||||
也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。
|
||||
|
||||
**使用步骤如下：**（和上一段的使用步骤是一样的）
|
||||
|
||||
打开网站<http://iconfont.cn/>，找到想要的图标，加入购物车。然后下载下来：
|
||||
|
||||
|
||||
|
||||
压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
|
||||
|
||||
|
||||
|
||||
**举例1**：（图标字体引用）
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
/*申明字体*/
|
||||
@font-face {font-family: 'iconfont';
|
||||
src: url('font/iconfont.eot'); /* IE9*/
|
||||
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
|
||||
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont{
|
||||
font-family: iconfont;
|
||||
}
|
||||
|
||||
p{
|
||||
width: 200px;
|
||||
border: 1px solid #000;
|
||||
line-height: 60px;
|
||||
font-size:30px;
|
||||
margin:100px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p span{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 【重要】编码代表图标 -->
|
||||
<p><span class="iconfont"></span>扫码付款</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**举例2**：（伪元素的方式使用图标字体）
|
||||
|
||||
如果想要在文字的前面加图标字体，我们更习惯采用**伪元素**的方式进行添加。
|
||||
|
||||
代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
/*申明字体*/
|
||||
@font-face {font-family: 'iconfont';
|
||||
src: url('font/iconfont.eot'); /* IE9*/
|
||||
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
|
||||
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
|
||||
|
||||
p{
|
||||
width: 200px;
|
||||
border: 1px solid #000;
|
||||
line-height: 60px;
|
||||
font-size:30px;
|
||||
margin:100px auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon::before{
|
||||
/**/
|
||||
content:"\e628";
|
||||
/*position: absolute;*/
|
||||
/*left:10px;*/
|
||||
/*top:0px;*/
|
||||
font-family: iconfont;
|
||||
color:red;
|
||||
}
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="icon">扫码付款</p>
|
||||
<span class="icon" >我是span</span>
|
||||
<div class="icon">divvvvvvvvvvv</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
- 2018-02-20-图标字体demo.zip
|
||||
|
||||
|
||||
|
||||
## 其他相相关网站介绍
|
||||
|
||||
- Font Awesome 使用介绍：<http://fontawesome.dashgame.com/>
|
||||
|
||||
定制自已的字体图标库：
|
||||
|
||||
- <http://iconfont.cn/>
|
||||
|
||||
- <https://icomoon.io/>
|
||||
|
||||
SVG素材：
|
||||
|
||||
- <http://www.iconsvg.com/>
|
||||
|
||||
|
||||
|
||||
|
||||
## 360浏览器网站案例
|
||||
|
||||
暂略。
|
||||
|
||||
这里涉及到：jQuery fullPage 全屏滚动插件。
|
||||
|
||||
- 中文网址:http://www.dowebok.com
|
||||
|
||||
- 相关说明:http://www.dowebok.com/77.html
|
||||
|
||||
|
||||
## 使用 Bootstrap 网站的图标字体
|
||||
|
||||
打开如下网站：<http://www.bootcss.com/p/font-awesome/>。
|
||||
|
||||
|
||||
|
||||
如上图所示，下载字体后，进行解压：
|
||||
|
||||
|
||||
|
||||
使用步骤如下：
|
||||
|
||||
（1）如图只是想要字体的话，可以把`css`和`font`这两个文件夹拷贝到项目里。
|
||||
|
||||
（2）在html文档中的 <head> 标签里，引入 font-awesome.min.css 文件：
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
```
|
||||
|
||||
（3）想在哪个标签里用这个图标，直接在这个标签里加className就行（className都在[网站](http://www.bootcss.com/p/font-awesome/)上列出来了）。
|
||||
|
||||
|
||||
完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="icon-play">播放</span>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
350
02-CSS基础/21-Sass入门.md
Normal file
350
02-CSS基础/21-Sass入门.md
Normal file
@@ -0,0 +1,350 @@
|
||||
|
||||
|
||||
## Sass简介
|
||||
|
||||
大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。
|
||||
|
||||
面对返些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版，可以自定义发量，可以有 if 语句，还可以嵌套等等，很神奇吧！那下面我们就来介绍返个神奇的 Sass。
|
||||
|
||||
Sass比Less的功能更强大，也更复杂。
|
||||
|
||||
|
||||
### Sass 的定义
|
||||
|
||||
Sass：英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。
|
||||
|
||||
|
||||
官网是：<https://sass-lang.com/>
|
||||
|
||||
Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
|
||||
|
||||
Sass专注的是怎样创建优雅的样式表，而不是内容。
|
||||
|
||||
|
||||
### Sass、Compass与CSS
|
||||
|
||||
**关系：**
|
||||
|
||||
- Less/Sass是语法、Compass是框架、CSS是目标。
|
||||
|
||||
**Sass&Compass的好处**：
|
||||
|
||||
- 写出更优秀的CSS。
|
||||
|
||||
- 解决CSS编写过程中的痛点问题，比如精灵图合图、属性的浏览器前缀处理等。
|
||||
|
||||
- 有效组织样式、图片、字体等项目元素。
|
||||
|
||||
|
||||
**受众群体：**
|
||||
|
||||
- 重构的同学，写很多CSS，不知如何自动化。
|
||||
|
||||
- 希望在项目周期内更好地组织项目内容。
|
||||
|
||||
|
||||
|
||||
## Sass的安装
|
||||
|
||||
sass引擎是用Ruby语言开发的（但是两者的语法没有关系），因此在安装 Sass 前，需要先安装Ruby（mac下自带Ruby无需再安装Ruby）。
|
||||
|
||||
下面来讲一下 Windows 下的安装Sass的步骤。
|
||||
|
||||
### 第一步：安装Ruby（windows环境）
|
||||
|
||||
下载地址：<http://rubyinstaller.org/downloads/>
|
||||
|
||||
貌似网络很慢，不一定能下载成功~
|
||||
|
||||
安装时，记得勾选“环境变量”：
|
||||
|
||||
|
||||
|
||||
安装完ruby之后，在命令行中输入`ruby -v`，查看ruby的的版本：
|
||||
|
||||
|
||||
|
||||
|
||||
### 关于Mac下的Ruby
|
||||
|
||||
刚刚说了，Mac下自带Ruby，但是版本肯定很老：
|
||||
|
||||
|
||||
|
||||
有的时候，我们可能需要使用特定版本的ruby，或者在不同的ruby版本之间进行切换，所以，大家可以尝试安装`rvm`，它是ruby的版本管理工具。官网是：<https://rvm.io>
|
||||
|
||||
### 第二步：安装 Sass
|
||||
|
||||
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby。输入`gem install sass`安装Sass。
|
||||
|
||||
PS：Ruby 是使用 gem 来管理它的各种包（比如Sass）。我们安装好ruby之后，gem会自动安装上；类似于，我们安装完node之后，npm也自动安装好了。
|
||||
|
||||
但是，由于访问网络受限，我们可以先切换到淘宝的镜像，再安装Sass。步骤如下：
|
||||
|
||||
（1）移除默认的镜像，添加淘宝的镜像：
|
||||
|
||||
```
|
||||
gem sources --remove https://rubygems.org/
|
||||
|
||||
gem sources -a https://ruby.taobao.org/ //注意：如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org
|
||||
```
|
||||
|
||||
PS：我测试了一下，Win 7 不支持https，Mac支持https。
|
||||
|
||||
（2）查看当前使用的是哪个镜像：
|
||||
|
||||
```
|
||||
gem sources -l
|
||||
```
|
||||
|
||||
|
||||
|
||||
（3）安装sass：
|
||||
|
||||
紧接着，输入如下命令安装Sass：
|
||||
|
||||
```
|
||||
gem install sass // 如果mac下输入这个命令时没有权限，则需要在前面加上 sudo
|
||||
```
|
||||
|
||||
系统会自动安装上最新版本的Sass。
|
||||
|
||||
查看sass版本的命令为:
|
||||
|
||||
```
|
||||
sass -v
|
||||
```
|
||||
|
||||
升级sass版本的命令为：
|
||||
|
||||
```
|
||||
gem update sass
|
||||
```
|
||||
|
||||
你也可以运行帮助命令行来查看你需要的命令：
|
||||
|
||||
```
|
||||
sass -h
|
||||
```
|
||||
|
||||
|
||||
|
||||
参考链接：<https://www.w3cplus.com/sassguide/install.html>
|
||||
|
||||
## Compass 简介和安装
|
||||
|
||||
安装完sass之后，我们在main.scss中写一些代码，然后输入如下命令，就可以将`scss文件`转化为`css文件`：
|
||||
|
||||
```
|
||||
sass main.scss main.css
|
||||
```
|
||||
|
||||
然而，真正的项目开发中，我们不一定是直接使用 sass 命令，而是使用 Compass。
|
||||
|
||||
### Compass 简介
|
||||
|
||||
官网是：<http://compass-style.org/>。
|
||||
|
||||
Compass 是开源的CSS书写框架。
|
||||
|
||||
### Compass 安装
|
||||
|
||||
输入如下命令安装 Compass：
|
||||
|
||||
```
|
||||
gem isntall compass
|
||||
```
|
||||
|
||||
输入如下命令查看版本：
|
||||
|
||||
```
|
||||
compass -v
|
||||
```
|
||||
|
||||
|
||||
|
||||
compass可以直接用来搭建前端项目的样式部分，但并不是常用的方法。
|
||||
|
||||
### Compass的简单使用
|
||||
|
||||
通过 Compass 创建工程目录：
|
||||
|
||||
|
||||
```
|
||||
cd workspace
|
||||
|
||||
compass create CompassDemo
|
||||
```
|
||||
|
||||
文件结构如下：
|
||||
|
||||
- /sass
|
||||
- ie.scss
|
||||
- print.scss
|
||||
- screen.scss
|
||||
|
||||
- /stylesheets
|
||||
- ie.css
|
||||
- print.css
|
||||
- screen.css
|
||||
|
||||
- config.rb
|
||||
|
||||
|
||||
|
||||
为了能够让文件实时编译，我们可以通过 copass watch 监听sass文件的变化：
|
||||
|
||||
```
|
||||
cd CompassDemo
|
||||
|
||||
compass watch
|
||||
```
|
||||
|
||||
当.scss文件改动时，会自动生成对应的.css文件。
|
||||
|
||||
|
||||
|
||||
## Sass的语法
|
||||
|
||||
### 两种后缀名（两种语法）
|
||||
|
||||
sass 有两种后缀名文件：
|
||||
|
||||
（1）`.sass`：对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
h1
|
||||
color: #000
|
||||
background: #fff
|
||||
```
|
||||
|
||||
这种语法是类ruby的语法，和CSS的语法相比，相差较大。所以，在3.0版本中就引入了`.scss`的语法。
|
||||
|
||||
|
||||
|
||||
（2）`.scss`：是css语法的超级，可以使用大括号和分号。
|
||||
|
||||
比如：
|
||||
|
||||
```
|
||||
h1 {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
注意：一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。
|
||||
|
||||
|
||||
**两种格式之间的转换：**
|
||||
|
||||
我们在工程目录下新建`main.scss`，输入如下代码：
|
||||
|
||||
```
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
然后输入如下命令，就可以将上面的`main.scss`转化为`main.sass`：
|
||||
|
||||
```bash
|
||||
sass-convert main.scss main.sass
|
||||
```
|
||||
|
||||
|
||||
打开生成的`main.sass`，内容如下：
|
||||
|
||||
```
|
||||
*
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 变量语法
|
||||
|
||||
Sass 是通过`$`符号来声明变量。
|
||||
|
||||
（1）我们新建一个文件`_variables.scss`，这个文件专门用来存放变量，然后在其他的文件中引入`_variables.scss`即可。
|
||||
|
||||
因为这个文件只需要存储变量，并不需要它编译出对应的 css 文件，所以我们给文件名的前面加了**下划线**，意思是声明为**局部文件**。
|
||||
|
||||
我们在这个文件中，声明两个字体变量：
|
||||
|
||||
```css
|
||||
$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
|
||||
|
||||
$font2: Arial, Verdana, Helvetica, sans-serif;
|
||||
```
|
||||
|
||||
|
||||
（2）新建文件main.scss，在里面引入步骤（1）中的变量文件：
|
||||
|
||||
```
|
||||
@import "variables"; // 引入变量文件
|
||||
|
||||
.div1{
|
||||
font-family: $font1;
|
||||
}
|
||||
|
||||
.div2{
|
||||
font-family: $font2;
|
||||
}
|
||||
```
|
||||
|
||||
基于 Sass 的既定规则：
|
||||
|
||||
- 没有文件后缀名时，Sass 会自动添加 .scss 或者 .sass 的后缀（具体要看已经存在哪个后缀的文件）。
|
||||
|
||||
- 同一目录下，局部文件和非局部文件不能重名。
|
||||
|
||||
对应生成的main.css文件如下：
|
||||
|
||||
main.css
|
||||
|
||||
```css
|
||||
/* line 9, ../sass/main.scss */
|
||||
.div1 {
|
||||
font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* line 13, ../sass/main.scss */
|
||||
.div2 {
|
||||
font-family: Arial, Verdana, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 注释语法
|
||||
|
||||
单行注释：
|
||||
|
||||
```
|
||||
//我是单行注释
|
||||
```
|
||||
|
||||
块级注释：
|
||||
|
||||
```
|
||||
/*
|
||||
我是块级注释
|
||||
哈哈
|
||||
*/
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
二者的区别是：单行注释不会出现在自动生成的css文件中。
|
||||
|
||||
|
||||
|
||||
|
||||
126
02-CSS基础/22.md
Normal file
126
02-CSS基础/22.md
Normal file
@@ -0,0 +1,126 @@
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<style>
|
||||
label {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label,
|
||||
input,
|
||||
select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mui-switch {
|
||||
width: 52px;
|
||||
height: 31px;
|
||||
position: relative;
|
||||
border: 1px solid #dfdfdf;
|
||||
background-color: #fdfdfd;
|
||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||
border-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
background-clip: content-box;
|
||||
display: inline-block;
|
||||
-webkit-appearance: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mui-switch:before {
|
||||
content: '';
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
border-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mui-switch:checked {
|
||||
border-color: #64bd63;
|
||||
box-shadow: #64bd63 0 0 0 16px inset;
|
||||
background-color: #64bd63;
|
||||
}
|
||||
|
||||
.mui-switch:checked:before {
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg {
|
||||
transition: background-color ease 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:checked {
|
||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||
background-color: #64bd63;
|
||||
transition: border-color 0.4s, background-color ease 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:checked:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim {
|
||||
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:checked {
|
||||
box-shadow: #64bd63 0 0 0 16px inset;
|
||||
background-color: #64bd63;
|
||||
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:checked:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=mui-switch.css.map */
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<label>
|
||||
<input class="mui-switch" type="checkbox"> 默认未选中</label>
|
||||
<label>
|
||||
<input class="mui-switch" type="checkbox" checked> 默认选中</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim 类即可
|
||||
</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
29
02-CSS基础/23-浏览器的兼容性问题.md
Normal file
29
02-CSS基础/23-浏览器的兼容性问题.md
Normal file
@@ -0,0 +1,29 @@
|
||||
|
||||
|
||||
我们在div里放一个img，发现：
|
||||
|
||||
在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。
|
||||
|
||||
比如说，下面这个是html的。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img src="/Users/smyhvae/Dropbox/img/20170813_1143.jpg" alt="">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
577
02-CSS基础/CSS3的常见边框汇总.md
Normal file
577
02-CSS基础/CSS3的常见边框汇总.md
Normal file
@@ -0,0 +1,577 @@
|
||||
|
||||
|
||||
## CSS3 常见边框汇总
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS3 边框</title>
|
||||
<style>
|
||||
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 20px 0;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h3 {
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.main {
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
|
||||
.main:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main .item {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
margin: 0 30px 30px 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
float: left;
|
||||
box-shadow: 2px 2px 5px #CCC;
|
||||
}
|
||||
|
||||
.main .item:after {
|
||||
content: attr(data-brief);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 210px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #FFF;
|
||||
font-family: '微软雅黑';
|
||||
font-size: 18px;
|
||||
background-color: rgba(170, 170, 170, 0);
|
||||
z-index: -1;
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
.main .item:hover:after {
|
||||
background-color: rgba(170, 170, 170, 0.6);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.main .item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*.main .item:nth-last-child(-n+5) {
|
||||
margin-bottom: 0;
|
||||
}*/
|
||||
|
||||
/* 以上是骨架样式 */
|
||||
/* 1、2、3、4 顺时针 */
|
||||
.border-radius {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: auto;
|
||||
border: 1px solid red;
|
||||
/*border-radius: 50% 30% 20%;*/
|
||||
}
|
||||
|
||||
.square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*拱形*/
|
||||
.item:nth-child(1) .border-radius {
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*拱形*/
|
||||
.item:nth-child(2) .border-radius {
|
||||
border-radius: 90px 90px 0 0;
|
||||
}
|
||||
|
||||
/*半圆*/
|
||||
.item:nth-child(3) .border-radius {
|
||||
height: 90px;
|
||||
border-radius: 90px 90px 0 0;
|
||||
}
|
||||
|
||||
/*左上角*/
|
||||
.item:nth-child(4) .border-radius {
|
||||
/*height: 90px;*/
|
||||
border-radius: 90px 0 0 0;
|
||||
}
|
||||
|
||||
/*四分之一圆*/
|
||||
.item:nth-child(5) .border-radius {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 90px 0 0 0;
|
||||
}
|
||||
|
||||
/*横着的椭圆*/
|
||||
.item:nth-child(6) .border-radius {
|
||||
height: 90px;
|
||||
/*border-radius: 50%;*/
|
||||
border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
|
||||
/*border-radius: 45px / 90px;*/
|
||||
}
|
||||
|
||||
/*竖着的椭圆*/
|
||||
.item:nth-child(7) .border-radius {
|
||||
width: 90px;
|
||||
border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
|
||||
}
|
||||
|
||||
/*半个横着的椭圆*/
|
||||
.item:nth-child(8) .border-radius {
|
||||
height: 45px;
|
||||
border-radius: 90px 90px 0 0 / 45px 45px 0 0;
|
||||
}
|
||||
|
||||
/*半个竖着的椭圆*/
|
||||
.item:nth-child(9) .border-radius {
|
||||
width: 45px;
|
||||
border-radius: 45px 0 0 45px / 90px 0 0 90px;
|
||||
}
|
||||
|
||||
/*四分之一竖着的椭圆*/
|
||||
.item:nth-child(10) .border-radius {
|
||||
width: 45px;
|
||||
height: 90px;
|
||||
border-radius: 45px 0 0 0 / 90px 0 0 0;
|
||||
}
|
||||
|
||||
/*饼环*/
|
||||
.item:nth-child(11) .border-radius {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 70px solid red;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*圆饼*/
|
||||
.item:nth-child(12) .border-radius {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 70px solid red;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
/*左上角圆饼*/
|
||||
.item:nth-child(13) .border-radius {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 60px solid red;
|
||||
border-radius: 90px 0 0 0;
|
||||
}
|
||||
|
||||
/*对角圆饼*/
|
||||
.item:nth-child(14) .border-radius {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 60px solid red;
|
||||
border-radius: 90px 0 90px 0;
|
||||
}
|
||||
|
||||
/*四边不同色*/
|
||||
.item:nth-child(15) .border-radius {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-width: 90px;
|
||||
border-style: solid;
|
||||
border-color: red green yellow blue;
|
||||
}
|
||||
|
||||
/*右透明色*/
|
||||
.item:nth-child(16) .border-radius {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-width: 90px;
|
||||
border-style: solid;
|
||||
border-color: red green yellow blue;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
/*圆右透明色*/
|
||||
.item:nth-child(17) .border-radius {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-width: 90px;
|
||||
border-style: solid;
|
||||
border-color: red;
|
||||
border-right-color: transparent;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*圆右红透明色*/
|
||||
.item:nth-child(18) .border-radius {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-width: 90px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-right-color: red;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*阴阳图前世*/
|
||||
.item:nth-child(19) .border-radius {
|
||||
width: 180px;
|
||||
height: 0px;
|
||||
border-top-width: 90px;
|
||||
border-bottom-width: 90px;
|
||||
border-style: solid;
|
||||
border-top-color: red;
|
||||
border-bottom-color: green;
|
||||
/*border-right-color: red;*/
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*阴阳图前世2*/
|
||||
.item:nth-child(20) .border-radius {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
border-bottom-width: 90px;
|
||||
border-style: solid;
|
||||
border-bottom-color: green;
|
||||
background-color: red;
|
||||
/*border-right-color: red;*/
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
/*阴阳图今生*/
|
||||
.item:nth-child(21) .border-radius {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
border-bottom-width: 90px;
|
||||
border-style: solid;
|
||||
border-bottom-color: green;
|
||||
background-color: red;
|
||||
border-radius: 90px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:nth-child(21) .border-radius::after,
|
||||
.item:nth-child(21) .border-radius::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
/*margin: -10px 0 0 0;*/
|
||||
border-width: 35px;
|
||||
border-style: solid;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
/*左阴阳*/
|
||||
.item:nth-child(21) .border-radius::after {
|
||||
background-color: red;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
/*右阴阳*/
|
||||
.item:nth-child(21) .border-radius::before {
|
||||
background-color: green;
|
||||
border-color: red;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*右阴阳*/
|
||||
.item:nth-child(22) .border-radius {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
border-bottom-width: 90px;
|
||||
border-bottom-color: green;
|
||||
border-bottom-style: solid;
|
||||
background-color: red;
|
||||
border-radius: 90px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:nth-child(22) .border-radius::after,
|
||||
.item:nth-child(22) .border-radius::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: 35px;
|
||||
border-style: solid;
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
.item:nth-child(22) .border-radius::before {
|
||||
border-color: green;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.item:nth-child(22) .border-radius::after {
|
||||
right: 0;
|
||||
border-color: red;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
/*消息框*/
|
||||
.item:nth-child(23) .border-radius {
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
background-color: red;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:nth-child(23) .border-radius::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-right-color: red;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
/*奇怪的图形*/
|
||||
.item:nth-child(24) .border-radius {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-width: 45px 0 45px 70px;
|
||||
border-style: solid;
|
||||
border-radius: 0 0 60px 0;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
/*奇怪的图形2*/
|
||||
.item:nth-child(25) .border-radius {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-width: 45px 20px 45px 70px;
|
||||
border-style: solid;
|
||||
border-radius: 60px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
/*QQ对话*/
|
||||
.item:nth-child(26) .border-radius {
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
background-color: red;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:nth-child(26) .border-radius::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-width: 0 0 30px 30px;
|
||||
border-style: solid;
|
||||
border-bottom-color: red;
|
||||
border-left-color: transparent;
|
||||
border-radius: 0 0 60px 0;
|
||||
}
|
||||
|
||||
/*圆角的百分比设置 */
|
||||
.item:nth-child(27) .border-radius {
|
||||
width: 180px;
|
||||
/*height: 180px;*/
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
border-radius: 90px/45px;
|
||||
|
||||
/*百分比是按横竖两个对应的方向的长度进行计算*/
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h3>CSS3 边框圆角</h3>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="item" data-brief="整圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="拱形">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="半圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="左上角">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="四分之一圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="横着的椭圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="竖着的椭圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="半个横着的椭圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="半个竖着的椭圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="四分之一竖着的椭圆">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="饼环">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="圆饼">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="左上角圆饼">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="对角圆饼">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="四边不同色">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="右透明色">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="圆右透明色">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="圆右红透明色">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="阴阳图前世">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="阴阳图前世2">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="阴阳图今生">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="阴阳图今生2">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="消息框">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="奇怪的图形">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="奇怪的图形2">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="QQ对话">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
<div class="item" data-brief="圆角百分比">
|
||||
<div class="border-radius"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 爱心
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.heart {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
/*border: 1px solid #000;*/
|
||||
margin: 100px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.heart::before, .heart::after {
|
||||
content: "左一半";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
border-radius: 100px 100px 0 0;
|
||||
transform: rotate(-45deg);
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: yellow;
|
||||
font-size: 30px;
|
||||
font-family: "MIcrosoft Yahei";
|
||||
}
|
||||
|
||||
.heart::after {
|
||||
content: "右一半";
|
||||
left: 71px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="heart">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
它其实是下面这两个盒子叠起来的：
|
||||
|
||||
|
||||
|
||||
改变 `.heart::after` 的 left值，即可叠起来。
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user