web概念概述
HTML
- 概念：是最基础的网页开发语言
- 快速入门
  - 文本标签：和文本有关的标签
    - 标题标签
一级标题
- 二级标题
CSS：页面美化和布局控制

web概念概述

JavaWeb：

使用Java语言开发基于互联网的项目

软件架构：

C/S: Client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷…
优点：

用户体验好

缺点：

开发、安装，部署，维护麻烦
B/S: Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：

开发、安装，部署，维护简单

缺点：

如果应用过大，用户的体验可能会受到影响
对硬件要求过高

B/S架构详解

资源分类：

静态资源：

使用静态网页开发技术发布的资源。
特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器浏览器中内置了静态资源的解析引擎，可以展示静态资源

动态资源：

使用动态网页及时发布的资源。
特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

我们要学习动态资源，必须先学习静态资源！
静态资源：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言
- 超文本:
  - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言:
  - 由标签构成的语言。<标签名称> 如 html，xml
  - 标记语言不是编程语言

快速入门

语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
  1. 围堵标签：有开始标签和结束标签。如
  2. 自闭和标签：开始标签和结束标签在一起。如
3. 标签可以嵌套：
  需要正确嵌套，不能你中有我，我中有你
  错误：<a><b></a></b>
  正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

html的标签不区分大小写，但是建议使用小写。

代码： ```html

Hello World

<font color='green'>Hello World</font>




<a name="3f3079e9"></a>
## 标签学习

<a name="0fbc5227"></a>
### 文件标签：构成html最基本的标签

```html
<html></html>:html文档的根标签
<head></head>：头标签。用于指定html文档的一些属性。引入外部的资源
<title></title>：标题标签。
<body></body>：体标签      
<!DOCTYPE html>：html5中定义该文档是html文档

文本标签：和文本有关的标签

标题标签

<h1>~<h6>:字体大小逐渐递减

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签

<p></p>：段落标签

    第一段
<br />
    第二段

换行标签

 <br>

字体加粗

<strong></strong>  推荐使用
<b></b>

字体倾斜

<em></em>   推荐使用
<i></i>

删除线

<del></del>   推荐使用
<s></s>

下划线

<ins></ins>   推荐使用
<u></u>

布局标签div和span

<div></div>:每一个div占满一整行。块级标签
<span></span>：文本信息在一行展示，行内标签 内联标签

字体

<hr>：展示一条水平线
      属性：
            color：颜色
            width：宽度
            size：高度
            align：对其方式
                center：居中
                left：左对齐
                right：右对齐
<font>:字体标签
<center>:文本居中
      属性：
            color：颜色
            size：大小
            face：字体
      属性定义：
          color：
              1. 英文单词：red,green,blue
              2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
              3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
          width：
              1. 数值：width='20' ,数值的单位，默认是 px(像素)
              2. 数值%：占比相对于父元素的比例

图片标签

<img>：展示图片，单标签
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
    属性：
        src：指定图片的位置
        alt:替换文本，图片显示不出来的时候显示的文字
        title：提示文本，鼠标放置在图片上的时候显示
        width ：设定图像宽度，单位为像素
        height：设定图像高度，单位为像素
        border：设定图像边框，单位为像素

链接标签

<a></a>:定义一个超链接
        属性：
            href：指定访问资源的URL(统一资源定位符)
            target：指定打开资源的方式
                _self:默认值，在当前页面打开
                _blank：在空白页面打开

        * 代码：
            <!--超链接  a-->
            <a href="http://www.itcast.cn">点我</a>
            <a href="http://www.itcast.cn" target="_self">点我</a>
            <a href="http://www.itcast.cn" target="_blank">点我</a>
            <a href="./5_列表标签.html">列表标签</a><br>
            <a href="mailto:itcast@itcast.cn">联系我们</a>
       空链接：<a href="#">联系我们</a>
       下载链接：href里面链接的地址是.zip等压缩包或者.exe
       网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
            <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
       锚点链接：点击链接，可以快速定位到页面中的某个位置（同一个页面，快速定位）
            href="#id"

