html-css - y2000zhang

---
title: html-css
date: 2019-10-14 22:19:09
categories: 前端
tags: [前端,html,css]
---
[TOC]
# HTML
HTML，超文本标记语言
负责页面中的结构，定义出页面中的各个组成部分
HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分

## HTML页面的基本结构
一个网页有三个部分组成：结构html、表现css、行为js
### 结构:html
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片
结构使用HTML来编写

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
</body>
</html>
```

### 表现css
表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景...
使用CSS来设置页面中元素的样式

### 行为js
页面和用户之间的交互行为
使用JavaScript来设置页面的行为
一个设计优良的网页要求结构、表现、行为三者分离
在开发中总是要面临一个问题，就是程序之间的耦合，三者分离就是为了解耦合

## 标签(元素)
成对出现
```html
<标签名></标签名>
```

自结束标签
```html
<标签名 />
```

### 块元素和内联元素

#### 块元素

**块元素会独占页面中的一行，无论他的内容的多少**
一般使用块元素对页面进行布局
常见的块元素
div
p
h1~h6

#### 内联元素

**内联元素只占用自身的大小，不会独占一行**
内联元素也叫行内元素（inline）
一般内联元素都是用来为文本来设置效果
常见的内联
span
a
img
包裹规则
**一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素**
**a元素可以包含任意元素，除了a本身**
**p元素不能包含任何块元素**

### 元素之间的关系

父元素
**直接**包含子元素的的元素叫做父元素
子元素
**直接被**父元素包含的元素叫做子元素
祖先元素
**直接或间接**包含后代元素的元素叫做祖先元素，父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素
兄弟元素
拥有**相同父元素**的元素叫做兄弟元素

### 属性

通过属性可以设置标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
例子：
```html
<标签名属性名="属性值" 属性名="属性值"></标签名>
<标签名属性名="属性值" 属性名="属性值" />
```

### 常用标签
`<!doctype html>`文档声明
用来标识当前页面的html的版本
该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的
`<html>`网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
#### `<head>`网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签
`<title>`用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
`<meta>`
用来设置网页的元数据，比如网页使用的字符集
`<meta charset="utf-8" />`
设置网页的关键字
`<meta name="keywords" content="关键字,关键字,关键字,关键字"/>`
设置网页的描述
`<meta name="description" content="网页的描述"/>`
请求的重定向
`<meta http-equiv="refresh" content="秒数;url=地址" />`
#### `<body>`网页的主体
网页中所有的可见部分都需要在body中编写
`<h1>` ~ `<h6>`
标题标签
在html中一共有六级标题
六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
一般一个页面中只能写一个h1
`<p>`
段落标签
`<br />`
换行标签
`<hr />`
水平线标签
内联框架
可以向一个页面中引入其他的外部页面
`<iframe>``</iframe>`
属性
src
外部页面的地址，可以使用相对路径
width和height
可以设置框架的宽度和高度
name
可以为内联框架指定一个名字
可以将该属性值设置为超链接的target属性的值
这样当点击超链接时，页面将会在相应的内联框架中打开
内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架

**`<a>`超链接**
可以使当前页面跳转到其他的页面
`<a>`链接的文字`</a>`
属性
href
指向链接跳转的目标地址，可以是一个相对路径
还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置
可以使用mailto:来创建一个发送电子邮件的超链接
target
指定在哪个窗口中打开链接
可选值
_self
默认值，默认在当前窗口打开链接
_blank
在新窗口中打开链接
内联框架的name属性值
在指定的内联框架中打开链接

## 语法

### 注释

注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码
也可以通过注释隐藏一些页面中不想显示的内容
### 实体
在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
&实体名;
常用的实体
空格` ` Non-Breaking [Space](https://www.baidu.com/s?wd=Space&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)” 的缩写，

<`<` 、>`>`、版权符号©`©`

图片标签
<img />
使用图片标签可以向页面中引入一个外部图片
属性
src
指向一个外部图片的路径，可以使用相对路径
alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
width
设置图片的宽度
height
设置图片的高度
图片的格式
JPEG
颜色丰富的图片，如，照片
GIF
颜色单一，简单透明的图片，动态图
PNG
颜色丰富，复杂透明的图片
图片选择的原则
效果一致，用小的
效果不一致，用效果好的
相对路径
相对于当前资源所在的目录的路径
可以使用../返回一级目录，返回几级使用几个../
xHtml语法规范
1.HTML中不区分大小写，但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整
要么成对出现
要么自结束标签
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值，且值必须加引号，单引号双引号都可以

## 文本标签

`<em>`
表示语气上的强调
`<strong>`
表示内容的重要性
`<i>`
表示单纯的斜体
`<b>`
表示单纯的加粗
`<small>`
表示细则一类的内容
`<cite>`
表示参考的内容，凡是加书名号的都可以使用cite
`<q>`
短引用，行内引用

`< blockquote>`

长引用，块级引用

`<sup>`
上标
`<sub>`
下标
`<del>`
删除的内容
` <ins>`
插入的内容

`< pre>`
预格式标签，可以保留代码中空格换行这些格式
`< code>`
表示程序代码

# css基础

Cascading（级联） Style Sheets(薄片，纸张，覆盖)，层叠样式表

## css样式三种方式

### 内联样式

可以将css样式编写到元素的style属性中
将样式直接编写在style属性中，这样的样式成为内联样式
只对当前元素（标签）有效，不方便复用
内联样式属于结构与表现耦合，不方便后期维护

```html
<p style="color: red; font-size: 40px">锄禾日当午，汗滴禾下土</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
```

### head编写style便签

也可以将CSS样式编写到head中的style标签里
将样式表编写的style标签中，然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式

```html
<style type="text/css">
p{ color: red;
font-size: 40px;
}
</style>
```

### 外部的CSS文件

还可以将样式表编写到**外部的CSS文件中**,然后通过**link标签来将外部的CSS文件引入到当前页面中**，
这样外部文件中的css样式表将会应用到当前页面中。

将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用，
最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存
加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件

```html
<link rel="stylesheet" type="text/css" href="style.css" />
```

## css语法简介:
### 选择器：
通过选择器可以选中页面中指定的元素，
并且将声明块中的样式应用到选择器对应的元素上
### 声明块：
声明块紧跟在选择器的后边，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构，
这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间使用;隔开，
声明的样式名和样式值之间使用:来连接
```css
p{
color:red;
font-size:50px;
}
```
### 注释
```css
/*
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
*/
```

## 单位

### 长度单位

**px**
像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成
一个像素指的就是一个像素点
在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小
**%**
可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值
当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面
**em**
em会相对于当前元素的字体大小来计算
1em = 1font-size
em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变

**rem....**

### 颜色单位

颜色单词
直接使用英文单词来表示颜色
red green blue orange
RGB值
所谓RGB值就是通过红绿蓝三元色的不同组合来搭配出各种不同的颜色
语法：
rgb(红色,绿色,蓝色)
这三个值需要一个0-255之间的值
0表示没有
255表示最大
rgb(50,200,30)
也可以使用百分数来设置RGB值，需要0%-100%之间的值
百分数最终也是转换为0-255的
0%相当于0
100%相当于255
rgb(100%,0%,0%)
十六进制RGB值
也是一种RGB值的表示方式，不同的是它使用的是16进制数字来表示而不是
语法：
#红色绿色蓝色
这里的颜色需要一个00-ff之间的值
例子：
#ff0000
如果颜色的是两位两位重复的，可以进行简写
比如 #aabbcc 可以写成 #abc
比如 #bbffaa 可以写成 #bfa

## 文本样式

字体
color
字体的颜色
font-size
字体的大小
浏览器中默认的字体大小一般都是16px，而我们开发时一般会统一为12px
font-family
设置文字的字体
font-style
设置斜体
font-weight
设置文字的加粗
font-variant
小型大写字母
font
文字的简写属性
可以同时设置所有的字体相关的样式
语法：
font: [加粗斜体小大字母] 大小[/行高] 字体
加粗，斜体，小大字母，顺序无所谓，写不写都行，如果不写在使用默认值
文本大小，和字体必须写，且大小必须是倒数第二个，字体必须是最后一个
大小后可以设置行高，可写可不写，如果不写则使用默认值
文本样式
line-height
**行高****
**文本默认都是在行高中垂直居中的**
**通过line-height可以修改行高**
行间距 = 行高 - 字体大小**

text-transform
设置文本的大小写

可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写

text-decoration
设置文本修饰

```css
a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
* */
text-decoration: none;
}
```
text-align
设置文本对齐
text-indent
设置首行缩进
它需要一个长度单位，如果是正值则首行向右移动，如果是负值则向左移动

```css
/*
* text-indent用来设置首行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位
*/
```

letter-spacing
字符间距
word-spacing
单词间距

```css
/*
* 在CSS并没有为我们提供一个直接设置行间距的方式，
* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
* 使用line-height来设置行高
* 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
*
* 行间距 = 行高 - 字体大小
*/
.p1{
font-size: 20px;

/*
* 通过设置line-height可以间接的设置行高，
* 可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
/*line-height: 200%;*/

line-height: 2;
}

