Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje
This commit is contained in:
commit
de877bd04f
GPG Key ID:
A7972FD973317FF3
29
css/css简介.md
29
css/css简介.md
@ -78,18 +78,18 @@ p {
|
||||
|
||||
### css 选择器
|
||||
|
||||
| 选择器名称 | 选择的内容 | 示例 |
|
||||
| ------------------------ | ------------------------------------------------ | -------------------------------------------- |
|
||||
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素 | p 选择整个文件中的所有p 标签 |
|
||||
| id选择器 | 具有特定id 的html元素 | #my 选择标签内id为‘my’的元素 |
|
||||
| 类选择器 | 带有class=''特定类的元素 | .nav 选择标签内class="nav"的元素 |
|
||||
| 属性选择器 | 拥有特定属性的元素 | img[src] 选择<img src="xxx"/> 而不是 <img /> |
|
||||
| 伪类选择器 | 特殊状态下的特殊元素 | a:hover 鼠标悬停在链接上时的样式 |
|
||||
| 通用选择器 | 所有元素 | * |
|
||||
| E,F | 同时匹配所有的E和F元素，E，F之间用逗号分隔 | div , p |
|
||||
| E F | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p |
|
||||
| E>F | 匹配所有E元素的子元素F | div > p |
|
||||
| E+F | 匹配所有紧跟E元素之后的同级元素F | div+p |
|
||||
| 选择器名称 | 选择的内容 | 示例 |
|
||||
| ------------------------ | ------------------------------------------------ | ------------------------------------------------------- |
|
||||
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素 | p 选择整个文件中的所有p 标签 |
|
||||
| id选择器 | 具有特定id 的html元素 | #my 选择标签内id为‘my’的元素 |
|
||||
| 类选择器 | 带有class=''特定类的元素 | .nav 选择标签内class="nav"的元素 |
|
||||
| 属性选择器 | 拥有特定属性的元素 | img[src=‘../a.jpg’] 选择<img src="xxx"/> 而不是 <img /> |
|
||||
| 伪类选择器 | 特殊状态下的特殊元素 | a:hover 鼠标悬停在链接上时的样式 |
|
||||
| 通用选择器 | 所有元素 | * |
|
||||
| E,F | 同时匹配所有的E和F元素，E，F之间用逗号分隔 | div , p{} |
|
||||
| E F | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p |
|
||||
| E>F | 匹配所有E元素的子元素F | div > p |
|
||||
| E+F | 匹配所有紧跟E元素之后的同级元素F | div+p |
|
||||
|
||||
#### css 伪类
|
||||
|
||||
@ -104,3 +104,8 @@ p {
|
||||
|
||||
|
||||
|
||||
p :hover{
|
||||
|
||||
color:red;
|
||||
|
||||
}
|
||||
278
css/flex.md
Normal file
278
css/flex.md
Normal file
@ -0,0 +1,278 @@
|
||||
# flex
|
||||
|
||||
网页布局（layout）是 CSS 的一个重点应用。
|
||||
|
||||
|
||||
|
||||
布局的传统解决方案，基于[盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model)，依赖 [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 属性 + [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便，比如，[垂直居中](https://css-tricks.com/centering-css-complete-guide/)就不容易实现。
|
||||
|
||||
|
||||
|
||||
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
|
||||
|
||||
|
||||
|
||||
Flex 布局将成为未来布局的首选方案。本文介绍它的语法，[下一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)给出常见布局的 Flex 写法。网友 [JailBreak](http://vgee.cn/) 为本文的所有示例制作了 [Demo](http://static.vgee.cn/static/index.html)，也可以参考。
|
||||
|
||||
以下内容主要参考了下面两篇文章：[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)。
|
||||
|
||||
## 一、Flex 布局是什么？
|
||||
|
||||
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
|
||||
|
||||
任何一个容器都可以指定为 Flex 布局。
|
||||
|
||||
> ```css
|
||||
> .box{
|
||||
> display: flex;
|
||||
> }
|
||||
> ```
|
||||
|
||||
行内元素也可以使用 Flex 布局。
|
||||
|
||||
> ```css
|
||||
> .box{
|
||||
> display: inline-flex;
|
||||
> }
|
||||
> ```
|
||||
|
||||
Webkit 内核的浏览器，必须加上`-webkit`前缀。
|
||||
|
||||
> ```css
|
||||
> .box{
|
||||
> display: -webkit-flex; /* Safari */
|
||||
> display: flex;
|
||||
> }
|
||||
> ```
|
||||
|
||||
注意，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。
|
||||
|
||||
## 二、基本概念
|
||||
|
||||
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
|
||||
|
||||
|
||||
|
||||
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
|
||||
|
||||
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
|
||||
|
||||
## 三、容器的属性
|
||||
|
||||
以下6个属性设置在容器上。
|
||||
|
||||
> - flex-direction
|
||||
> - flex-wrap
|
||||
> - flex-flow
|
||||
> - justify-content
|
||||
> - align-items
|
||||
> - align-content
|
||||
|
||||
### 3.1 flex-direction属性
|
||||
|
||||
`flex-direction`属性决定主轴的方向（即项目的排列方向）。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> flex-direction: row | row-reverse | column | column-reverse;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能有4个值。
|
||||
|
||||
> - `row`（默认值）：主轴为水平方向，起点在左端。
|
||||
> - `row-reverse`：主轴为水平方向，起点在右端。
|
||||
> - `column`：主轴为垂直方向，起点在上沿。
|
||||
> - `column-reverse`：主轴为垂直方向，起点在下沿。
|
||||
|
||||
### 3.2 flex-wrap属性
|
||||
|
||||
默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。
|
||||
|
||||
|
||||
|
||||
> ```css
|
||||
> .box{
|
||||
> flex-wrap: nowrap | wrap | wrap-reverse;
|
||||
> }
|
||||
> ```
|
||||
|
||||
它可能取三个值。
|
||||
|
||||
（1）`nowrap`（默认）：不换行。
|
||||
|
||||
|
||||
|
||||
（2）`wrap`：换行，第一行在上方。
|
||||
|
||||
|
||||
|
||||
（3）`wrap-reverse`：换行，第一行在下方。
|
||||
|
||||
|
||||
|
||||
### 3.3 flex-flow
|
||||
|
||||
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> flex-flow: <flex-direction> || <flex-wrap>;
|
||||
> }
|
||||
> ```
|
||||
|
||||
### 3.4 justify-content属性
|
||||
|
||||
`justify-content`属性定义了项目在主轴上的对齐方式。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> justify-content: flex-start | flex-end | center | space-between | space-around;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
|
||||
|
||||
> - `flex-start`（默认值）：左对齐
|
||||
> - `flex-end`：右对齐
|
||||
> - `center`： 居中
|
||||
> - `space-between`：两端对齐，项目之间的间隔都相等。
|
||||
> - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
|
||||
|
||||
### 3.5 align-items属性
|
||||
|
||||
`align-items`属性定义项目在交叉轴上如何对齐。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> align-items: flex-start | flex-end | center | baseline | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
|
||||
|
||||
> - `flex-start`：交叉轴的起点对齐。
|
||||
> - `flex-end`：交叉轴的终点对齐。
|
||||
> - `center`：交叉轴的中点对齐。
|
||||
> - `baseline`: 项目的第一行文字的基线对齐。
|
||||
> - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||
|
||||
### 3.6 align-content属性
|
||||
|
||||
`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
|
||||
|
||||
> ```css
|
||||
> .box {
|
||||
> align-content: flex-start | flex-end | center | space-between | space-around | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
该属性可能取6个值。
|
||||
|
||||
> - `flex-start`：与交叉轴的起点对齐。
|
||||
> - `flex-end`：与交叉轴的终点对齐。
|
||||
> - `center`：与交叉轴的中点对齐。
|
||||
> - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
|
||||
> - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
|
||||
> - `stretch`（默认值）：轴线占满整个交叉轴。
|
||||
|
||||
### 四、项目的属性
|
||||
|
||||
以下6个属性设置在项目上。
|
||||
|
||||
> - `order`
|
||||
> - `flex-grow`
|
||||
> - `flex-shrink`
|
||||
> - `flex-basis`
|
||||
> - `flex`
|
||||
> - `align-self`
|
||||
|
||||
### 4.1 order属性
|
||||
|
||||
`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> order: <integer>;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
### 4.2 flex-grow属性
|
||||
|
||||
`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-grow: <number>; /* default 0 */
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
|
||||
|
||||
### 4.3 flex-shrink属性
|
||||
|
||||
`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-shrink: <number>; /* default 1 */
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。
|
||||
|
||||
负值对该属性无效。
|
||||
|
||||
### 4.4 flex-basis属性
|
||||
|
||||
`flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex-basis: <length> | auto; /* default auto */
|
||||
> }
|
||||
> ```
|
||||
|
||||
它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。
|
||||
|
||||
### 4.5 flex属性
|
||||
|
||||
`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|
||||
> }
|
||||
> ```
|
||||
|
||||
该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。
|
||||
|
||||
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
|
||||
|
||||
### 4.6 align-self属性
|
||||
|
||||
`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
|
||||
|
||||
> ```css
|
||||
> .item {
|
||||
> align-self: auto | flex-start | flex-end | center | baseline | stretch;
|
||||
> }
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
|
||||
@ -88,6 +88,8 @@ css
|
||||
position: static;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
bottom:1px;
|
||||
right:9px
|
||||
background: blue;
|
||||
}
|
||||
```
|
||||
|
||||
@ -54,7 +54,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
|
||||
|
||||
### 常用属性
|
||||
|
||||
- flex-direction
|
||||
- flex-direction:row;/column
|
||||
- flex-wrap
|
||||
- flex-flow
|
||||
- justify-content
|
||||
|
||||
157
csspress/1.css基础.md
Normal file
157
csspress/1.css基础.md
Normal file
@ -0,0 +1,157 @@
|
||||
# css 基础
|
||||
|
||||
## 定义
|
||||
|
||||
css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言 。我们用来给html的元素选择性的添加样式
|
||||
|
||||
## 在页面中使用css
|
||||
|
||||
方式1（行内样式）：
|
||||
|
||||
在html标签中 用style属性 给选中元素写入css样式
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
</head>
|
||||
<body style="background:blue">
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
方式2（内部样式表）：
|
||||
|
||||
在head 标签中写入 style标签，然后从style标签内写css的内容
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
body{
|
||||
background:blue
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
方式3 （外部样式表）
|
||||
|
||||
从head标签中 通过link 标签引入外部的css文件 从而建立html文件和css文件之间的连接
|
||||
|
||||
> <link rel="stylesheet" href="./css/index.css">
|
||||
>
|
||||
> link 标签中的rel=“stylesheet”必须加上
|
||||
>
|
||||
> href 为url地址
|
||||
>
|
||||
> type 链接文件的格式 可省略 省略的部分为：type="text/css"
|
||||
>
|
||||
> rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>hello world</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果同上：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## css 语法
|
||||
|
||||
那让我们解读一下刚才写的css代码
|
||||
|
||||
```
|
||||
body{
|
||||
background:blue
|
||||
}
|
||||
```
|
||||
|
||||
其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了
|
||||
|
||||
{} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）
|
||||
|
||||
{} 中的一行为一个声明，声明由 属性:属性值 组成，用来指定添加样式元素的属性 如本例的background:blue
|
||||
|
||||
声明中冒号左边的部分为属性，冒号右边的部分为属性值
|
||||
|
||||
|
||||
|
||||
重要的语法归纳：
|
||||
|
||||
- 除了选择器的部分都应该包含在成对的大括号里，即{} 里面
|
||||
- 每个声明中要用 : 将属性名和属性值分割开
|
||||
- 每个规则集中，要用 ; 把各个声明分割开
|
||||
|
||||
|
||||
|
||||
## css选择器
|
||||
|
||||
基本选择器：
|
||||
|
||||
| 选择器名称 | 选中的内容 | 示例 |
|
||||
| ----------------------- | -------------------------- | ------------------------------------------------------------ |
|
||||
| 标签选择器 | 页面上所有该标签的html元素 | p 选中页面上所有的p标签 |
|
||||
| id选择器 | 具有特定id的html元素 | #name 选中页面上所有<p id="name ">或<span id=“name"> ...这种id为name 的元素 |
|
||||
| 类选择器 | 具有特定类的元素 | .box 选中页面上所有<p class="box">或<span class=“box">... 这种class 为box的元素 |
|
||||
| 属性选择器 | 具有特定属性的元素 | a[title] 选中页面上所有存在title属性的<a>元素 并且可以通过a[title='xxx']来匹配特定的属性值 |
|
||||
| 通配符 | 所有元素 | * |
|
||||
| 多个元素 | 不同选择器用 , 连接 | div,span 同时匹配到页面中所有的div和span元素 |
|
||||
| 选择后代元素 | 用空格连接 A B | div span 匹配所有div中的所有span元素 |
|
||||
| 伪类 ：hover | a:hover | 匹配所有鼠标移入状态下的a标签 |
|
||||
|
||||
|
||||
|
||||
## css 优先级
|
||||
|
||||
优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义
|
||||
|
||||
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
|
||||
2. 作为style属性写在元素内的样式
|
||||
3. id选择器
|
||||
4. 类选择器
|
||||
5. 标签选择器
|
||||
6. 通配符选择器
|
||||
7. 浏览器自定义或继承
|
||||
|
||||
**总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|
||||
61
csspress/2.盒模型.md
Normal file
61
csspress/2.盒模型.md
Normal file
@ -0,0 +1,61 @@
|
||||
# css 基础（二）
|
||||
|
||||
## 块级元素和内联元素
|
||||
|
||||
- 块级元素
|
||||
|
||||
- 特点：
|
||||
|
||||
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
|
||||
- 每个盒子都会换行
|
||||
- width和height 都可以发挥作用
|
||||
- padding , margin, border 会将其他元素从当前盒子周围推开
|
||||
|
||||
|
||||
|
||||
- 内联元素
|
||||
|
||||
- 特点：
|
||||
- 盒子不会换行
|
||||
- width和height 不能发挥作用
|
||||
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
|
||||
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
|
||||
|
||||
> 块级元素display默认属性值为 block
|
||||
>
|
||||
> 内联元素 dipslay的属性默认值为inline
|
||||
>
|
||||
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
|
||||
|
||||
|
||||
|
||||
## 盒模型 （box model）
|
||||
|
||||
css 盒模型包括如下要素
|
||||
|
||||
- 元素内容 （content）
|
||||
- 内边距 （border）
|
||||
- 边框（border）
|
||||
- 外边距（margin）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 上图中 最内层的蓝色色块是 元素内容（content）
|
||||
>
|
||||
> 蓝色外侧的 绿色的是内边距（padding）
|
||||
>
|
||||
> padding外侧的橙黄色的部分是边框（border）
|
||||
>
|
||||
> border 外侧 也就是最外侧的部分是外边框（margin）
|
||||
|
||||
盒模型计算元素的总宽度和总高度：
|
||||
|
||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||
>
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
251
csspress/3.定位.md
Normal file
251
csspress/3.定位.md
Normal file
@ -0,0 +1,251 @@
|
||||
# 定位(position)
|
||||
|
||||
position 用来定义元素在网页上的位置，常用的有五种：
|
||||
|
||||
- static 正常的页面流，position属性的默认值
|
||||
- absolute 绝对定位
|
||||
- relative 相对定位
|
||||
- fixed 固定定位
|
||||
- sticky 粘性布局
|
||||
|
||||
|
||||
|
||||
### static
|
||||
|
||||
这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
css：
|
||||
|
||||
```
|
||||
<style>
|
||||
/*
|
||||
去掉浏览器默认的标签自带样式
|
||||
*/
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
/*
|
||||
position不写默认是static
|
||||
*/
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### absolute
|
||||
|
||||
absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定元素的位置
|
||||
|
||||
当父元素不定义position属性时，选中的元素依照整个网页的html根元素定位
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html 不变 css如下：
|
||||
|
||||
```
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
|
||||
上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流 然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
right:0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### relative
|
||||
|
||||
相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
|
||||
|
||||
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 60px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: absolute;
|
||||
right:90px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 常用技巧是给父元素定义绝对定位 子元素定义相对定位 这样就会使子元素相对于父元素定位
|
||||
|
||||
|
||||
|
||||
### fixed
|
||||
|
||||
fixed 固定定位，将某个元素固定在浏览器的某个位置，无论如何滚动滚动条，元素位置不变。 即元素相对于可视窗口固定位置
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
position: fixed;
|
||||
left: 90px;
|
||||
height: 60px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### sticky 粘性布局（拓展）
|
||||
|
||||
从效果来说 sticky更像是混合体，使用sticky的元素在页面滑动到临界点之前，表现为relative, 到达临界点之后，表现为fixed
|
||||
|
||||
#### css 使用：
|
||||
|
||||
> 1. 用 position: sticky 声明目标元素
|
||||
> 2. top/bottom/left/right 任意一个赋予有效值 ，甚至是负值也可以
|
||||
|
||||
|
||||
|
||||
注： 如果元素定义了overflow，那么sticky就会失效
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
height: 60px;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
滚动前：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
滚动后：
|
||||
|
||||
|
||||
46
csspress/4.flex.md
Normal file
46
csspress/4.flex.md
Normal file
@ -0,0 +1,46 @@
|
||||
# flex
|
||||
|
||||
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||||
|
||||
### flex 使用
|
||||
|
||||
任何一个元素都能被指定为flex 容器
|
||||
|
||||
```
|
||||
/*
|
||||
选中元素为块级元素时
|
||||
*/
|
||||
display:flex
|
||||
|
||||
|
||||
/*
|
||||
选中元素为内联元素时
|
||||
*/
|
||||
display:inline-flex
|
||||
```
|
||||
|
||||
### 基本概念
|
||||
|
||||
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
||||
|
||||
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
||||
|
||||
水平主轴的起点叫做 main start 结束位置叫做 main end
|
||||
|
||||
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||||
|
||||
### 容器的属性
|
||||
|
||||
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||||
- row 水平
|
||||
- column 垂直
|
||||
- justify-content 声明排列的方式
|
||||
- center 居中
|
||||
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||
- space-between 两端对齐 项目之间的间隔都相等
|
||||
- align-items 定义项目在交叉轴上的排列方式
|
||||
- center 居中
|
||||
- flex-start 交叉轴起点对齐（拓展）
|
||||
- flex-end 交叉轴终点对齐
|
||||
- baseline 第一行文字的基线对齐
|
||||
- stretch 默认占满整个容器的高度
|
||||
199
csspress/5.自适应和响应式.md
Normal file
199
csspress/5.自适应和响应式.md
Normal file
@ -0,0 +1,199 @@
|
||||
# 自适应和响应式
|
||||
|
||||
为了适配移动端终端设备
|
||||
|
||||
### 实现途径：
|
||||
|
||||
1.媒体查询
|
||||
|
||||
将设备按照不同的分辨率条件筛选，使符合条件的设备显示对应的样式，从而实现不同分辨率样式不同的效果
|
||||
|
||||
语法：
|
||||
|
||||
```
|
||||
@media (max-width: 屏幕最大宽度){
|
||||
|
||||
... 符合条件的样式 跟style样式表一样 含多个元素样式
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
@media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
|
||||
body{
|
||||
background: gold;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
|
||||
body{
|
||||
background: blue;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
|
||||
body{
|
||||
background:gray
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果参考b.html
|
||||
|
||||
> 使用媒体查询时，需要对应不同分辨率终端写多套所对应的样式，比较繁琐
|
||||
>
|
||||
|
||||
2.百分比
|
||||
|
||||
通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时，通过百分比单位可以使元素的高和宽随着浏览器的变化而变化，从而实现响应式效果
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
> 使用百分比做单位时，如果要定义一个元素的宽高，需要根据设计稿手动计算 换算成% 单位，容易出现误差
|
||||
|
||||
|
||||
|
||||
### rem
|
||||
|
||||
rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。**其实rem布局的本质是等比缩放，一般是基于宽度**.
|
||||
|
||||
这样我们就有了一个可控的统一参考系。我们现在有两个目标：
|
||||
|
||||
- rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
|
||||
- rem单位和px单位很容易进行换算，方便我们按照标注稿写css
|
||||
|
||||
使用：
|
||||
|
||||
借助js
|
||||
|
||||
```
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
;(function(designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width>maxWidth && (width=maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function() {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function(e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function(e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
/*
|
||||
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
|
||||
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
|
||||
*/
|
||||
```
|
||||
|
||||
1.复制上面这段代码到你的页面的头部的script标签的最前面。
|
||||
|
||||
2.根据设计稿大小，调整里面的最后两个参数值。
|
||||
|
||||
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
|
||||
|
||||
32
csspress/demo/a.html
Normal file
32
csspress/demo/a.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
height: 60px;
|
||||
position: sticky;top: 10px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
</html>
|
||||
36
csspress/demo/b.html
Normal file
36
csspress/demo/b.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
0
htmlpress/demo/demo1.html
Normal file
0
htmlpress/demo/demo1.html
Normal file
BIN
htmlpress/html基础.assets/image-20201230114235600.png
Normal file
BIN
htmlpress/html基础.assets/image-20201230114235600.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
htmlpress/html基础.assets/image-20201230114458198.png
Normal file
BIN
htmlpress/html基础.assets/image-20201230114458198.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
71
htmlpress/html基础.md
Normal file
71
htmlpress/html基础.md
Normal file
@ -0,0 +1,71 @@
|
||||
# HTML
|
||||
|
||||
## html 的基本概念
|
||||
|
||||
html（HyperText Markup Language --超文本标记语言），不是一个编程语言，而是一个用于定义一个网页的页面结构的标记语言。网页的内容不局限于文字，可以是 一个段落，一个列表，一张图片，一个表格... HTML 由一系列的元素组成。
|
||||
|
||||
> 注： html 定义网页 的页nchuang面结构， css定义页面的展现形式，javascript 定义页面的功能行为。
|
||||
|
||||
|
||||
|
||||
## 开始我们的HTML 之旅
|
||||
|
||||
开始之前 需要新建一个 后缀名为.html 的文件，我们后面所说的所有操作，都是在html 文件中进行的
|
||||
|
||||
可以使用的编辑器有很多： 记事本，editplus, notepad++, **vscode** ....这里推荐vscode
|
||||
|
||||
### html 基本结构
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
> 在解读上面的代码之前，我们先来看这些由<(左尖括号), 内容 , >(右尖括号) 组成的内容，这些内容叫做标签（tag）, 在html中用<> 把他们包裹起来是为了与其他纯文本内容进行区分
|
||||
|
||||
> <!DOCTYPE html> 是Document Type Declaration 的简称，用来声明文档，也就是告诉浏览器当前使用的是哪种HTML
|
||||
> <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
|
||||
><head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息 一般写在head 中间
|
||||
>
|
||||
><body></body> 表示页面的身体 页面内容需要写在 body 标签内 --
|
||||
|
||||
### 写第一个网页 --hello world
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>第一个页面</title>
|
||||
</head>
|
||||
<body>
|
||||
hello world
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>第一个页面</title>
|
||||
</head>
|
||||
<body>
|
||||
hello world
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### 元素
|
||||
|
||||
```
|
||||
<p>hello world</p>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user