注释标签

<!--注释-->

特殊字符

特殊字符	描述	字符代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和（与）	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

表格标签

<table>
    <tr>
        <th>表头单元格</th>
    </tr>
    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>

    <tr>
        <td>单元格内的文字</td>
        <td>单元格内的文字</td>
    </tr>
</table>

属性：
    align:规定表格相对周围元素的对齐方式
        left、center、right
    border:规定表格单元格是否拥有边框，默认为""，表示没有边框。
        1或""
    cellpadding:规定单元边沿与其内容之间的空白，默认为1像素
        像素
    cellspacing:规定单元格之间的空白，默认为2像素
        像素
    width:规定表格的宽度
        像素或百分比

表格划分区域
    <thead></thead>
    <tbody></tbody>
合并单元格：
    行合并：rowspan="合并单元格的个数"
    列合并：colspan="合并单元格的个数"
    属性写在目标单元格

列表标签

有序列表：
    <ol>
        <li>第一个</li>
        <li>第二个</li>
    </ol>
注意：
    <ol></ol>标签只能嵌套<li></li>，但<li></li>可以嵌套任意标签
无序列表：
    <ul>
        <li>第一个</li>
        <li>第二个</li>
    </ul>
注意：
    <ul></ul>标签只能嵌套<li></li>，但<li></li>可以嵌套任意标签
自定义列表：
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
    </dl>
注意：
    <dl></dl>标签只能嵌套<dt></dt>和<dd></dd>，但<dt></dt>和<dd></dd>可以嵌套任意标签

语义化标签-header和footer

<header>：页眉
<footer>：页脚

表单标签

用处：收集用户信息。

组成：表单域、表单控件（表单元素）、提示信息

表单控件：

input输入表单元素
select下拉表单元素
textarea文本域表单元素

<form>
     <input></input>
            <input type = "text"></input>
            <input type = "placeholder"></input>
            <input type = "password"></input>
            <input type = "radio"></input>
            <input type = "checkbox"></input>
            <input type = "file"></input>
            <input type = "hidden"></input>
            <input type = "submit"></input>
            <input type = "button"></input>
            <input type = "image"></input>
    <label></label>
    <select></select>
    <textarea></textarea>
</form>
概念：用于采集用户输入的数据的。用于和服务器进行交互。
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
     属性：
         action：指定提交数据的URL
         method:指定提交方式
               分类：一共7种，2种比较常用
               get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
               post：
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

单项中的数据要想被提交：必须指定其name属性

<input></input>：可以通过type属性值，改变元素展示的样式
type属性：
    text：文本输入框，默认值
    placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息    
    password：密码输入框
    radio:单选框
        注意：
                1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                3. checked属性，可以指定默认值
    checkbox：复选框
        注意：
                1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                2. checked属性，可以指定默认值

    file：文件选择框
    hidden：隐藏域，用于提交一些信息。
     按钮：
         submit：提交按钮。可以提交表单
         button：普通按钮
         image：图片提交按钮
                 src属性指定图片的路径

<label></label>：指定输入项的文字描述信息
    注意：
        label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

<select></select>: 下拉列表
    子元素：option，指定列表项
    selected = "selected"时默认选中

<textarea></textarea>：文本域
    cols：指定列数，每一行有多少个字符
    rows：默认多少行。

CSS：页面美化和布局控制

概念

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

组成

1. 选择器
2. 一条或多条声明

CSS的引入方式

内联样式

 * 在标签内使用style属性指定css代码
 * 如：<div style="color:red;">hello css</div>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码
<style></style>理论可以放在任意位置，但一般会放在<head></head>标签中
* 如：
<style></style>一般放置在<head></head>中
    <style>
        div{
            color:blue;
        }

    </style>
    <div>hello css</div>

外部样式

定义css资源文件。
a.css文件：

div{
    color:green;
}