.box{
width: 200px;
height: 200px;
round-color: #bfa;
/*
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height: 200px;
}

.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px "微软雅黑";
line-height: 50px;
}
```

# 选择器

通过选择器可以选中页面中的一组元素，然后为其设置样式

## 基础选择器

#### 元素选择器

根据标签名，选中页面中的指定元素
语法：标签名{ }
例子：

```css
div{}
p{}
h1{}
```

#### id选择器

根据元素的id属性值选中一个唯一的元素
语法：#id {}
例子：

```css
#box1{}
#hello{}
```

#### 类选择器

我们可以为元素设置class属性，

class属性和id属性类似，只不过class属性可以重复

拥有相同class属性值的元素，我们说他们是一组元素

可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开

根据元素的class属性值，选中一组元素
语法：.class{}
例子：

```css
.hello{}
.box{}
```

#### 通配选择器

选中页面中的所有元素
语法：*{}
通配选择器的性能比较差，尽量避免使用
#### 并集选择器

可以同时选中符合多个选择器的元素
语法：选择器1,选择器2,选择器N{}
例子：

```css
div,p,#box,.hello{}
```

#### 交集选择器

**对于id选择器来说，不建议使用复合选择器**,因为id已经能唯一标识

可以选中满足多个条件的元素

先元素再类

语法：选择器1选择器2选择器N{}

例子：

```css
p.hello{}
```

#### 后代元素选择器

选中指定元素的指定后代元素
语法：祖先元素（空格）后代元素{}
例子：

```css
div span {}
div p{}
```

#### 子元素选择器

**选中指定元素的指定子元素**
语法：父元素 > 子元素 {}
例子：

```css
div > span {}
div > p{}
```

### 声明块

声明块中实际上就是一个一个CSS声明
声明
每一个CSS声明都是一个样式，实际上就是一个名值对的结构
名和值之间使用:链接
:左边是样式的名字
:右边是样式的值
每一个声明以;结尾
例子

```css
color:red;
font-size:20px;
```

## 伪类和伪元素

伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

### 伪类：

:link
表示一个普通的链接（未访问过的链接）
:visited
表示访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色

:hover（盘旋，徘徊）
鼠标移入的链接，也可以为其他元素设置hover
:active
正在被点击的链接，也可以为其他元素设置active
:focus
表示元素获取焦点的状态，一般用于文本框
::selection（注意有两个冒号）
表示内容被选中的状态
在火狐中使用::-moz-selection来代替

### 伪元素：

:first-letter
表示第一个字符
:first-line
表示文字的第一行
:before
选中元素的最前边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
:after
选中元素的最后边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容

## 属性选择器

根据元素的属性选择指定元素
[属性名]
选取含有指定属性的元素
[属性名="属性值"]
选取属性值等于指定值的元素
[属性名^="属性值"]
选取属性值以指定内容**开头的元素**
[属性名$="属性值"]
选取属性值以指定内容结尾的元素
[属性名*="属性值"]
选取属性值中**包含指定内容的元素**

## 子元素的伪类

:first-child
寻找父元素的第一个子元素，**在所有的子元素中排序**（前面不指定特定元素就表示全部元素,指定就是交集选择器）
:last-child
寻找父元素的最后一个子元素，在所有的子元素中排序
:nth-child
寻找父元素中的指定位置子元素，在所有的子元素中排序
例子
p:nth-child(3)
可以使用even，来找到偶数的子元素
可以使用odd，来找到奇数的子元素
:first-of-type
寻找指定类型中的第一个子元素
:last-of-type
寻找指定类型中的最后一个子元素
:nth-of-type
寻找指定类型中的指定子元素

**:empty**

Selects elements that don't have any other elements inside of them.

**div:empty** selects all empty **<div>** elements.

**:nth-of-type(A)**

Selects a specific element based on its type and order in another element - or even or odd instances of that element.

**div:nth-of-type(2)** selects the second instance of a div.

**.example:nth-of-type(odd)** selects all odd instances of a the example class.

:only-child

You can select any element that is the only element inside of another one.

**:nth-last-child(A)**

Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!

Nth-of-type Selector with Formula

**:nth-of-type(An+B)**

The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

**span:nth-of-type(6n+2)** selects every 6th instance of a span, starting from (and including) the second instance.

**:only-of-type**

Selects the only element of its type within another element.

**p span:only-of-type** selects a span within any p if it is the only span in there.

## 兄弟元素选择器

**选取后一个兄弟元素**
前一个 + 后一个
选取后边所有的兄弟元素
前一个 ~ 后边所有

## 否定伪类
从一组元素中将符合要求的元素剔除出去
语法：
:not(选择器)
例子：
.abc:not(div)

## 样式的继承

为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。
通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。
但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档

## 选择器的优先级

当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级（权重）来决定。

**越精准，越优先**

优先级
内联样式1000
id选择器100
类和伪类选择器10
元素选择器1
通配选择器0
继承的样式：没有优先级
当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，**如果优先级一样，则显示靠后的样式（覆盖）**
**优先级计算时，总大小不能超过他的最大的数量级**
可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。

# 盒子模型

**CSS 框模型Box Model**

CSS中将每一个元素都设置为了一个矩形的盒子
将所有的元素都设置为盒子，是为了方便页面的布局
当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

## 盒子模型构成

每个盒子都由如下几部分构成 4

### 内容区： content

内容区相当于盒子存放东西的空间
内容区在盒子的最里边
元素的所有的子元素都是放在父元素的内容区
内容区设置

```
width
内容区的宽度
height
内容区的高度
```

### 边框 border

边框盒子可见框最外侧，边框是盒子的边缘
设置边框
**设置边框需要同时设置三个样式，缺一不可**
border-width
边框的宽度
可以同时指定四个边框的宽度，也可以分别指定
规则

```css
四个值
border-width : 10px 20px 30px 40px;
border-width : 上右下左;(顺时针)
三个值
border-width : 10px 20px 30px;
border-width : 上左右下;
两个值
border-width : 10px 20px;
border-width : 上下左右;
一个值
border-width : 10px;
border-width : 上下左右;
```
border-color
边框的颜色
border-style
边框的样式
除了这三个样式，CSS中还提供了
border-xxx-width
border-xxx-color
border-xxx-style
xxx可以是
top
right
bottom
left
通过这些样式可以单独指定四个边的颜色，宽度和样式
边框的简写属性

```css
border
border-left
border-top
border-right
border-bottom
```

```css
border: red solid 10px ;
border-left: red solid 10px ;
```

这个几个属性可以同时设置边框相关的的样式
**border可以同时设置四个边的颜色，宽度，样式**
**border-xxx可以单独设置某一个边**
规则
使用这些样式可以同时设置border-width border-style border-color，不同的属性使用空格隔开，并且**没有顺序要求**

### 内边距： padding

内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
盒子中一共有四个方向的内边距

```css
padding-top
padding-right
padding-bottom
padding-left
```

padding
可以同时设置四个方向的内边距，规则和border-width一致

```css
padding:上右下左
padding:上左右下
padding:上下左右
padding:上下左右
```

**盒子的可见框大小由内容区、内边距和边框共同决定**

### 外边距 margin

外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
也是具有四个方向的外边距

```css
margin-top
margin-right
margin-bottom
margin-left
```

简写属性
margin
规则和padding一致
margin值
可以设置为auto
**如果单独将左右外边距设置为auto**，则会将左或右外边距设置为最大值
如果同时将**左右外边距设置为auto，则会将左右外边距设置为一个相等的值**，通过这种方式使一个子元素在它的父元素中水平居中
**margin:0 auto**
**可以设置为负值**
如果将margin设置为负值，则元素会向相反的方向移动

**外边距的重叠**
**相邻的垂直外边距**会发生重叠现象
**相邻元素的外边距会取最大值**
**子元素的外边距会传递给父元素**
水平外边距不会重叠，而是取和

## 内联元素的盒子模型

**内联元素不能设置width和height**
padding
支持水平方向的padding
垂直方向的padding也支持，但是**不会影响布局**
border
支持四个方向边框，但是垂直的边框不会影响布局
margin
支持水平方向外边距，水平方向的相邻外边距不会重叠，而是求和
不支持垂直方向的
盒模型相关的样式

## CSS 定位属性（Positioning）

### display

**设置元素的显示类型**
可选值
none
元素不会在页面中显示，并且不会占据页面的位置
block
元素会作为块元素显示
inline
元素会作为内联元素显示
inline-block
元素会作为行内块元素显示
既具有内联元素的特点也具有块元素的特点
既不独占一行，又可以设置宽高

### visibility

**设置元素是否在页面中显示**
可选值
visible
默认值，元素在页面中正常显示
hidden
元素不在页面中显示，但是**依然在页面中占据位置**

### overflow

**设置元素如何处理溢出内容**
可选值
visible
默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden
溢出的内容会被隐藏不会显示
scroll
在父元素中同时添加水平和垂直方向的滚动条
不内容是否溢出都会添加滚动条
auto
根据需要自动生成滚动条

# 布局
## 文档流

文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素
1.块元素在文档流中**自上向下排列**
2.块元素在文档流中**宽度默认是父元素的100%**(auto)
3.块元素在文档流中**高度默认被内容撑开**
内联元素
1.内联元素在文档流中**自左向右排列**，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
2.内联元素在文档流中**宽度和高度默认都被内容撑开**

## 浮动

**使用float来设置元素浮动**
可选值
none
默认值，不浮动，元素在文档流中
left
元素向左浮动
right
元素向右浮动
特点
1.元素浮动以后会完全脱离文档流
2.浮动以后**元素会一直向父元素的最上方移动**
3.直到遇到**父元素的边框或者其他的浮动元素，会停止移动**
4.如果浮动元素的**上边是一个块元素，则浮动元素不会覆盖块元素**
5.浮动元素**不会超过他上边的浮动的兄弟元素**，最多一边齐
6.**浮动元素不会覆盖文字**，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点
元素浮动以后，会使其完全脱离文档流。
**块元素**
块元素脱离文档流以后
1.不会独占一行
2.宽度和高度都被内容撑开
**内联元素**
**内联元素脱离文档流以后会变成块元素**

## 高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当**子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷**
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱

我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

### 方法一开启父元素的BFC或hasLayout

BFC:Block Formatting Context,块级格式化环境

BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
**开启BFC以后元素将会具有如下特性**
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
一般都是使用overflow:hidden来开启BFC
**hasLayout**
在IE6中没有BFC，但是有一个和BFC类似的hasLayout
在IE6中可以通过开启hasLayout来解决高度塌陷的问题
副作用最小的开启方式
zoom:1
当为元素设置宽度非默认值时，会自动开启hasLayout

### 方法二：清除浮动

**clear可以用来清除其他浮动元素对当前元素的影响**
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
清除浮动以后，元素会回到其他元素浮动之前的位置

塌陷的父元素的最后添加一个空白的div，然后对该div进行**清除浮动**
然基本没有副作用，使用这种方式会在页面中添加多余的结构

### 方法三
用after伪类，向父元素后添加一个块元素，并对其清除浮动
种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构,这是我们最推荐使用的方式，几乎没有副作用

```css
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
```

## 定位

通过定位可以将页面中的元素，摆放到页面的任意位置
**使用position来设置元素的定位**

```
可选值
static
默认值，元素没有开启定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
```

### 偏移量

**当元素开启了定位以后，可以通过偏移量来设置元素的位置**。

靠近中心是正数，远离是负数。

```
left
元素距离定位位置的左侧距离
top
元素距离定位位置的上边距离
right
元素距离定位位置的右侧距离
bottom
元素距离定位位置的底部距离
```

**一般情况下，只使用两个值即可定义一个元素的位置。**

### 相对定位：ralative

1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素**相对于其自身在文档流中的位置**来定位
3.相对定位的元素**不会脱离文档流**
4.相对定位**不会改变元素的性质**，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素**会提升一个层级**，会覆盖其他元素

### 绝对定位： absolute
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是**相对于距离他最近的开启了定位的祖先元素进行定位**（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位，**子绝父相**），如果所有的祖先元素都没开启定位，则**相对于浏览器窗口进行定位**。
3.绝对定位的元素**会完全脱离文档流**
4.绝对定位**会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行**
5.绝对定位会使元素**提升一个层级**，会覆盖其他元素

### 固定定位:fixed

**固定定位是一种特殊的绝对定位**，它的特点大部分都和绝对定位一样.
不同的是，**固定定位的元素永远都是相对于浏览器窗口进行定位的**。并且他不会随滚动条滚动
IE6不支持固定定位

### 层级

定位元素 > 浮动元素 > 文档流中的元素

如果定位元素的层级是一样，则**下边的元素会盖住上边的**

当元素开启了定位以后，可以通过z-index来设置元素的层级
**1.z-index值越高元素越优先显示**
2.如果z-index值一样，或者都没有z-index则优先显示下边的元素
**3.父元素永远不会盖住子元素**

## 弹性(Flex)布局

详见Flex笔记

# 其他 css属性

## cursor 属性

https://www.w3school.com.cn/cssref/pr_class_cursor.asp

### 定义和用法

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

## transform 属性

https://www.w3school.com.cn/cssref/pr_transform.asp

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

## 设置元素的透明背景

opacity可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明

opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度) filter: alpha(opacity=50);
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明

## background属性

使用backgroundimage来设置背景图片
语法：backgroundimage:url(相对路径);

如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色

```css
backgroundimage:url(img2.jpg);
```

backgroundrepeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
norepeat ，背景图片不会重复，有多大就显示多大
repeatx，背景图片沿水平方向重复
repeaty，背景图片沿垂直方向重复

### background-position

背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，
第一个值是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个负值，则图片会向上移动指定的像素

### background-attachment

用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

当背景图片的backgroundattachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口

backgroundattachment: fixed;

# 常用标签

span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

a元素可以包含任意元素，除了他本身

p元素不可以包含任何块元素

div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，

div元素主要用来对页面进行布局的

## form表单

表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框注册登录这些操作都需要填写表单

使用form标签创建一个表单

action属性

*form标签中必须指定一个，该属性指向的是一个服务器的地址**
我们提交表单时将会提交到action属性对应的地址

**input框**

使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字

用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示

**单选按钮**
使用input来创建一个单选按钮，它的type属性使用radio
**单选按钮通过name属性进行分组，name属性相同是一组按钮**
像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器

如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性

**多选框**
使用input创建一个多选框，它的type属性使用checkbox

**下拉列表**

使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中

当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表

```html

你喜欢的明星 <select name="star">

<optgroup label="女明星">

<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>

<optgroup label="男明星">
<option value="ldh">刘德华</option>
<option value="pcj">潘长江</option>
</optgroup>

</select>

<br /><br />
```

textarea
使用textarea创建一个文本域
**按钮**

提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字

<input type="reset" />可以创建一个重置按钮，
点击重置按钮以后表单中内容将会恢复为默认值

使用input type=button可以用来创建一个单纯的按钮，
这个按钮没有任何功能，只能被点击

除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签
使用起来更加的灵活

```html
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
```

标签label

在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值

**在点击标签时，相当于对for的表单向选中**

```html
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br/>
```

**fieldset**

在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的同一组放到一个fieldset中

```html
<fieldset>

<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br />
<label for="pwd">密码 </label>
<input id="pwd" type="pwd" name="password"/><br />
</fieldset>
```

## table表格

**CSS border-collapse 属性**

```css
table{
border-collapse:collapse;
}
```

| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| -------- | ------------------------------------------------------------ |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |

### <td> 标签的 colspan. rowspan 属性

| 值 | 描述 |
| :------- | :---------------------------- |
| *number* | 设置单元格可横跨的列(行）数。 |

### caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

## 列表

列表就相当于去超市购物时的那个购物清单，

在HTML也可以创建列表，在网页中一共有三种列表：

1.无序列表

2.有序列表

3.定义列表

无序列表
使用ul(unordered list)来创建一个无序列表，在列表中使用li来表示一个列表项
无序列表使用符号作为项目符号
序列表
使用ol(ordered list)来创建一个无序列表，在列表中使用li来表示一个列表项
使用有序的序号作为项目符号
义列表
表相关的元素都是块元素，他们之间可以互相嵌套
除项目符号
list-style:none

## frameset框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
框架集可以同时引入多个页面，而内联框架只能引入一个，
在h5标准中，推荐使用框架集，而不使用内联框架

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签

属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols，指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小

frameset中也可以再嵌套frameset

frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="30% , * , 30%">

<frame src="table.html" />
<frame src="form.html" />

<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
</frameset>
</html>

```

# me

## CSS3 @media 查询

如果文档宽度小于 300 像素则修改背景颜色(background-color):

```css
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
```

## min-height 属性设置元素的最小高度。

设置以后：不能修改为小于此高度的距离

**css hack** 能有效识别低版本ie，具体八度

clearfix

```css
解决父子元素的外边距重叠

.box1:before{
content: "";

display:table可以将一个元素设置为表格显示

display: table;
}

解决父元素高度塌陷

.clearfix:after{
content: "";
display: block;
clear: both;
}

```

经过修改后的clearfix是一个多功能的
**既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠**

```css
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
```

## 长表格

有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中

**thead中的内容，永远会显示在表格的头部**
**tfoot中的内容，永远都会显示表格的底部**
tbody中的内容，永远都会显示表格的中间

**如果表格中没有写tbody，浏览器会自动在表格中添加tbody**
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行需要通过tbody > tr

## css精灵图

CSS-Sprite

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验。
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

为了解决该问题，**可以将三个图片整合为一张图片**，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite,css精灵图）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

title属性**，这个属性可以给任何标签指定当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示

<p title="hello">我是一个段落</p>
### **浏览器默认样式**

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
清除浏览器的默认样式

```css
*{
margin: 0;
padding: 0;
}
```

这种方式支持IE6，但是这种效果在IE Tester中无法测试

发表于 2020-11-01 10:35 y2000zhang 阅读(93) 评论(0) 收藏举报