# html5-css3-introduction
**Repository Path**: hermi0ne/html5-css3-introduction
## Basic Information
- **Project Name**: html5-css3-introduction
- **Description**: udemy中Build responsive project with html5 and css3课程code和笔记
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-09-06
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 一.居中
## 1. 水平居中
### 1.1 block块中的block块居中
```css
{
margin: 0 auto;
}
```
### 1.2 block块中的inline居中
```css
{
text-align: center;
}
```
## 2. 垂直居中
### 2.1 div中的div居中
div水平居中和竖直居中
```css
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
如果想让div位于父div的中间，需要父div的position为relative
### 2.2 block块中的inline居中
```css
{
line-height: 100px;
}
```
value值为高度，根据需要调整。
### 2.3 block块中带有图片的文字居中
```html
这是一幅
位于段落中的图像。
Document
leihou
这是伦敦
的图片
xxxxxx
::after
```
:before选择器同理。
## :last-child 和 :last-of-type
* ```:last-child```
* 先找到p标签的父元素，然后找到父元素的最后一个子元素，如果子元素是p标签，那么选择它，否则这个选择器不起作用
* ```:last-of-type```
* 先找到p标签的父元素，然后找到父元素的最后一个p标签的子元素
```html
:last-child、:last-of-type
```
# 三.css中的属性
## 3.1 transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
### 语法
```css
transform: none|transform-functions;
```
## 3.2 transition
transition 属性是一个简写属性，用于设置四个过渡属性：
* transition-property:规定设置过渡效果的 CSS 属性的名称
* transition-duration:规定完成过渡效果需要多少秒或毫秒
* transition-timing-function:规定速度效果的速度曲线
* transition-delay:定义过渡效果何时开始
**注释**：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
### 语法
```css
transition: property duration timing-function delay;
```
## 3.3 display
共有三种display属性：block, inline, inline-block
### block
1. 表现为块级元素
2. 元素最后自动换行
3. 一些默认块级元素：div,ul,ol,dl,img,p….
4. 块级元素里面可以放内联元素.但是应该据事实来看，不一样的标签内嵌的不一样。比如P标签，内嵌的只能是内联元素
5. 默认填满父元素
6. 可以设置width,height,margin,padding
### inline
1. 表现为行级元素(内联元素)
2. 元素最后不换行
3. 一些默认行级元素：span,a,input,button….
4. 内联元素里面不能放块级元素
5. 直到内容打到边缘才换行,不一定会填满父元素
6. width,height属性失效，水平方向的Margin，padding可以，竖直方向不行。但也应该由情况而定，例如input标签就可以设置height等，**可以设置行高line-height**
### inline-block
1. 外部表现为内联元素，内部表现为块级元素。
2. 该元素本身最后不换行，内部元素换行。
3. 无默认元素。
4. 可以放任意元素，一般是块级元素
5. 外部不换行，但会填满父级节点。当设置为浮动时，父级依然会被撑开。
6. 外部表现为内联，则不会换行。内部表现为块级元素，则设置width,height,margin,padding会生效
当有浮动元素时，不需要清除浮动。
# 四.图片
## 4.1 放大缩小尺寸
当图片的宽或高发生变化时（通过改变图片所在块的宽或高），此时可以设置图片的高或宽为auto来放大缩小图片。
```css
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo img {
width: 100%;
height: auto;
}
```
## 4.2 背景图片
```css
header {
/*黑色(0, 0, 0), 70%的透明度*/
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
/* linear-gradient(to bottom right, red , blue);
从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：
第一个参数默认 to bottom*/
background-size: cover; /*把背景图片放大到适合元素容器的尺寸，图片比例不变，但是超出容器的部分可能会裁掉*/
/* background-size: 100%; 按容器比例撑满，图片变形 */
background-position: center;
height: 100vh; /*vh: 视窗的高度；vw: 视窗的宽度*/
background-attachment: fixed; /* 当页面的其余部分滚动时，背景图像不会移动 */
}
```
# 五.清除float
由于子元素设置了float，导致父元素不能被撑开（高度为0），所以要清除float。
如果子元素设置了float为left或者right，给父元素的class属性添加上clearfix则可以不让float影响后续的标签（清除float）
清除float的思路：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.但因为放置标签的话会导致页面标签混乱，所以可以使用伪元素。
```css
.clearfix { zoom: 1; /*为了兼容IE*/ }
.clearfix:after {
content: ''; /* 设置内容为空 */
clear: both; /* 清除浮动 */
display: block; /* 将文本转为块级元素 */
height: 0; /* 高度为0 */
visibility: hidden; /* 将元素隐藏 */
}
```
# 六.navbar
## 6.1 制作导航标签
一般用
```html
```
来制作navbar。
有两种方式能让每个```li```并排放置
### 第一种
```css
li {
display: inline-block;
/* margin: ; */
/* padding: ; */
}
```
这种方式一般需要父标签设置```float: left;```(或者```float: right;```)，因为navbar里面不止这些导航的链接，还有一些别的元素，所以需要设置父标签(```ul```)为float。
### 第二种
```css
li {
float: left;
/* margin: ; */
/* padding: ; */
}
```
**这种方式是看似能达到效果，但是实际上不行**。因为```li```设置为float，那么父标签(```ul```)的height就为0，因为子标签浮动，所以就撑不起来父元素了。所以需要在子标签后面设置清除浮动，这样会造成页面紊乱。
> 所以要用第一种方式
# 七.container
制作container的时候，需要给它设置一个宽度，但是如果设置```width```的话，当浏览器的屏幕缩小，就会出现滚动条，所以可以改设```max-width```
```css
.row {
max-width: 1140px;
}
```
# 八.一些技巧
## 8.1
如果有一些div中没有元素，但是又想让该div和其他并列的div有相同的height，**可以空白（``` ```）来填充**
## 8.2 如果div中有元素溢出了（一般发生在设置了div的height和width），但是div中的内容超出了设置的height和width），可以通过设置```overflow: hidden```值来隐藏溢出部分
```html
Document
雷猴
Document
leihou
```
注意观察div2中文字的位置
// TODO
# 十.jQuery的一些方法
## animate
jQuery的```animate()```方法允许创建自定义动画，
```js
$(selector).animate({params}, speed, callback);
// speed单位可以为ms
```
## scrollTop
```scrollTop()``` 方法设置或返回被选元素的垂直滚动条位置。
**提示**：当滚动条位于最顶部时，位置是 0。
语法如下：
```js
// 返回垂直滚动条位置：
$(selector).scrollTop();
// 设置垂直滚动条位置：
$(selector).scrollTop(position)
```
## offset
```offset()``` 方法返回或设置匹配元素相对于文档的偏移（位置）
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法**只对可见元素有效**。
```html
本段落的偏移是 unknown left 和 unknown top。
获得 offset
```
## slideToggle
```slideToggle()``` 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
```html
This is a paragraph.
Toggle
``` 
位于段落中的图像。
的图片