在head标签内，定义link标签，引入外部的资源文件
如：

<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意：

1,2,3种方式 css作用范围越来越大
1方式不常用，后期常用2,3
3种格式可以写为：

<style>
        @import "css/a.css";
</style>

css语法

* 格式：
    选择器 {
        属性名1:属性值1;
        属性名2:属性值2;
        ...
    }
* 选择器:筛选具有相似特征的元素
* 注意：
    * 每一对属性需要使用；隔开，最后一对属性可以不加；

选择器：筛选具有相似特征的元素

基础选择器

id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
```
#id属性值{}
```

元素选择器：选择具有相同标签名称的元素

标签名称{}
注意：id选择器优先级高于元素选择器

类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器
一个元素可以有多个类名，用空格隔开

扩展选择器

选择所有元素：
```
语法： *{}
```

并集选择器：
```
选择器1,选择器2{}
```

后代选择器：筛选选择器1元素下的选择器2元素（可以是间接后代）
```
可以是多级子标签： 选择器1 选择器2 选择器3{}
选择器1 选择器2{}
```

子选择器：筛选选择器1的直接子代选择器2
```
选择器1 > 选择器2{}
```

属性选择器：选择元素名称，属性名=属性值的元素
```
元素名称[属性名="属性值"]{}
```

链接伪类选择器：选择一些元素具有的状态 ```css

语法：元素:状态{}
如： a:link{ color:green }
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

声明顺序LVHA：link、visited、hover、active




7.focus伪类选择器

```css
把获得光标的表单元素选出
intput:focus{
    background-color:yellow
}

属性

字体、文本

font-family:字体
        可以设置多个，用逗号隔开，多个单词的字体名字用引号。浏览器优先使用第一种字体，没有则延后。
font-size：字体大小，单位为px
        标题标签比较特殊，需要单独指定大小。
font-weight:字体粗细
        normal:正常字体，相当于number值为400
        bold:粗体，相当于number值为700
        bolder:特粗体
        lighter:细体
        number:100|200|300|400|500|600|700|800|900
font-style:字体倾斜
        normal：正常，不倾斜
        italic:倾斜

复合属性:按以下格式
font:font-style font-weight font-size/line-height font-family
可以省略部分，但font-size和font-family不能省略，否则font属性不起作用。

文本

Text属性可以设文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距
color：文本颜色
     1.预定义颜色值：red,green,blue
     2.十六进制：#FF0000,#FF6600,#29D794
     3.RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)    最常用
text-align：对其方式，只能设置水平对齐
     center：水平居中
     right:右对齐
     left:左对齐
text-decoration：装饰文本
     none:默认
     underline:下划线
     overline:上划线
     line-through:删除线
text-indent:段落首行缩进
     1.10px：缩进10像素
     2.2em:缩进2个字
line-height：行高，单位为px
     行间距由上间距、文本高度和下间距组成，调整行高不会改变文本高度
     比如文本高度为16px，行高为26px，则上间距和下间距都为5px

背景

background：

边框

border：设置边框，符合属性

尺寸

width：宽度
height：高度

盒子模型：控制布局

margin：外边距
padding：内边距
        * 默认情况下内边距会影响整个盒子的大小
        * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

float：浮动
        left
        right

去掉列表前的圆点
```
list-style:none;
```

圆角边框

border-radius:10px|50%;(高度和宽度的一半)
border-radius:四个值，分别为左上开始，顺时针
border-radius:两个值，分别为左上、右下

分开写
boder-top-left-radius:等等

盒子阴影

box-shadow:h-shadow v-shadow blur spread color insert;
        h-shadow:必需，水平阴影的位置，允许为负值
        v-shadow:必需，垂直阴影的位置，允许为负值
        blur:可选，模糊距离
        spread:可选，阴影的尺寸
        color:可选，阴影的颜色
        insert:可选，将外部阴影改为内部阴影

文字阴影

text-shadow:h-shadow v-shadow blur color;
        h-shadow:必需，水平阴影的位置，允许为负值
        v-shadow:必需，垂直阴影的位置，允许为负值
        blur:可选，模糊距离
        color:可选，阴影的颜色

浮动

css三种传统布局：
    标准流：标签按照规定好的默认方式排列
    浮动：
    定位：
多个块级元素纵向排列用标准流，横向排列用浮动

浮动：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘
语法：
选择器 {
    float:属性
}
属性值：
    none:
    left:
    right:

浮动特性：
1. 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
    浮动的盒子不再保留原先的位置
2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对其排列
    浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3. 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
    如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度
    如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
    浮动的盒子中间是没有缝隙的，是紧挨着一起的

浮动布局注意点:
1. 浮动元素经常和标准流父级搭配使用，先用标准流定位置，再在其中放置浮动
2. 一个元素浮动，兄弟元素也浮动
    浮动的盒子影响后面的标准流，但不会影响前面的标准流。
3. 父盒子可以不设高度，自适应内容（有的内容长，内容短）
    但是，这样会有问题，父盒子可能高度为0
    清除浮动：浮动元素不再占用原文档流的位置，会影响排版
    清除浮动的本质：清除浮动元素造成的影响
    语法：
         选择器 {
             clear:left|right|both;
         }
    (1)额外标签法：
        最后一个非浮动空标签（块级元素）清除浮动
        缺点：结构差，空标签无意义
    (2)父级添加overflow属性:
        overflow:hidden;
        缺点：无法显示溢出部分
    (3)after伪元素法：
            .clearfix:after{
                content:"";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
            .clearfix {
                *zoom:1;
            }
            在父级元素加类名clearfix;
    (4)双伪元素法：
            .clearfix:before,.clearfix:after{
                content:"";
                display:table;
            }
            .clearfix:after{
                clear:both;
            }
            .clearfix{
                *zoom:1;
            }
            有点：代码更简洁
            缺点：照顾低版本浏览器
            代表网站：小米，腾讯

案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }

        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }
                .rg_center{
            float: left;
           /* border: 1px solid red;*/

        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child{
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }

        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }

    </style>

    </head>
    <body>

    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>

        </div>

        <div class="rg_center">
            <div class="rg_form">
                <!--定义表单 form-->
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male"> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="checkcode" >验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="img_check" src="img/verify_code.jpg">
                            </td>
                        </tr>
                                                <tr>
                            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                        </tr>
                    </table>

                </form>
                            </div>

        </div>

        <div class="rg_right">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
            </div>
            </body>
    </html>

Emmet语法-快速生成代码

快速生成HTML结构语法

生成标签直接输入标签名按tab即可，比如div然后tab键，就可以生成<div></div>
如果想要生成多个相同标签，加上*就可以了，比如，div*就可以快速生成3个div
如果有父子级关系的标签，就可以用>，比如ul>li
如果有兄弟关系的标签，用+就可以了，比如div+p
如果生成带有类名或者id名字的div，直接写.demo或者#two tab键就可以了。p.one生成<p class="one"></p>
如果生成的div类名是有顺序的，可以用自增符号$。.demo$*5可以生成5个类名自增的div
如果想要在生成的标签内部写内容可以用{}表示

快速生成CSS样式语法

简写属性，每个单词第一个字母

快速格式化代码 ``` 右键，格式化代码快捷键：shift+alt+f

vs code中设置保存时自动格式化代码设置，搜索emmet.include 添加以下两行 “editor.formatOnType”:true “editor.formatOnSave”:true




<a name="7977ba7d"></a>
## 元素显示模式

1. 
介绍
<br />网页标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

2. 
HTML分类<br />
行内元素、块元素

3. 
块元素


```html
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是比较典型的块元素。
特点：
    * 独占一行
    * 高度，宽度，外边距以及内边距都可以控制
    * 宽度默认是容器（父级宽度）的100%
    * 是一个容器及盒子，里面可以放行内或者块级元素 
注意事项：
    * 文字类的元素内不能使用块级元素
    * <p>标签主要用于存放文字，因此<P>里面不能放块级元素，特别是不能放<div>
    * <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>，其中<span>标签是最典型的行内元素。也称为内联元素
特点
    * 相邻行内元素在一行上2，一行可以显示多个
    * 高、宽直接设置是无效的
    * 默认宽度就是它本身内容的宽度
    * 行内元素只能容纳文本或其他行内元素

行内块元素

<img/>,<input/>,<td></td>，他们同时具有块元素和行内元素的特点

特点
    和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个
    默认宽度就是它本身内容的宽度
    高度，行高，外边距，内边距都可以控制

元素显示模式转换

转为块级元素：display:block
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

垂直居中技巧

让文字的行高等于盒子的高度

背景

背景颜色

background-color:transparent;    透明（默认）

背景图片

background-image:none|url(url)
易于控制位置

背景平铺：重复放置
background-repeat:no-repeat|repeat|repeat-x|repeat-y
页面元素可以同时加入背景图片和背景元素，但背景图片会显示在上方

背景图片位置
background-position:x y;
    方位名词：left|right|center|top|bottom 顺序无关
             省略一个，另一个默认居中
    数值：百分数|像素
             若省略，则省略的是y,y默认居中
    混合使用：如20px center;

背景图像固定（背景附着）

background-sttachment:scroll|fixed
        scroll:背景图像随对象内容滚动
        fixed：背景图像固定

背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景色半透明

background:rgba(0,0,0,0.3);
最后一个是透明度，取值0~1。

CSS三大特性

层叠性

就近原则，只有部分冲突的话，则只覆盖冲突的设置

继承性

子标签可以继承父标签的某些样式

行高的继承
行高也可以没有单位，表示字体大小的1.5倍

优先级

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

div{
    color:pink!important;
}

选择器	选择器权重
继承或`*`	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=””	1,0,0,0
!important	无穷大

权重叠加

权重虽然叠加，但不会进位
ul li{
    权重为0,0,0,1 + 0,0,0,1 = 0,0,0,2；
}
li{
    权重为0,0,0,1
}
.nav li{
    权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1；
}

盒子模型

盒子边框

border:边框
border:border-width|border-style|border-color
注意：样式简写没有顺序要求

border-width:5px    边框粗细
border-style:none|dotted(点线边框)|dashed(虚线边框)(虚线边框)|solid(实线边框)
border-color：设置边框颜色

可以分别设置每一边的边框
border-top:border-width|border-style|border-color
border-left:border-width|border-style|border-color
border-right:border-width|border-style|border-color
border-ottom:border-width|border-style|border-color

表格细线边框

table,td{
    border:1px solid pink;
}

边框合并：合并相邻边框
border-collapse:collapse;

边框影响盒子大小

边框实际在盒子外侧

内边距

padding:5px;             所有边
padding:5px 10px;       上下：5px  左右10px
padding:5px 10px 20px;  上：5px  左右：10px 下：20px      
padding:5px 10px 20px 30px;        上右下左  顺时针      

padding-left:
padding-right:
padding-top:
padding-bottom:

内边距也会影响盒子大小

如果没有加width，则不会影响宽度，宽度继承父容器。

外边距

margin:设置盒子与合资的大小

例：
<style>
.div1{
    margin-bottom:20px
}
</style>
<div class="div1">1</div>
<div>1</div>

同padding一样，也可以复合设置。 

外边距可以让块级盒子水平居中，但必须满足两个条件
        1. 盒子必须指定了宽度
        2. 盒子左右的外边距都设置为auto

嵌套块元素垂直外边距的塌陷

父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden

清除内外边距

*{
    margin:0;
    padding:0;
}
行内元素尽量只设置左右边距

特殊字符	描述	字符代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和（与）	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

特殊字符	描述	字符代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和（与）	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

特殊字符	描述	字符代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和（与）	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`