HTML5+CSS3基础
文章目录
- HTML
-
-
- 网页
-
- 什么是网页
- 什么是HTML
- 常用浏览器
- Web标准
- HTML语法规范
- HTML基本结构标签
-
- 第一个HTML网页
- 开发工具
- DOCTYPE和lang以及charset字符集的作用
- HTML常用标签
-
- 标题标签
- 段落标签与换行标签
- 文本格式化标签
- div和span标签
- 超链接
- 注释与特殊字符
- 表格标签
- 列表标签
- 表单
-
- CSS
-
-
- CSS简介
-
- CSS语法规范
- CSS基础选择器
-
- 选择器分类
- 元素选择器
- 类选择器
- 类选择器-多类名
- id选择器
- 通配符选择器
- 总结
- CSS字体属性
-
- 字体(font-family)
- 字体大小(font-size)
- 字体粗细(font-weight)
- 文字样式(font-style)
- Font复合属性(font)
- 字体属性总结
- CSS文本属性
-
- 文本颜色(color)
- 对齐文本(text-align)
-
- 使图片水平居中对齐
- 装饰文本(text-decoration)
- 文本缩进(text-indent)
- 行间距(line-height)
- 文本属性总结
- CSS引入方式
-
-
- 内部样式表
- 行内样式表
- 外部样式表
-
- CSS的复合选择器
-
- 后代选择器
- 子元素选择器
- 并集选择器
- 伪类选择器
- 链接伪类选择器
- :focus伪类选择器
- 复合选择器总结
- CSS元素的显示模式
-
- 块元素
- 行内元素(内联元素)
- 行内块元素
- 显示模式总结
- 显示模式转换
- 单行文字垂直居中
-
- 原理
- CSS背景
-
- 背景颜色（background-color）
- 背景图片(background-image)
- 背景平铺(background-repeat)
- 背景图片位置(background-position)
- 背景图像固定(background-attachment)
- 背景图像复合写法(background)
- 背景色半透明
- 背景总结
- CSS三大特性及权重
-
- 层叠性
- 继承性
- 行高的继承
- 优先级
- 优先级注意点:
- CSS权重叠加
- CSS盒子模型
-
- 盒子模型组成(Box Model)
- 边框(border)
- 表格的细线边框(border-collapse)
- 边框会影响盒子实际大小
- 内边距（paddding）
- padding影响盒子的好处
- 新浪导航栏
- padding不会影响盒子的情况
- 外边距(margin)
- 外边距应用--块级盒子水平居中
- 行内元素或行内块元素水平居中
- 外边距合并
- 清除内外边距
- 小米模块综合案例
- 去除ul小圆点
- 圆角边框(border-radius)
- 盒子阴影(box-shadow)
- 文字阴影(text-shadow)
- CSS浮动
-
- 传统页面布局的三种方式
- 标准流(普通流、文档流)
- 浮动（float）
- **浮动特性**
- 浮动特性-（脱标）
- 浮动特性-（具有行内块特性）
- 浮动元素经常和标准父级搭配使用
- 清除浮动
-
- 为何清除浮动
- 清除浮动的本质
- 清除浮动(clear)
- 清除浮动的方法
- 清除浮动-额外表标签法
- 清除浮动-父级添加overflow
- 清除浮动-:after伪元素法
- 清除浮动-双伪元素清除浮动
- 清除浮动总结
- CSS定位
-
- 为什么需要定位
- 定位组成
- 定位模式(position)
- 边偏移
- 静态定位(static)
- 相对定位(relative)
- 绝对定位(absolute)
- 子绝父相由来
- 固定定位(fixed)
- 固定定位小技巧-固定在版心右侧位置
- 粘性定位(sticky）
- 定位总结
- 定位叠放次序(z-index)
- 定位拓展
-
- 绝对定位的盒子居中
- 定位的特殊性
- 绝对/固定定位会完全压住盒子
- 浮动文字环绕
- 脱标的盒子不会触发外边距塌陷
- 案例
-
- 淘宝轮播图
- 网页布局总结
- 元素的显示与隐藏
-
- display属性
- visibility可见性
- overflow溢出
- 总结
- 综合案例(土豆网鼠标经过显示遮罩)
- CSS高级技巧
-
- 精灵图
- 字体图标
- CSS三角
- CSS用户界面样式
-
- 鼠标样式(cursor)
- 轮廓线(outline)
- 防止拖拽文本域(resize)
- vertical-align属性应用
-
- 解决图片底部默认空白缝问题(vertical-align)
- 溢出的文字省略号显示
- 常见布局技巧
-
- margin赋值运用
- 文字围绕浮动元素
- 行内块元素巧妙运用(分页效果)
- CSS三角强化
- 京东价格框案例
- CSS初始化(CSS reset)
- Unicode编码字体
- HTML5和CSS提高
-
- HTML5新特性
-
- HTML5新增的语义化标签
- 多媒体标签(audio/video)
-
- **视频video**
- 音频audio
- 总结
- 新增input类型
- 新增表单属性
- CSS3新特性
-
- CSS3新增选择器
-
- 属性选择器
- 结构伪类选择器
-
- nth-child(n)
- nth-child(n)与nth-of-type区别
- 小结
- 伪元素选择器
-
- 伪元素清除浮动
- CSS3盒子模型
- CSS3其他特性
-
- 图片变模糊（滤镜filter）
- 计算函数(calc函数)
- 过渡(transition)
-
HTML
网页
-
什么是网页
网站是网页集合
网页是网站的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读
网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此也称为HTML文件
网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的
-
什么是HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
所谓超文本，有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接(超链接文本)
常用浏览器
-
IE/Edg
-
火狐(Firefox)
-
谷歌(Chrome)
-
Safari
-
Opera
浏览器内核
浏览器内核(渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 Chrome/Opera Blink chrome/opera浏览器。Blink其实是Webkit的分支 目前国内一般浏览器一般都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织
-
为什么需要Web标准
浏览器不同，他们显示页面或排版就有些许差异
通过Web标准，不同浏览器展示统一内容
-
Web标准的构成
主要包括结构(Structure)、**表现(Presentation)和行为(Behavior)**三个方面。
标准 说明 结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML 表现 表现用于设置网页元素的版式，颜色、大小等外观样式，主要指的是CSS 行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript Web标准提出的最佳体验方案:结构、样式、行为分离
简单理解:结构写到HTML文件中，表现写到CSS文件 中，行为写到JavaScript文件中。
HTML语法规范
- 基本语法概述
- HTML标签是由尖括号包围的关键字，例如
- HTML标签通常是成对出现，例如和，我们称为双标签。标签对中第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签，例如
，我们称为单标签
-
标签关系
双标签关系可以分为两类:包含关系和并列关系
包含关系
<head> <title>title> head> 并列关系
<head> head> <body> body>
HTML基本结构标签
第一个HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档.
<html>
<head>
<title>我的第一个页面title>
head>
<body>
量变则质变
body>
html>
每个网页都会有一个基本的标签结构（骨架标签），页面内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签，我们称为 根标签 | |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面 |
HTML文档的后缀必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出他们。
开发工具
- DreamWeaver
- WebStorm
- HBuild
- Visual Studio Code
VSCode使用
-
生成页面骨架结构
输入!，按下Tab键
DOCTYPE和lang以及charset字符集的作用
/title>
</head>
<body>
</body>
</html>
</code></pre>
<ul>
<li> <p><strong>!DOCTYPE</strong></p> **文档类型声明**，作用就是告诉浏览器使用哪种HTML版本来显示网页 <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span>
</code></pre> <p>这句代码意思是:当前页面采取的是<strong>HTML5版本</strong>来显示网页</p> <p><strong>注意:</strong></p>
<ol>
<li> 声明位于文档中的最前面的位置，处于标签之前。 <p></!doctype></p> </li>
<li> 不是一个标签，它就是 **文档类型声明标签** </li>
</ol> </li>
<li> <p><strong>lang语言种类</strong></p> <p>用来定义当前文档显示的语言</p>
<ol>
<li> <p>en定义语言为英文</p> </li>
<li> <p>zh-CN定义语言为中文</p> <p>简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。</p> </li>
</ol> </li>
<li> <p><strong>字符集</strong></p> <p>字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。</p> <p>在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码</p> <pre><code><meta charset="UTF-8"/>
</code></pre> <p>charset常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含所有国家需要用到的字符.</p> <p><strong>注意:</strong> 上面语法必是不许要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"<strong>UTF-8</strong>"，不要写成"utf8"或"UTF8"</p> </li>
</ul>
<h4>HTML常用标签</h4>
<h5>标题标签</h5>
<ol>
<li> <p><strong>概括</strong></p> <p>为了使网页更具有语义化，通常会使用到标题标签，HTML提供了6个等级。即</p><h2>–</h2><h6></h6><p></p> <pre><code><h1>我是一级标题</h1>
</code></pre> <p>单词head的缩写，意为头部，标题</p> <p>**标签语义:**作为标题使用，并且依据重要性递减</p> <p><strong>特点：</strong></p>
<ol>
<li>加了标题的文字会变得加粗，字号也会依次变大</li>
<li>一个标题独占一行</li>
</ol> </li>
<li> <p><strong>实例</strong></p> <pre><code> <h1>标题标签一共六级</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
</code></pre> <h5></h5> </li>
</ol>
<h5>段落标签与换行标签</h5>
<ol>
<li> <p><strong>段落标签</strong></p> <p>在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，</p><p>标签用于<strong>定义段落</strong>，它可以将这个网页分为若干段落。</p> <pre><code><p>我是一个段落标签</p>
</code></pre> <p>单词paragraph的缩写，意为段落。</p> <p>**标签语义:**可以把HTML文档分割成若干段落。</p> <p><strong>特点：</strong></p>
<ol>
<li>文本在一个段落中会根据浏览器的窗口的大小自动换行</li>
<li>段落与段落之间保有空隙</li>
</ol> </li>
<li> <p><strong>换行标签</strong></p> <p>在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行，就需要使用<strong>换行标签<br></strong></p> <pre><code><br/>
</code></pre> <p>单词break的缩写</p> <p>**标签语义:**强制换行</p> <p><strong>特点：</strong></p>
<ol>
<li><br>是个单标签。</li>
<li><br>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。</li>
</ol> </li>
</ol>
<h5>文本格式化标签</h5>
<p>**标签语义：**突出重要性，比普通文字重要</p>
<table>
<thead>
<tr>
<th>语义</th>
<th>标签</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>加粗</td>
<td><strong></strong>或者<b></b></td>
<td>推荐<strong></strong></td>
</tr>
<tr>
<td>倾斜</td>
<td><em></em>或者<i></i></td>
<td>推荐<em></em></td>
</tr>
<tr>
<td>删除线</td>
<td><del></del>或者<s></s></td>
<td>推荐<del></del></td>
</tr>
<tr>
<td>下划线</td>
<td><ins></ins>或者<u></u></td>
<td>推荐<ins></ins></td>
</tr>
</tbody>
</table>
<h5>div和span标签</h5>
<p>div和span是没有语义的，他们就是一个盒子，用来装内容的</p>
<pre><code class="prism language-html">
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> BLACK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>pink<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
div是division的缩写，表示分割、分区。span一位跨度、跨距
**特点：**
1. div标签用来布局，但是一行只能放一个div.
2. span用来布局，一行可以多个span
#### 图像标签和路径
1. **图像标签**
在HTML标签中，<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span><span class="token punctuation">></span></span>标签用于定义HTML页面中的图形。
</code></pre> ```
<p>单词image的缩写，意为图像</p>
<p><strong>src是标签的必须属性，用于指定图像文件的路径和文件名</strong></p>
<ol start="2">
<li> <p><strong>图像标签的其他属性</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>图片路径</td>
<td>必须属性</td>
</tr>
<tr>
<td>alt</td>
<td>文本</td>
<td>图像不能显示文字时的替换文本</td>
</tr>
<tr>
<td>title</td>
<td>文本</td>
<td>提示文本。鼠标放在图像上，显式的文字</td>
</tr>
<tr>
<td>height</td>
<td>像素</td>
<td>设置图像宽度</td>
</tr>
<tr>
<td>width</td>
<td>像素</td>
<td>设置图像高度</td>
</tr>
<tr>
<td>border</td>
<td>像素</td>
<td>设置图像的边框粗细</td>
</tr>
</tbody>
</table><p><strong>说明：</strong></p>
<ol>
<li> 当只设置图像高度/宽度，它的宽度/高度会等比例缩放</li>
<li>图像标签可以拥有多个属性</li>
<li>属性之间不分先后顺序，标签名，属性与属性之间均空格分开</li>
<li>属性采取键值对的形式,属性=“属性值”</li>
</ol> </li>
<li> <p><strong>路径</strong></p>
<ul>
<li> <p><strong>目录文件夹和根目录</strong></p> <p>目录文件夹：就是普通文件夹，存放了做页面所需的相关素材，如html文件，图片等</p> <p>根目录:打开目录文件夹的第一层就是根目录</p> </li>
<li> <p><strong>路径</strong></p> <p>页面中的图片非常多，会新建一个文件夹来保存图形文件，这时再查找图片就要采用"路径"的方式制定文件位置</p>
<ol>
<li> <p><strong>相对路径</strong></p> <p>以引用文件所在位置为参考基础；而建立出的目录路径</p>
<table>
<thead>
<tr>
<th>相对路径分类</th>
<th>符号</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>同一级路径</td>
<td></td>
<td>图像文件位于HTML文件同一级，如</td>
</tr>
<tr>
<td>下一级路径</td>
<td>/</td>
<td>图像文件位于HTML文件下一级，如 </td>
</tr>
<tr>
<td>上一级目录</td>
<td>…/</td>
<td>图像文件位于HTML文件上一级 ，如</td>
</tr>
</tbody>
</table><p> 相对路径是从代码所在的这个文件出发，去寻找目标文件。</p> </li>
<li> <p><strong>绝对路径</strong></p> <p>绝对路径:是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。</p> <p>例如: “D:\WEB\img\logo.gif”</p> <p>或者完整的网络地址"http://www.baidu/image/logo.gif"</p> </li>
</ol> </li>
</ul> </li>
</ol>
<h5>超链接</h5>
<p>在HTML标签中,标签用于定义超链接，作用是从一个页面连接到另一个页面。</p>
<ol>
<li> <p>链接的语法格式</p> <pre><code><a href="跳转目标" target="目标窗口的弹出方式">文本或图形</a>
</code></pre> <p>单词anchor的所以，意为：锚</p> <p>两个属性作用</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>用于指定链接目标的url地址，（必须属性）当标签应用href属性时，就具有了超链接的功能</td>
</tr>
<tr>
<td>target</td>
<td>用于指定链接页面的打开方式，<strong>_self</strong>为默认值，<strong>_blank</strong>为在新窗口中打开</td>
</tr>
</tbody>
</table></li>
<li> <p>链接的分类</p>
<ol>
<li>外部链接: 例如百度</li>
<li>内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。例如</li>
<li>空链接:如果没有确定链接目标时，</li>
<li>下载链接; href里面地址是一个文件或文件压缩包，会下载这个文件</li>
<li>网页元素链接:在网页中的各种网页元素，如文本、图形、表格、音频、视频等都可作为超链接</li>
</ol> </li>
<li> <p><strong>锚点链接</strong></p> <p>点击链接，可以快速定位到页面中的某个位置</p>
<ul>
<li>在链接文本的href属性中设置属性值为#名字的形式,如</li>
<li>找到目标位置标签,里面添加一个id属性=刚才的名字，如<h4 id="two"></h4></li>
</ul> </li>
</ol>
<h5>注释与特殊字符</h5>
<ol>
<li> <p>注释</p> 结束 <pre><code><!--注释语句--> ctrl+/
</code></pre> </li>
<li> <p>特殊字符</p> <p>在HTML页面中，一些特殊符号不能直接使用，用下面字符代替</p>
<table>
<thead>
<tr>
<th>特殊字符</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>& nbsp;</td>
</tr>
<tr>
<td><</td>
<td>& lt;</td>
</tr>
<tr>
<td>></td>
<td>& gt;</td>
</tr>
</tbody>
</table><p><p></p> <p>©</p> <p>¥</p> <p>&</p> <p>®</p> <p>5°</p> </li>
</ol>
<h5>表格标签</h5>
<ol>
<li> <p><strong>主要作用</strong></p> <p>表格主要用于显示、展示数据。</p> </li>
<li> <p><strong>基本语法</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>单元格内文字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
···
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
···
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
</code></pre>
<ol>
<li>table用于定义表格的标签</li>
<li>tr标签用于定义表格中的行，必须嵌套在table中</li>
<li>td用于定义表格中的单元格，必须嵌套在tr中</li>
</ol> </li>
<li> <p><strong>表头表格标签</strong></p> <p>一般表头位于表格的第一行或第一列，表头单元格里面的文本内容<strong>加粗居中显示</strong></p> <p>th标签标示HTML表格的表头部分</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
···
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
···
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
</code></pre> </li>
<li> <p><strong>表格属性</strong></p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left/center/right</td>
<td>规定表格相对周围元素的对齐方式</td>
</tr>
<tr>
<td>border</td>
<td>1或""</td>
<td>规定表格单元格是否拥有边框，默认为"",没有边框</td>
</tr>
<tr>
<td>cellpadding</td>
<td>像素值</td>
<td>规定单元格边沿与其内容之间的空白，默认1像素</td>
</tr>
<tr>
<td>cellspacing</td>
<td>像素值</td>
<td>规定单元格与单元格之间的空白，默认2像素</td>
</tr>
<tr>
<td>width</td>
<td>像素值或百分比</td>
<td>规定表格的宽度</td>
</tr>
</tbody>
</table></li>
<li> <p><strong>表格结构标签</strong></p>
<ol>
<li> ：用于定义表格的头部,内部必须有标签 </li>
<li> :用于定义表格的主体，主要用于放数据本体 </li>
<li>以上标签都是放在table标签中</li>
</ol> </li>
<li> <p><strong>合并单元格</strong></p> <p>特殊情况下，可以把多个单元格合并为一个单元格</p>
<ol>
<li> <p>合并单元格方式</p>
<ul>
<li>跨行合并: rowspan=“合并单元格的个数”</li>
<li>跨列合并: colspan=“合并单元格的个数”</li>
</ul> </li>
<li> <p>目标单元格:(写合并代码)</p> <p>跨行:最上侧单元格为目标单元格，写合并代码</p> <p>跨列:最左侧单元格为目标单元格，写合并代码</p> </li>
<li> <p>合并单元格三部曲</p>
<ul>
<li>先确定是跨行还是跨列</li>
<li>找到目标单元格，写上合并方式=合并单元格数量</li>
<li>删除多余单元格</li>
</ul> </li>
</ol> </li>
</ol>
<h5>列表标签</h5>
<p>列表就是用布局的</p>
<p>分为三大类:<strong>无序列表</strong>、<strong>有序列表</strong>和<strong>自定义列表</strong></p>
<ol>
<li> <p>无序列表</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<ol>
<li> <p>无序列表的各个列表项之间没有顺序级别之分，是并列的</p> </li>
<li> <p>ul中只能嵌套li，直接在ul中输入其他标签或文字，无意义</p> </li>
<li> <p>li相当于一个容器，可以容纳所有元素</p> </li>
<li> <p>无序列表会带有自己的样式属性，后期通过CSS设置</p> </li>
</ol>
</blockquote> </li>
<li> <p>有序列表</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>列表项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<ol>
<li>ol中只能嵌套li</li>
<li>li相当于一个容器，可容纳所有元素</li>
<li>有序列表带有自己的样式属性，后期CSS设置</li>
</ol>
</blockquote> </li>
<li> <p>自定义列表</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>名词1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>名词1解释1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>名词1解释2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<ol>
<li>dl里面只能包含dt和dd</li>
<li>dt和dd个数没有 限制，通常一个dt对应多个dd</li>
</ol>
</blockquote> </li>
</ol>
<h5>表单</h5>
<ol>
<li> <p><strong>表单的组成</strong></p> <p>一个完整的表单通常由表单域、表单控件和提示信息3个部分构成</p> <p>form会把它范围内的表单元素信息提交给服务器</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url地址<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>提交方式<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>表单域名称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
各种表单元素控件
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</code></pre> </li>
<li> <p><strong>input</strong>表单元素</p> <pre><code></code></pre> </li>
</ol> ```
<blockquote>
<p>input为单标签</p>
<p>type属性设置不同的属性值用来指定不同的控件类型</p>
</blockquote>
<p><strong>type属性的属性值及其描述</strong></p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>button</td>
<td>定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)</td>
</tr>
<tr>
<td>checkbox</td>
<td>定义复选框</td>
</tr>
<tr>
<td>file</td>
<td>定义输入和"浏览"按钮，供文件上传</td>
</tr>
<tr>
<td>hidden</td>
<td>定义隐藏的输入字段</td>
</tr>
<tr>
<td>image</td>
<td>定义图像形式的提交按钮</td>
</tr>
<tr>
<td>password</td>
<td>定义密码字段。</td>
</tr>
<tr>
<td>radio</td>
<td>定义单选按钮</td>
</tr>
<tr>
<td>reset</td>
<td>定义重置按钮。重置按钮会清除表单中所有数据</td>
</tr>
<tr>
<td>submit</td>
<td>定义提交按钮。提交按钮会把表单数据发送到服务器</td>
</tr>
<tr>
<td>text</td>
<td>定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符</td>
</tr>
</tbody>
</table>
<ul>
<li> <p>除了type属性，input标签还有很多其他属性</p> <p>| 属性 | 属性值 | 描述 |<br> | --------- | ------------ | ------------------------------- |<br> | name | 由用户自定义 | 定义input元素的名称 |<br> | value | 有用户自定义 | 规定Input元素的值 |<br> | checked | checked | 规定此input元素首次加载应当选中 |<br> | maxlength | 正整数 | 规定 输入字段中的字符的最大长度 |</p>
<blockquote>
<ol>
<li>name和value是每个表单元素都有的属性值，主要给后台人员使用，当为button/submit/reset时，为按钮上的文字</li>
</ol>
</blockquote> </li>
</ul>
<blockquote>
<ol start="2">
<li> <p>name表单元素的名字，<strong>要求单选按钮和复选框要有相同的name值</strong></p> </li>
<li> <p><strong>checked属性主要针对单选按钮和复选框</strong></p> </li>
</ol>
</blockquote>
<ul>
<li> <p>input-text</p> <pre><code class="prism language-html">
</code></pre> </li>
</ul>
<pre><code>用户名:<input type="text" name="username" />
```
</code></pre>
<ul>
<li> <p>input-radio(单选按钮)</p> <pre><code class="prism language-html">
</code></pre> </li>
</ul>
<pre><code><input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</code></pre>
<ul>
<li> <p>label标签</p> <p>label标签为input元素定义标注</p> <p>label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或选择到对应的表单元素上，增加用户体验</p> <pre><code>
</code></pre> </li>
</ul>
<pre><code><input type="radio" name="sex" id="sex"/>
<label for="sex">男</label>
```
> **label标签的for属性应当与相关元素的id属性相同**
</code></pre>
<ul>
<li> <p>input-checkbox(复选框)</p> <pre><code>
</code></pre> </li>
</ul>
<pre><code><input type="checkbox" name="hobby" checked="checked"/>吃饭
<input type="checkbox" name="hobby" />睡觉
<input type="checkbox" name="hobby" />看电视
```
</code></pre>
<ol start="3">
<li> <p>select下拉表单元素</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<ol>
<li>select中至少包含一对option</li>
<li>option中定义selected="selected"时，当前项即为默认选中项</li>
</ol>
</blockquote> </li>
<li> <p>textarea文本域元素</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
文本内容
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
</code></pre> </li>
</ol>
<h2>CSS</h2>
<h4>CSS简介</h4>
<p> css是**层叠样式表(Cascading Style Sheets)**的简称.</p>
<p> CSS规则由两个主要的部分构成:<strong>选择器</strong>以及一条或多条<strong>声明</strong>。</p>
<ul>
<li><strong>选择器</strong>是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式</li>
<li>属性和属性值以"键值对"形式化出现</li>
<li>属性是对指定的对象设置的样式属性</li>
<li>属性与属性值之间用":"分开</li>
<li>多个“键值对”之间用;进行区分</li>
</ul>
<pre><code>h1 {
color:red;
font-zise: 24px;
}
</code></pre>
<h5>CSS语法规范</h5>
<p>所有样式都包含在style标签内，style一般写到/head上方</p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">h4</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">font-size</span> <span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<ol>
<li>选择器，属性名，属性值关键字全部使用<strong>小写字母</strong></li>
<li>属性值前面，冒号后面，保留一个空格</li>
<li>选择器和大括号中间保留空格</li>
</ol>
</blockquote>
<h4>CSS基础选择器</h4>
<p>选择器就是根据不同需求把不同的标签选出来。简单来说，就是选择标签用的。</p>
<h5>选择器分类</h5>
<p>选择器分为<strong>基础选择器</strong>和<strong>复合选择器</strong></p>
<ul>
<li>基础选择器是由单个选择器组成的</li>
<li>基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器</li>
</ul>
<h5>元素选择器</h5>
<p>标签选择器(元素选择器)是指用HTML标签名作为选择器，按标签名称分类，选中作统一的CSS样式</p>
<p><strong>语法：</strong></p>
<pre><code>标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</code></pre>
<h5>类选择器</h5>
<p><strong>语法:</strong></p>
<pre><code>.类名 {
属性1: 属性值1;
}
</code></pre>
<p>结构需要用<strong>class属性</strong></p>
<pre><code><div class="red">红色</div>
</code></pre>
<p>案例:</p>
<pre><code><style>
.red {
color:red
}
<style>
<div class="red"></div>
</code></pre>
<blockquote>
<p>类的名字长名称或词组可以使用中横线来为选择器命名</p>
<p> .style-red{</p>
<p> }</p>
<p>不要使用纯数字、中文等命名</p>
</blockquote>
<h5>类选择器-多类名</h5>
<p>可以给一个标签指定多个类名，从而进行多样式</p>
<p><strong>多类名使用方式</strong></p>
<pre><code><div class="red font20">Just do it</div>
</code></pre>
<ol>
<li>在标签class属性中写多个类名</li>
<li>多个类名中间必须用空格分开</li>
<li>这个标签就可以分别具有这些类名的样式</li>
</ol>
<h5>id选择器</h5>
<p>id选择器可以为标有特定id的HTML元素指定特定的样式</p>
<p>HTML元素以<strong>id属性</strong>来设置id选择器，CSS中id选择器以**#**来定义</p>
<p><strong>语法：</strong></p>
<pre><code>#id名 {
属性1： 属性值1；
}
</code></pre>
<blockquote>
<p>id属性是一个标签独有的</p>
</blockquote>
<p>例子</p>
<pre><code><style>
#nav {
color: red;
}
</style>
<div id="nav">Just do it</div>
</code></pre>
<h5>通配符选择器</h5>
<p>通配符选择器使用"*"来定义，它表示选取页面中所有元素(标签)</p>
<p><strong>语法</strong></p>
<pre><code>* {
属性1： 属性值1;
}
</code></pre>
<ul>
<li>通配符选择器不需要调用，自动就给所有元素使用样式</li>
</ul>
<h5>总结</h5>
<table>
<thead>
<tr>
<th>基础选择器</th>
<th>作用</th>
<th>用法</th>
</tr>
</thead>
<tbody>
<tr>
<td>标签选择器(元素选择器)</td>
<td>可以选出所有相同的标签</td>
<td>p {color: red}</td>
</tr>
<tr>
<td>类选择器</td>
<td>可以选出1个或多个标签</td>
<td>.nav {color :green}</td>
</tr>
<tr>
<td>id选择器</td>
<td>一次只能选择1个标签</td>
<td>#nav {color:red;}</td>
</tr>
<tr>
<td>通配符选择器</td>
<td>选择所有标签</td>
<td>* {color: pink}</td>
</tr>
</tbody>
</table>
<h4>CSS字体属性</h4>
<p>CSS Font（字体）属性用于定义字体系列、大小、粗细和文字样式(倾斜)</p>
<h5>字体(font-family)</h5>
<p>CSS使用font-family属性定义文本的字体</p>
<pre><code>p {
font-family: '微软雅黑';
}
div {
font-family: Arial, "Microsoft YaHei";
}
</code></pre>
<ul>
<li>字体之间必须英文状态逗号隔开</li>
<li>如果有空格隔开的多个单词组成的字体，加引号 “Microsoft YaHei”</li>
<li>当一个字体失效，陆续使用后续设置的字体，如系统都不自带，使用系统默认自带字体，保证在浏览器中正确显示</li>
</ul>
<h5>字体大小(font-size)</h5>
<p>CSS使用font-size属性来定义字体大小</p>
<pre><code>p {
font-size: 20px;
}
</code></pre>
<ul>
<li>px（像素）大小</li>
<li>谷歌浏览器默认文字大小16px</li>
<li>不同浏览器默认显示的字号大小不一致</li>
<li>可以给body指定整个页面文字的大小</li>
</ul>
<h5>字体粗细(font-weight)</h5>
<p>CSS使用fong-weight属性设置文本字体的粗细</p>
<pre><code>p {
font-weight: bold;
}
</code></pre>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>默认值(不加粗)</td>
</tr>
<tr>
<td>bold</td>
<td>定义粗体(加粗)</td>
</tr>
<tr>
<td>100-900</td>
<td>400等同于normal，700等同于bold，注意这个数字后面不跟单位</td>
</tr>
</tbody>
</table>
<ul>
<li>加粗标签(h strong)不加粗，使用normal</li>
</ul>
<h5>文字样式(font-style)</h5>
<p>CSS使用font-style设置文本的风格</p>
<pre><code>p {
font-style: normal;
}
</code></pre>
<table>
<thead>
<tr>
<th>属性值</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>默认值，浏览器会显示标准的字体样式 font-style: normal</td>
</tr>
<tr>
<td>italic</td>
<td>斜体显示</td>
</tr>
</tbody>
</table>
<ul>
<li>可使em/i等斜体标签改为不斜体字体</li>
</ul>
<h5>Font复合属性(font)</h5>
<p>字体属性可以把对字体属性的设置综合来写</p>
<pre><code>body {
font: font-style font-weight font-size/line-height font-family;
}
</code></pre>
<ul>
<li>使用font属性是，按以上顺序，不能更换顺序，各个属性间用空格隔开</li>
<li>不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用</li>
</ul>
<h5>字体属性总结</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>表示</th>
<th>注意点</th>
</tr>
</thead>
<tbody>
<tr>
<td>font-size</td>
<td>字号</td>
<td>单位px</td>
</tr>
<tr>
<td>font-family</td>
<td>字体</td>
<td></td>
</tr>
<tr>
<td>font-weight</td>
<td>字体粗细</td>
<td>700 bold 400 normal</td>
</tr>
<tr>
<td>font-style</td>
<td>字体样式</td>
<td>italic normal</td>
</tr>
<tr>
<td>font</td>
<td>字体连写</td>
<td>font-style font-weight font-size/line-height font-family</td>
</tr>
</tbody>
</table>
<h4>CSS文本属性</h4>
<h5>文本颜色(color)</h5>
<p>color属性用于定义文本的颜色</p>
<pre><code>div {
color: red;
}
</code></pre>
<table>
<thead>
<tr>
<th>表示</th>
<th>属性值</th>
</tr>
</thead>
<tbody>
<tr>
<td>预定义的颜色值</td>
<td>red,green blue pink…</td>
</tr>
<tr>
<td>十六进制</td>
<td>#FF0000 ,#FF6600,#29D789</td>
</tr>
<tr>
<td>RGB代码</td>
<td>rgb(255,0,0)或 rgb(100%,0%,0%)</td>
</tr>
</tbody>
</table>
<h5>对齐文本(text-align)</h5>
<p>text-align属性用于设置<strong>元素内文本内容的水平对齐方式</strong></p>
<pre><code>div {
text-align: center;
}
</code></pre>
<table>
<thead>
<tr>
<th>属性值</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td>左对齐(默认)</td>
</tr>
<tr>
<td>right</td>
<td>右对齐</td>
</tr>
<tr>
<td>center</td>
<td>居中对齐</td>
</tr>
</tbody>
</table>
<h6>使图片水平居中对齐</h6>
<pre><code><p> <img src=""/><p>
<style>
p {
text-align: center
}
</style>
</code></pre>
<ul>
<li>设置图片的父元素，text-align: center</li>
</ul>
<h5>装饰文本(text-decoration)</h5>
<p>text-decoration属性规定添加到文本的装饰。可以给文本添加<strong>下划线、删除线、上划线</strong>等。</p>
<pre><code>div {
text-decoration: underline
}
</code></pre>
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>默认，没有装饰线</td>
</tr>
<tr>
<td>underline</td>
<td>下划线。超链接a自带下划线</td>
</tr>
<tr>
<td>overline</td>
<td>上划线</td>
</tr>
<tr>
<td>line-through</td>
<td>删除线</td>
</tr>
</tbody>
</table>
<h5>文本缩进(text-indent)</h5>
<p>text-indent属性用来指定文本的第一行的缩进，通常将段落的<strong>首行缩进</strong></p>
<pre><code>div {
text-indent: 10px;
}
</code></pre>
<pre><code>div {
text-indent: 2em;
}
</code></pre>
<ul>
<li><strong>em</strong>是一个相对单位，就是当前(font-size)1个文字大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小</li>
</ul>
<h5>行间距(line-height)</h5>
<p>line-height属性用于设置行间的距离(行高).可以控制文字与行之间的距离.</p>
<pre><code>p {
line-heigt: 26px;
}
</code></pre>
<ul>
<li> <p>行间距包含: <strong>上间距、文本高度、下间距</strong></p>
<blockquote>
<p>上文设置行间距26px,文字默认大小16px，因此，文字大小占16px,上间距5px,下间距5px</p>
</blockquote> </li>
</ul>
<h5>文本属性总结</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>表示</th>
<th>注意点</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>文本颜色</td>
<td>通常使用十六进制</td>
</tr>
<tr>
<td>text-align</td>
<td>文本对齐</td>
<td>可以设定文字水平的对其方式</td>
</tr>
<tr>
<td>text-indent</td>
<td>文本缩进</td>
<td>段落首行缩进2个字 text-indent: 2em;</td>
</tr>
<tr>
<td>text-decoration</td>
<td>文本修饰</td>
<td>添加下划线 underline，取消下划线none</td>
</tr>
<tr>
<td>line-height</td>
<td>行高</td>
<td>控制行与行之间的距离</td>
</tr>
</tbody>
</table>
<h4>CSS引入方式</h4>
<p><strong>三种引入方式</strong></p>
<ol>
<li>行内样式表（行内）</li>
<li>内部样式表（嵌入式）</li>
<li>外部样式表(链接式)</li>
</ol>
<h6>内部样式表</h6>
<p>单独放到一个</p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</code></pre>
<h6>行内样式表</h6>
<p>在元素内部的style属性中设定CSS样式</p>
<pre><code><div style="color:red; font-size: 12px;">Just do it</div>
</code></pre>
<h6>外部样式表</h6>
<ol>
<li> <p>新建一个.css样式文件，</p> </li>
<li> <p>在HTML找那个引入样式</p> <pre><code><link rel="stylesheet" href="css文件路径">
</code></pre> </li>
</ol>
<h4>CSS的复合选择器</h4>
<p>复合选择器是建立在基本选择器之上，对基本选择器进行组合形参</p>
<p>常用复合选择器包括**: 后代选择器、子选择器、并集选择器、伪类选择器**等</p>
<h5>后代选择器</h5>
<p>后代选择器，需选择父元素里面的所有后代元素</p>
<pre><code>元素1 元素2 {样式声明}
</code></pre>
<p>上述语法表示 选择元素1里面的所有元素2（后代元素）</p>
<p>例</p>
<pre><code>ul li{样式声明} //选择ul里面所有li标签元素
</code></pre>
<ul>
<li>元素1与元素2中间<strong>空格隔开</strong></li>
<li>元素1是父级，元素2是子级，最终选择的是元素2</li>
<li>元素2可以是儿子，可以是孙子，只要是元素1的后代即可</li>
<li>元素1和元素2可以是任意基础选择器</li>
</ul>
<h5>子元素选择器</h5>
<p>子元素选择器只选择子元素</p>
<p><strong>语法：</strong></p>
<pre><code>元素1>元素2{样式声明}
</code></pre>
<p>例</p>
<pre><code>div>p{样式声明}
</code></pre>
<ul>
<li>元素1和元素2<strong>大于号</strong>隔开</li>
<li>元素1是父级，元素2是子级，最终选择的是<strong>元素2</strong></li>
</ul>
<h5>并集选择器</h5>
<p>并集选择器可以选择多组标签，同时为它们定义相同的样式</p>
<p><strong>语法:</strong></p>
<pre><code>元素1,元素2{样式声明}
</code></pre>
<p>上述语法表示<strong>选择元素1和元素2</strong></p>
<p>例如</p>
<pre><code>ul,div {样式声明}
</code></pre>
<ul>
<li>元素1和元素2中间<strong>逗号隔开</strong></li>
<li>并集选择器通常用于集体声明</li>
</ul>
<h5>伪类选择器</h5>
<p>伪类选择器用于向某些选择器添加特殊效果，如给超链接添加特殊效果，或选择第1个，第n个元素。</p>
<p>伪类 选择器用**冒号:**表示，如:hover、:first-child</p>
<p>伪类选择有很多，如链接伪类，结构伪类等</p>
<h5>链接伪类选择器</h5>
<pre><code>:link //未点击过
:visited //访问过
:hover //鼠标经过
:active //鼠标按下，但未松开
</code></pre>
<ul>
<li>最好按以上顺序书写</li>
</ul>
<p>例子</p>
<pre><code> /* 未访问的链接 */
a:link {
color: black;
text-decoration: none;
}
/* 点击过(访问过的)链接 */
a:visited {
color: purple;
}
/* 鼠标经过时 */
a:hover {
color: skyblue;
text-decoration: underline;
}
/* 鼠标点击，但未弹起 */
a:active {
color: greenyellow;
}
</code></pre>
<h5>:focus伪类选择器</h5>
<p>:focus伪类选择器用于获得焦点的表单元素</p>
<p>标点就是光标，一般情况input类表单才能获取</p>
<pre><code>input: focus {
basckground-color:yellow;
}
</code></pre>
<h5>复合选择器总结</h5>
<table>
<thead>
<tr>
<th>选择器</th>
<th>作用</th>
<th>隔开符号及用法</th>
</tr>
</thead>
<tbody>
<tr>
<td>后代选择器</td>
<td>用来选择后代元素</td>
<td><strong>空格</strong> .nav a</td>
</tr>
<tr>
<td>子代选择器</td>
<td>选择最近一级元素</td>
<td><strong>大于</strong> .nav>p</td>
</tr>
<tr>
<td>并集选择器</td>
<td>选择某些相同的元素</td>
<td><strong>逗号</strong> .nav,.header</td>
</tr>
<tr>
<td>链接伪类选择器</td>
<td>选择不同状态的链接</td>
<td>:link-:visited-:hover-:active</td>
</tr>
<tr>
<td>:focus选择器</td>
<td>选择获得光标的表单</td>
<td>input:focus</td>
</tr>
</tbody>
</table>
<h4>CSS元素的显示模式</h4>
<p>元素显示模式就是 元素以什么方式进行显示，比如div自己独占一行，一行可以放多个span</p>
<p>HTML元素一般分为 <strong>块元素</strong>和<strong>行内元素</strong>两种类型</p>
<h5>块元素</h5>
<p>常见的块元素有 ：h1-h6,p,div ul,ol li等</p>
<p><strong>块元素特点</strong></p>
<ol>
<li>独占一行</li>
<li>高度、宽度、外边距、内边距都可以控制</li>
<li>宽度默认是容器(父级宽度)的100%</li>
<li>是一个容器及盒子，可以放行内或块级元素</li>
</ol>
<ul>
<li>文字类的元素内不可使用块级元素，如h1-h6,p</li>
<li>p标签主要用于存放文字，因此P内不能放块级元素，尤其div</li>
<li>同理h1-h6也不能放其他块级元素</li>
</ul>
<h5>行内元素(内联元素)</h5>
<p>常见行内元素 a、strong,b ,em,i,del,s,ins u,span等</p>
<p><strong>特点：</strong></p>
<ol>
<li>一行可以显示多个</li>
<li>高、宽直接设置无效</li>
<li>默认宽度就是它本身内容的宽度</li>
<li>行内元素只能容纳文本或其他行内元素</li>
</ol>
<ul>
<li>链接里面不能再放连接</li>
<li>特殊情况，a里面可以放块级元素，但是a转换一下块级模式最安全</li>
</ul>
<h5>行内块元素</h5>
<p>在行内元素中有几个特殊的标签–image input td，他们<strong>同时具有块元素和行内元素的特点</strong>即<strong>行内块元素</strong></p>
<p><strong>特点</strong></p>
<ul>
<li>和相邻行内元素在一行上，但是他们之间会有白色空隙，一行可以显示多个(行内元素特点)</li>
<li>默认宽度就是它本身内容的宽度(行内元素特点)</li>
<li>高度，宽度、外边距以及内边距等都可以控制(块级元素特点</li>
</ul>
<h5>显示模式总结</h5>
<table>
<thead>
<tr>
<th>元素模式</th>
<th>元素排列</th>
<th>设置样式</th>
<th>默认宽度</th>
<th>包含</th>
</tr>
</thead>
<tbody>
<tr>
<td>块级元素</td>
<td>一行只能放一个块级元素</td>
<td>可以设置宽度高度</td>
<td>容器的100%</td>
<td>容器级可以包含任何标签</td>
</tr>
<tr>
<td>行内元素</td>
<td>一行可以放多个行内元素</td>
<td>不可以直接设置宽度</td>
<td>本身内容的宽度</td>
<td>容纳文本或其他行内元素</td>
</tr>
<tr>
<td>行内块元素</td>
<td>一行可以放多个行内块元素</td>
<td>可以设置宽度和高度</td>
<td>本身内容的宽度</td>
<td></td>
</tr>
</tbody>
</table>
<h5>显示模式转换</h5>
<ul>
<li>转换为<strong>块元素</strong>: <strong>display:block;</strong></li>
<li>转换为<strong>行内元素</strong>：<strong>display:inline;</strong></li>
<li>转换为<strong>行内块</strong>: <strong>display:inline-block</strong></li>
</ul>
<h4>单行文字垂直居中</h4>
<p>css没有提供文字垂直居中</p>
<p>解决方案: 让<strong>文字的行高等于盒子的高度</strong>，就可以让文字在盒子内垂直居中</p>
<h5>原理</h5>
<p>行高： 文字本身高度+上空隙+下空隙(间距)</p>
<p>垂直居中：行高的上空隙和下空隙把文字挤到中间了。</p>
<ul>
<li>行高小于文盒子高度，文字偏上</li>
<li>行高大于盒子高度，文字偏下</li>
</ul>
<h4>CSS背景</h4>
<p>背景属性可设置<strong>背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定</strong>等</p>
<h5>背景颜色（background-color）</h5>
<p><strong>background-color</strong>属性定义了元素的背景颜色.</p>
<pre><code>background-color: 颜色值;
</code></pre>
<p>一般情况下，元素背景颜色默认值<strong>transparent(透明)</strong></p>
<pre><code>background-color: transparent;
</code></pre>
<h5>背景图片(background-image)</h5>
<p><strong>background-image</strong>属性定义了元素的背景图像。实际开发常见于logo或装饰性小图片或者超大的背景图片，背景图片的优点是非常便于控制位置(精灵图也是一种运用场景)</p>
<pre><code>background-image: none|url(url)
</code></pre>
<table>
<thead>
<tr>
<th>参数值</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>无背景图（默认）</td>
</tr>
<tr>
<td>url</td>
<td>使用绝对或相对地址指定背景图像</td>
</tr>
</tbody>
</table>
<ul>
<li>背景图片后面，不要忘记加URL，同时里面的路径不要加引号</li>
</ul>
<h5>背景平铺(background-repeat)</h5>
<p>如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性</p>
<pre><code>background-repeat: repeat|no-repeat|repeat-x|repeat-y
</code></pre>
<table>
<thead>
<tr>
<th>参数值</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>repeat</td>
<td>背景图像在纵向和横向上平铺(默认)</td>
</tr>
<tr>
<td>no-repeat</td>
<td>不平铺</td>
</tr>
<tr>
<td>repeat-x</td>
<td>水平方向平铺</td>
</tr>
<tr>
<td>repeat-y</td>
<td>垂直方向平铺</td>
</tr>
</tbody>
</table>
<h5>背景图片位置(background-position)</h5>
<pre><code>background-position: x y;
</code></pre>
<p>参数代表意思: x坐标和y坐标。可以使用<strong>方位名词</strong>或<strong>精准单位</strong></p>
<table>
<thead>
<tr>
<th>参数值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>百分比|由浮点数字和单位标识符组成的长度值 px</td>
</tr>
<tr>
<td>position</td>
<td>top|center|bottom|left|center|right</td>
</tr>
</tbody>
</table>
<ol>
<li>参数是方位名词
<ul>
<li> 如果指定的两个值都是方位名词，则两个值先后顺序无关，left top和top left效果一样</li>
<li>如果只指定了一个方位名词，另一个省略 ，则第二个默认居中对齐 如 left</li>
</ul> </li>
<li>参数是精确单位
<ul>
<li>如果参数是精确单位，第一个是x坐标，第二个是y坐标</li>
<li>如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中</li>
</ul> </li>
<li>参数是混合单位
<ul>
<li>如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值时y坐标。</li>
</ul> </li>
</ol>
<h5>背景图像固定(background-attachment)</h5>
<p>background-attachment属性舌质红背景图像是否固定或随着页面的其余部分滚动。</p>
<p>background-attachment后期可以制作视差滚动的效果</p>
<pre><code>background-attachment: scroll | fixed
</code></pre>
<table>
<thead>
<tr>
<th>参数值</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>scroll</td>
<td>背景图像随对象内容滚动</td>
</tr>
<tr>
<td>fixed</td>
<td>背景图像固定</td>
</tr>
</tbody>
</table>
<h5>背景图像复合写法(background)</h5>
<p>简写属性时，没有特定的书写顺序，一般规定为:</p>
<p>background:背景颜色 背景图片 背景平铺 背景滚动 背景位置</p>
<pre><code>background: transparent url(image.jpg) repeat fixed top;
</code></pre>
<h5></h5>
<h5>背景色半透明</h5>
<p>CSS提供了背景颜色半透明效果</p>
<pre><code>background: rgba(0,0,0,0.3);
backgruond-color:rgba(0,0,0,.3);
</code></pre>
<ul>
<li>最后一个参数是alpha透明度，取值范围0-1之间 1不透明</li>
<li>习惯0.3的0省略，写为 background: rgba(0,0,0,.3);</li>
<li>背景半透明是指盒子背景半透明，盒子里面的内容不受影响</li>
<li>CSS3新增属性，IE9+浏览器支持</li>
<li>实际开发中，不太关注兼容性写法</li>
</ul>
<h5>背景总结</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr>
<td>background-color</td>
<td>背景颜色</td>
<td>预定义颜色/十六进制/RGB代码</td>
</tr>
<tr>
<td>background-image</td>
<td>背景图片</td>
<td>url（图片路径）</td>
</tr>
<tr>
<td>background-repeat</td>
<td>是否平铺</td>
<td>repeat|no-repeat|repeat-x|repeat-y</td>
</tr>
<tr>
<td>background-position</td>
<td>背景位置</td>
<td>length/positon 分别是x y坐标</td>
</tr>
<tr>
<td>background-attachment</td>
<td>背景附着</td>
<td>scroll|fixed</td>
</tr>
<tr>
<td>background</td>
<td>简写属性</td>
<td>background-color| background-image|background-repeat|background-attachment|background-position</td>
</tr>
<tr>
<td>背景色半透明</td>
<td>半透明效果</td>
<td>background: rgba(0,0,0,.3);后面一个参数是透明度</td>
</tr>
</tbody>
</table>
<h4></h4>
<h4>CSS三大特性及权重</h4>
<p>CSS有三个非常重要的特性：层叠性、继承性、优先级</p>
<h5>层叠性</h5>
<p>相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突。</p>
<p>层叠性原则:</p>
<ul>
<li>样式冲突，遵循的原则是就近原则</li>
<li>样式不冲突不会层叠</li>
</ul>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">fong-size</span><span class="token punctuation">:</span> 12px
<span class="token punctuation">}</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> BLACKPINK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h5>继承性</h5>
<p>CSS中的继承:子标签会继承父标签的某些样式(font/text等跟文字相关的)，如文本颜色、字号等。</p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
blinks
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h5>行高的继承</h5>
<p>子元素可以继承父元素的行高</p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">body</span> <span class="token punctuation">{</span>
//行高12*1.5=12px
<span class="token property">font</span><span class="token punctuation">:</span>12px/1.5 Microsoft YaHei //行高1.5
<span class="token punctuation">}</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
//子元素继承父类行高1.5即行高为 14px*1.5=21px
<span class="token property">font-size</span><span class="token punctuation">:</span>14px
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
BLACKPINK
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
BLINKS
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<ul>
<li>行高可以跟单位也可以不跟单位</li>
<li>1.5即当前元素文字大小的1.5倍</li>
</ul>
<h5>优先级</h5>
<p>选择器权重如下表</p>
<table>
<thead>
<tr>
<th>选择器</th>
<th>选择器权重</th>
</tr>
</thead>
<tbody>
<tr>
<td>继承 或 *</td>
<td>0,0,0,0</td>
</tr>
<tr>
<td>元素选择器</td>
<td>0,0,0,1</td>
</tr>
<tr>
<td>类选择器，伪类选择器</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>ID选择器</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>行内样式 style=""</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>!important 重要的</td>
<td>无穷大</td>
</tr>
</tbody>
</table>
<pre><code>div {
color: green ！important;
}
</code></pre>
<p><strong>从左到右依次数值</strong></p>
<h5>优先级注意点:</h5>
<ol>
<li>权重是由4组数字组成，但不会有进位</li>
<li>等级判断从左向右，如果某一位数值相同，则判断下一位数值</li>
</ol>
<p><strong>继承的权重为0</strong> ，p 为1, 故为pink，（不管父类优先级有多高）</p>
<pre><code class="prism language-html">//父亲权重是0100
#father{
color:red;
}
//p继承权重是0000
//单独p 权重是0001
p{
color:pink
}
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
BLACKPINK
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<h5>CSS权重叠加</h5>
<p><strong>权重叠加</strong>:如果是复合选择器，则会有权重叠加，需要计算权重</p>
<p>权重虽然会叠加，但是不会有进位问题</p>
<pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
<span class="token selector">//复合选择器会有权重叠加的问题
//权重 0,0,0,1+0,0,0,1=0002
ul li</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">//li权重 0,0,0,1
li</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">//.nav li权重: 0,0,1,0+0,0,0,1=0,0,1,1
.nav li</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">//权重= 0,1,0,0+ 0,0,0,1=0,1,0,1
#blank li</span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.nav<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>BLACK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PINK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>LOVE<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>权重练习题</strong></p>
<ul>
<li>div ul li—>0,0,0,3</li>
<li>.nav ul li—>0,0,1,2</li>
<li>a:hover–>0,0,1,1</li>
<li>.nav a–>0,0,1,1</li>
</ul>
<h4>CSS盒子模型</h4>
<p>页面学习三大核心:盒子模型、浮动和定位</p>
<h5>盒子模型组成(Box Model)</h5>
<p>所谓<strong>盒子模型</strong>：就是把HTML页面布局中的布局元素看作一个矩形盒子。</p>
<p>它包括:<strong>边框、外边距、内边距和实际内容</strong></p>
<h5>边框(border)</h5>
<p>边框可以设置元素的边框。边框由三部分组成 :<strong>边框宽度、边框样式 、边框颜色</strong></p>
<p><strong>语法：</strong></p>
<pre><code>border: border-width||border-style||border-color
</code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>border-width</td>
<td>定义边框粗细，单位px</td>
</tr>
<tr>
<td>border-style</td>
<td>定义边框样式，none 、solid (实线)，dotted (点线)，dashed(虚线)</td>
</tr>
<tr>
<td>border-color</td>
<td>边框颜色</td>
</tr>
</tbody>
</table>
<p><strong>边框简写</strong></p>
<p>边框简写:</p>
<pre><code>border: 1px solid red; 没有顺序
</code></pre>
<p>边框分开写</p>
<pre><code>border-top: 1px solid red //只设置上边框
</code></pre>
<h5>表格的细线边框(border-collapse)</h5>
<p>border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。</p>
<p>语法:</p>
<pre><code>border-collapse: collapse;
</code></pre>
<ul>
<li>collapse 单词是合并的意思</li>
<li>border-collapse:collapse；表示相邻边框合并在一起</li>
<li>案例</li>
</ul>
<pre><code> table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
text-align: center;
}
</code></pre>
<h5>边框会影响盒子实际大小</h5>
<p>边框会额外增加盒子的实际大小，因此有两种解决方案:</p>
<ul>
<li>测量盒子大小时，不量边框</li>
<li>如果测量 的时候包含了边框，则需要width/height减去边框宽度</li>
</ul>
<h5></h5>
<h5>内边距（paddding）</h5>
<p>padding属性用于设置内边距，即边框和内容之间的距离</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>padding-left</td>
<td>左内边距</td>
</tr>
<tr>
<td>padding-right</td>
<td>右内边距</td>
</tr>
<tr>
<td>padding-top</td>
<td>上内边距</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>下 内边距</td>
</tr>
</tbody>
</table>
<p><strong>padding属性简写</strong></p>
<table>
<thead>
<tr>
<th>值的个数</th>
<th>表达意思</th>
</tr>
</thead>
<tbody>
<tr>
<td>padding: 5px</td>
<td>1个值，上下左右都有5像素内边距</td>
</tr>
<tr>
<td>padding: 5px 10px;</td>
<td>2个值，上下5px,左右10px</td>
</tr>
<tr>
<td>padding: 5px 20px 10px;</td>
<td>3个值，上内边距5px 左右20px 下 10px</td>
</tr>
<tr>
<td>padding: 5px 10px 20px 30px</td>
<td>4个值，上右下左</td>
</tr>
</tbody>
</table>
<p>当给盒子指定padding值后，发生2件事情:</p>
<ol>
<li>内容和边框有了距离，添加了内边距</li>
<li>padding影响了盒子实际大小</li>
<li>也就是说，盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子</li>
</ol>
<p><strong>解决方案：</strong></p>
<p> 如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。</p>
<h5>padding影响盒子的好处</h5>
<p>padding内边距可以撑开盒子，因此可以巧妙利用</p>
<p>因为每个导航栏里面的数字不一样多，因此不用给每个盒子宽度了，直接给padding最合适，因为padding会撑开盒子，只用保证盒子与字左右间距相同，而不管盒子实际大小。</p>
<h5>新浪导航栏</h5>
<pre><code> <!--
不管盒子宽度，padding会撑开盒子，
字数不同，padding相同，保证
不管字数多少，字与盒子padding相同 -->
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #efeefd;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
font-size: 12px;
padding: 0px 20px;
text-decoration: none;
color: #4c4c4c;
}
.nav :hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
</code></pre>
<h5>padding不会影响盒子的情况</h5>
<p>如果盒子本身没有指定width/height，则此时padding不会撑开盒子大小。只保证内边距</p>
<pre><code> h1 {
background-color: tomato;
height: 40px;
padding: 30px;
/* 此时左右的padding不会影响盒子大小，因为没有设置width 左右的padding无效 */
/* 但是上下的padding会影响盒子大小 */
}
h2 {
background-color: skyblue;
height: 40px;
width: 100%;
padding: 30px;
/* 此时设置了width和height,会影响盒子上下左右的padding */
}
div {
width: 300px;
height: 100px;
background-color: palegreen;
}
div p {
/* 此时虽然父元素div指定了width，但是不会影响盒子大小，还是不会撑开父元素盒子大小，只保证内边距
继承父元素宽度300px */
padding: 30px;
background-color: peru;
}
<div>
<p></p>
</div>
</code></pre>
<h5>外边距(margin)</h5>
<p>margin属性设置外边距，即控制盒子和盒子之间的距离</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>margin-left</td>
<td>左外边距</td>
</tr>
<tr>
<td>margin-right</td>
<td>右外边距</td>
</tr>
<tr>
<td>margin-top</td>
<td>上外边距</td>
</tr>
<tr>
<td>margin-bottom</td>
<td>下外边距</td>
</tr>
</tbody>
</table>
<ul>
<li>简写方式代表意义跟padding完全一致</li>
</ul>
<h5>外边距应用–块级盒子水平居中</h5>
<p>外边距可以让块级盒子<strong>水平居中</strong>，但是必须满足两个条件</p>
<ol>
<li>盒子必须指定了宽度width</li>
<li>盒子左右的外边距都设置为auto</li>
</ol>
<pre><code>.header {
width:960px;
margin: 0 auto;
}
</code></pre>
<p>常见三种写法:</p>
<ul>
<li>margin-left: auto; margin right: auto</li>
<li>margin: auto</li>
<li>margin: 0 auto;</li>
</ul>
<blockquote>
<p>注意:以上方法是让块级元素水平居中，</p>
</blockquote>
<h5>行内元素或行内块元素水平居中</h5>
<p>行内元素或行内块元素水平居中给其父元素添加text-align：center即可</p>
<h5>外边距合并</h5>
<p>使用margin定义块元素的垂直外边距时，可能出现外边距的合并</p>
<p>主要有两种情况:</p>
<ol>
<li>相邻块元素垂直外边距合并</li>
<li>嵌套块元素垂直外边距的塌陷</li>
</ol>
<ul>
<li>浮动的盒子不会有外边距合并问题</li>
</ul>
<p><strong>相邻块元素垂直外边距的合并</strong></p>
<p>当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom，下面元素有上外边距margintop，则，他们之间垂直的间距布置margin-bottom和margin-top之和。<strong>取两个值中的最大者这种现象被称为相邻块元素垂直外边距的合并.</strong></p>
<p>解决方案:</p>
<p> 尽量只给一个盒子添加margin值</p>
<pre><code> <style>
.test1 {
width: 200px;
height: 200px;
background-color: aqua;
margin-bottom: 20px;
}
.test2 {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
</body>
</code></pre>
<p>此案例，连个盒子之间的间距只有取最大值,即40px</p>
<p><strong>嵌套块元素垂直外边距的塌陷</strong></p>
<p>对于两个嵌套的(父子关系)的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值</p>
<pre><code><style>
/* 当使用margin定义块元素的垂直外边距时，
可能出现外边距的合并 */
.father {
width: 500px;
height: 400px;
background-color: rebeccapurple;
margin-top: 30px;
/* 解决方案1 */
/* 可以为父元素定义上边框 */
/* border-top: 1px solid transparent; */
/* 解决方案2 */
/* 为父元素定义上内边距 */
/* padding-top: 1px; */
/* 方案3 */
/* 为父元素添加overflow: hidden; */
overflow: hidden;
}
/*
两个嵌套的（父子关系）块元素，父元素有上外边距，
子元素也有上外边距，此时父元素会塌陷较大的外边距值
即，此时只有 父元素 上外边距 塌陷40px */
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</code></pre>
<p>此案例，导致父元素上外边距有40px，而子元素与父元素之间没有上外间距</p>
<p><strong>解决方案</strong></p>
<ul>
<li>为父元素定义上外边框(影响盒子实际大小)</li>
<li>为父元素定义内边距（影响盒子实际大小）</li>
<li>为父元素添加overflow:hidden</li>
<li>还有其他方法，比如浮动、固定、绝对定位盒子等不会有塌陷问题</li>
</ul>
<h5>清除内外边距</h5>
<p>网页元素很多都带有默认的内外边距，而且不同 浏览器默认的也不一致，因此在布局前，首先要清除网页元素的内外边距。</p>
<pre><code>* {
padding:0;
margin:0
}
</code></pre>
<blockquote>
<p>行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。</p>
</blockquote>
<h5>小米模块综合案例</h5>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米产品模块
去除ul小圆点
li {
list-style: none;
}
快报案例
圆角边框(border-radius)
border-radius属性用于设置元素的外边框圆角
border-radius:length;
length：画一个圆，length即为这个圆的半径
-
参数可以为数值或百分比的形式
-
如果是正方形，想要设置一个圆，把border-radius修改为高度或者宽度的一半即可，或者直接写50%(宽度和高度的一半)
-
如果一个矩形，变为圆角矩形，border-radius设置为矩形高度的一半即可。
-
分开写：border-top-left-radius、border-top-right-radius、border-bottom-left、border-bottom-right
值 含义 border-radius:10px 四个角 border-radius:10px 20px 左上角及对角、右上角及对角 border-radius:10 px 20px 30px 40px 左上角、右上角、右下角、左下角
盒子阴影(box-shadow)
box-shadow属性为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必须 ，水平阴影的位置。允许负值 |
| v-shadow | 必须，垂直阴影的位置。允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影颜色，一般使用透明度rgb(0,0,0,.3) |
| inset | 可选，将外部阴影(outset)该改为内部阴影 |
- 默认的是外阴影(outset)，但是不可以写这个单词，否则造成阴影无效
- 盒子阴影不占用空间，不影响其他盒子排列
文字阴影(text-shadow)
语法
text-shadow:h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊的距离 |
| color | 可选。阴影的颜色 |
CSS浮动
传统页面布局的三种方式
网页布局的本质-用CSS来摆放盒子。把盒子摆放到相应位置
CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)
- 普通流(标准流)
- 浮动
- 定位
标准流(普通流、文档流)
所谓的标准流:就是标签按照规定好默认方式排列
-
块级元素会独占一行，从上向下顺序排列
- 常用元素: div、hr 、p、h1-h6、ul、ol、dl、form、table
-
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素:span、a、i、em等
以上都是标准流布局，标准流就是最基本的布局方式
浮动（float）
提问
-
如何让多个块级盒子div水平排成一列
**答：**比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。
-
如何实现两个盒子的分别左或右对齐？
为什么需要浮动
总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成不。因为浮动可以改变元素标签默认的排列方式。
**浮动最典型应用：**可以让多个块级元素一行内排列显示
网页布局第一准则:多个块级元素纵向排列找标准流，多个块级横向排列找浮动
什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘
语法：
选择器 {
float:属性值;
}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动(默认值) |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性
加了浮动之后的元素，会具有很多特性
- 浮动元素会脱离标准流
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性(一行显示、可设定宽度和高度、宽度默认跟随内容调整)
浮动特性-（脱标）
- 脱离标准普通流的控制(浮)，移动到指定位置(动)，（俗称脱标）
- 浮动的盒子不再保留原先的位置
- 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行。
浮动特性-（具有行内块特性）
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设定宽度，默认宽度和父级一样宽，添加浮动后，它的大小根据内容决定
- 浮动的盒子之间没有缝隙，紧挨一起
- 行内元素同理
浮动元素经常和标准父级搭配使用
为了约束浮动元素的位子，一般网页布局采取策略是:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。复合网页布局第一准则。
网页布局第二准则;先设置盒子的大小，只有设置盒子的位置
Document
清除浮动
为何清除浮动
-
我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。但是，所有的父盒子都必须有高度吗？
**答：**很多情况下，父级盒子不方便给高度，而是给一个宽度，然后由子元素撑开盒子的高度。
但是子盒子浮动，不占有位置，最后父级盒子高度为0时，就影响下面标准流的盒子(因为父盒子不占位置，因此其他盒子往上跑)
由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响
清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流了
清除浮动(clear)
语法：
选择器 {clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧的影响 |
- 清除浮动的策略时:闭合浮动
清除浮动的方法
- 额外标签法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
清除浮动-额外表标签法
额外标签法也称为隔墙法
额外标签法会在最后一个浮动的子元素后面添加一个额外标签，并添加清除浮动样式
- 优点:通俗易懂，书写方便
- 缺点:添加许多无意义的标签，结构化差
注意：要求这个新的空标签必须是块级元素
.box {
width: 900px;
margin: 0 auto;
border: 1px solid blue;
background-color: pink;
}
.one {
width: 200px;
height: 200px;
background-color: burlywood;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: chartreuse;
float: left;
}
/* 使用额外标签清除浮动 */
/* clear:清除left/right或两侧的影响 */
/* 父级元素自定添加高度 */
.clear {
clear: both;
}
总结
-
清除浮动的本质是？
清除浮动的本质是清除浮动元素脱离标准流造成的影响
-
清除浮动策略是？
闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
-
额外标签法？
就是在最后一个浮动的子元素后面添加一个额外标签，并添加清除浮动样式
清除浮动-父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
- 缺点:无法显示溢出的部分
.box {
width: 900px;
margin: 0 auto;
border: 1px solid blue;
background-color: pink;
overflow: hidden;
}
.one {
width: 200px;
height: 200px;
background-color: burlywood;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: chartreuse;
float: left;
}
.footer {
height: 300px;
background-color: coral;
}
清除浮动-:after伪元素法
:after方式是额外标签的升级版，也是给父元素添加
.clearfix:after {
content: "";
/* 默认行内元素，修改为块级元素 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6/7专有 */
*zoom: 1;
}
使用
清除浮动-双伪元素清除浮动
也是给父元素添加
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
使用
清除浮动总结
为什么需要清除浮动？
- 父级没高度
- 子盒子浮动了
- 影响下面布局，就应该清除浮动了
| 清除浮动的方式 |
|---|
| 额外标签法 |
| 父级overflow:hidden; |
| 父级after伪元素 |
| 父级双伪元素 |
CSS定位
为什么需要定位
- 某个元素可以自由的在一个盒子内移动位置并压住其他盒子
- 当我们滚动窗口的时候，盒子是固定屏幕的某个位置的
以上效果，标准流和浮动都无法快速实现，此时需要定位实现
所以:
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子
定位组成
**定位：**将盒子定在有一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
定位模式(position)
定位模式决定元素的定位方式，通过CSS的position属性来设置，
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到的最终位置。有top、bottom、left、right4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量 |
| left | left:80px | 左侧偏移量 |
| right | right：80px | 右侧偏移量 |
静态定位(static)
静态定位是元素的默认定位方式，无定位的意思
语法:
选择器 {position: static;}
- 静态定位按照标准流特性摆放位置，它没有边偏移
相对定位(relative)
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法:
选择器 {position:relative;}
相对定位特点
- 它是相对于自己原来的位置移动的(移动位置的时候参照的是自己原来的位置)
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流方式对待
- 相对定位并没有脱标，适合给绝对定位当爹(因为占有原来位置，不会影响下面的元素)
案例
绝对定位(absolute)
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：
选择器 {
position:absolute;
}
绝对定位特点
- 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位(document文档)
- 如果祖先元素有定位(相对、绝对、固定)，则以最近一级的祖先元素为参考点移动位置
- 绝对定位不再占有原来位置(脱标)
子绝父相由来
子级是绝对定位，父级是相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子(脱标并覆盖)
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有原来位置，因此父亲只能是相对定位
**总结：**因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
固定定位(fixed)
固定定位是元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时，元素的位置不会改变
语法
选择器 {position: fixed;}
固定定位特点
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原来的位置(脱标)
固定定位小技巧-固定在版心右侧位置
小算法：
- 让固定定位的盒子left:50%.走到浏览器可视区(版心)的一半位置。
- 让固定定位的margin-left:版心宽度的一半。(到达版心右侧)
粘性定位(sticky）
粘性定位可以被认为是相对定位和固定定位的混合，
语法
选择器 {position: sticky; top:10px;}
粘性定位特点
- 以浏览器的可视窗口为参照点移动元素
- 粘性定位占有原先的位置
- 必须添加top、left、right、bottom其中的一个才有效
跟页面滚动搭配使用，兼容性差，IE不支持。
定位总结
| 定位模式 | 是否脱标 | 移动位置 |
|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 |
| relative相对定位 | 否 | 相对于自身位置移动 |
| absolute绝对定位 | 是 | 带有定位的父级 |
| fixed固定定位 | 是 | 浏览器可视区 |
| sticky粘性定位 | 否 | 浏览器可视区 |
定位叠放次序(z-index)
在多个盒子使用定位布局时，可能出现盒子重叠情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法
选择器 {z-index:1;}
- 数值可以使正整数、负整数、0，默认是auto，数值越大，盒子越靠上
- 如果属性值形同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位拓展
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
- 水平居中
- left:50%:让盒子的左侧移动到父级元素的水平中心位置
- margin-left:（-盒子宽度的一般):让盒子向左移动自身宽度的一半
- 垂直居中
- top:50%
- margin-top -盒子高度的一半)
定位的特殊性
绝对定位和固定定位也和浮动类似。
- 行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
- 块级元素添加绝对定位或固定定位，不过不给宽度/宽度，默认大小是内容的大小
因为浮动和绝对定位、固定定位都脱标
绝对/固定定位会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的问文字(图片)
但是绝对/固定定位会压住下面标准流的所有内容
浮动文字环绕
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕，文字会围绕浮动元素
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题,因为它们都脱标
案例
淘宝轮播图
网页布局总结
一个完整的网页是，标准流、浮动、定位一起完成布局的，
-
标准流
可以让盒子上下或左右排列，垂直的块级盒子显示就用标准流
-
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
-
定位
定位最大的特点就是 有层叠的概念，就是可以让多个盒子前后叠压显示。如果元素自由在某个盒子内移动就用定位布局
元素的显示与隐藏
类似网站广告，当点击就关闭不见，刷新页面就会重新出现
本质：让一个元素在页面中隐藏或显示出来
- display 显示/隐藏
- visibility 显示/隐藏
- overflow 溢出显示/隐藏
display属性
display属性用于设置一个元素应如何显示
- display:none；隐藏对象
- display：block；除了转化为块级元素外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏。
- visibility：visible； 元素可视
- visibility： hidden；元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来的位置，用visibility:hidden；
如果隐藏元素不想要原来的位置，用display:none；
overflow溢出
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度或宽度)会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条(默认) |
| hidden | 不显示超过对象尺寸的内容，超出部分隐藏 |
| scroll | 不管内容是否超出，总是显示滚动条 |
| auto | 超出自动显示滚动条 |
总结
- display显示/隐藏元素，不保留位置
- visibility 显示/隐藏元素，保留原来的位置
- overflow 溢出显示/隐藏, 只是对溢出部分的处理
综合案例(土豆网鼠标经过显示遮罩)
- 练习元素的显示与隐藏
- 练习元素的定位
核心原理
原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来
遮罩盒子不占有位置，就需要使用绝对定位和display配合使用
CSS高级技巧
精灵图
为什么需要精灵图
为了有效减少服务器接收和发送请求的次数，提高页面的加载，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)
**核心原理:**将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了
精灵图的使用
使用精灵图的核心：
- 精灵图技术主要针对背景图片，就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为sprites，精灵图或雪碧图
- 移动背景图片的位置，此时可以用background-position
- 移动的距离就是这个目标图片的x和y坐标
- 一般情况，往上(y坐标)或往左(x坐标)移动，其数值都是负数
- 使用精灵图，精确测量，每个小图片的大小和位置
精灵图的总结
- 精灵图主要针对小的背景图片使用
- 主要借助背景位置实现–background-position
- 一般情况精灵图都是复制(x轴坐标右边走是正值，左边走是负值，y轴坐标下走是正值，上走是负值)
案例
字体图标
字体图标的产生
字体图标使用场景:主要用于显示网页中通常、常用的一些小图标
精灵图缺点:
- 图片文件大
- 图片本身放大或缩小会失真
- 一旦图片制作完，更换复杂
解决以上问题，就是字体图标iconfont
- 字体图标展示的是图标，本质属于字体
使用
- 字体图标的下载
- 字体图标的引入
- 字体图标的追加(添加新的小图标)
推荐网站
- icomoon字体库
- inconfont字体库
字体文件格式
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件
- Ture Type（.ttf）格式.ttf格式是Windows和Mac最常见字体.
- Web Open Font Format（.woff）
- Embedded Open Type(.eot)，IE专用字体
- SVG(.svg)格式，.svg是基于SVG字体渲染的一种格式
CSS三角
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或字体图标
宽高为0，只设置边框
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
borderer:50px solid transparent;
border-left-color:pink
}
.box1 {
width: 0px;
height: 0x;
margin: 10px auto;
border-left: 20px solid pink;
border-top: 20px solid orange;
border-right: 20px solid aqua;
border-bottom: 20px solid palegreen;
}
.box2 {
width: 0;
height: 0;
margin: 20px auto;
border: 50px solid transparent;
/* border-top-color: turquoise; */
border-bottom-color: orange;
}
CSS用户界面样式
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 放置表单拖拽
鼠标样式(cursor)
li {
cursor: pointer;
}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线(outline)
给表单添加outline: 0 ;或者outline:none样式之后，就可以去掉默认的蓝色边框
input {outline: none;}
防止拖拽文本域(resize)
实际开发中，文本域右下角是不可以拖拽的
textarea {resize: none;}
vertical-align属性应用
CSS的vertical-align属性使用场景:经常用于设置图片或表单(行内块元素)和文字垂直对齐
官方解释:用于设置一个元素和垂直对齐方式，但是它只针对行内元素或者行内块元素有效
语法:
vertical-align: baseline(默认)|top|middle|bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行内最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
应用(图片、表单和文字对齐)
默认文字与图片是基线对齐
此时可以给图片、表单行内块元素的vertical-align属性设置为middle就可以让文字与图片居中对齐
解决图片底部默认空白缝问题(vertical-align)
bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
解决方法
- 给图片添加 veritcal-align:middle|top|bottom等
- 把图片转换为块级元素display:block;
pink
溢出的文字省略号显示
-
单行文本溢出省略号显示
单行文本溢出显示省略号必须满足三个条件
1.强制一行内显示文本 white-space: nowrap;(默认normal自动换行) 2.超出的部分隐藏 overflow:hidden; 3.文字用省略号代替超出的部分 text-overflow:ellipsis; -
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）
overflow:hidden; text-overflow:ellipsis; //弹性伸缩盒子模型显示 display: -webkit-box; //限制在一个块元素的文本的行数 -webkit-line-clamp:2; //设置或检索伸缩盒子对象的子元素的排列方式 -webkit-box-orient:vertical;
常见布局技巧
- margin赋值的运用
- 文字围绕浮动元素
- 行内块的巧妙运用
- CSS三角强化
margin赋值运用
- 让每个盒子margin往左侧移动，-1px正好压住相邻盒子边距
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位 (保留位置),如果有，则提升层级z-index）
ul li {
position: relative;
float: left;
width: 150px;
height: 200px;
list-style: none;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 此情况是li盒子没有定位 */
/* 改为相对定位，会压住其他标准流，解决了左侧盒子压住边框的问题 */
position: relative;
border-color: skyblue;
}
ul li:hover {
/* 提高级别 */
z-index: 1;
border-color: skyblue;
}
文字围绕浮动元素
【集锦】 热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
热身赛-巴西0-1秘鲁 内尔马替补两人血染赛场
行内块元素巧妙运用(分页效果)
页码在中间显示:
- 把这些链接盒子转换为行内块，之后给父级添加text-align:center就会水平居中
- 利用行内块元素中间有缝隙，之后给父级添加text-align:center就会水平居中
CSS三角强化
-
直角三角形
只保留上边和右边边框，且左边边框较大，会撑开，并且是上边框颜色透明
京东价格框案例
使用三角形+定位+文字浮动
￥99
￥199
￥99
￥199
CSS初始化(CSS reset)
不同浏览器对有些标签的默认值时不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS进行初始化
CSS初始化是指重设浏览器样式
Unicode编码字体
把中文字体的名称用响应的Unicode编码来代替，这样可以有效避免浏览器解释CSS代码出现乱码问题
如:
黑体 \9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
HTML5和CSS提高
HTML5新特性
HTML5的新增特性主要针对与以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本IE9以上才支持
HTML5新增的语义化标签
以前布局，基本用div来做。div对于搜索引擎来说，是没有语义的
新增语义化标签
- header:头部标签
- nav：导航栏标签
- article：内容标签
- section： 定义文档某个区域
- aside：侧边栏标签
- footer:尾部标签
注意
- 这种语义化标签主要针对搜索引擎的
- 在IE9中，需要把这些元素转换为块级元素
头部标签
内容标签
某个区域
多媒体标签(audio/video)
新增的多媒体标签主要包含两个：
- 音频:audio
- 视频video
使用他们可以很方便的在页面嵌入视频、音频，而不再使用flash和其他浏览器插件
视频video
video支持三种视频格式 MP4、WebM、Ogg
尽量使用mp4格式
语法
多种格式预设
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
你的浏览器不支持video标签播放视频
video>
video常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| hegiht | pixels(像素) | 设置播放器高度 |
| loop | loop | 循环播放 |
| preload | auto(预先加载视频)none(不应加载视频) | 规定是否预加载视频(如果有了autoplay 就忽略该属性) |
| src | url | 视频url地址 |
| poster | imgUrl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
音频audio
当前audio元素支持三种音频格式: mp3/Wav/ogg
最好用mp3，因为所有浏览器都支持MP3格式
语法
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器不支持audio标签
audio>
audio常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，音频就绪后马上播放 |
| controls | controls | 向用户显示控件 |
| loop | loop | 循环播放 |
| src | url | 音频URL |
- 谷歌浏览器把音频和视频自动播放禁止了
总结
- 谷歌浏览器把音频和视频自动播放禁止了
- 可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过javaScript来控制)
- 视频一般设置自动播放，不使用controls控件(因为不同浏览器的controls显示不同)
新增input类型
| 属性值 | 说明 |
|---|---|
| type=“emial” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 内容不能为空 |
| placeholder | 提示文本 | |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到表单 |
| autocomplete | off/on | 浏览器基于之前键入过的值，默认打开autocomplete=“on”，关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时提交成功 |
| multiple | multiple | 可以多选文件提交 |
可以通过一下设置方式修改placeholder里面的字体颜色
input::placeholder {
color:pink;
}
CSS3新特性
- 有兼容性问题，ie9+才支持
CSS3新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
属性选择器可以根据元素特定属性来选择元素。这样就可以不借助与类或id选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=‘val’] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 选择具有att属性且值以val开头的E元素 |
| E[att$=“val”] | 选择具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性且值含有val的E元素 |
- 注意：类选择器、属性选择器、伪类选择器，权重为10
小图标1
小图标2
小图标3
小图标4
BLACKPINK
IN
YOUR
AREA
结构伪类选择器
结构伪类选择器主要根据文档结构选择元素，常用于父级选择器里选择里面的子元素
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第N个子元素E |
| E:first-of type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
- 注意：类选择器、属性选择器、伪类选择器，权重为10
nth-child(n)
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字、关键字和公式
- n如果是数字，就是选择第n个子元素
- n可以是关键字:even偶数、odd奇数
- n可以是公式:常见的公式如下(如果n是公式，则从0开始计算，但是第0个或超出的元素忽略)
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 |
| n+5 | 从第5个开始到最后 |
| -n+5 | 前5个 |
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
nth-child(n)与nth-of-type区别
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第N个子元素E |
| E:first-of type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
区别
- nth-child 对父元素里面所有孩子排序，先找到第n个孩子，看看是否和元素E匹配，匹配选中，反之不选
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后根据E找到第n个孩子
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
光头强
熊大
光头强
小结
- 结果伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对于父元素里面素有孩子排序选择，找到第n个孩子，看看是否与E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后根据n找到第一个孩子
- 类选择器、属性选择器、伪类选择器权重为10
伪元素选择器
为元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构(不会出现在dom里面)
| 选择器 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中找不到，所以称为伪元素
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 为元素选择器和标签选择器一样，权重为1
伪元素字体图标
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
content: "\e6b9";
position: absolute;
right: 0;
font-family: "iconfont" !important;
font-size: 25px;
padding-top: 5px;
padding-bottom: 5px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
伪元素放土豆效果
/*当鼠标经过 土豆这个盒子，就让里面before遮罩层显示*/
div {
position: relative;
width: 448px;
height: 252px;
margin: 100px auto;
}
div::before {
/* 遮罩层 */
content: "";
position: absolute;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6) url(img/arr.png);
}
div:hover::before {
display: block;
}
伪元素清除浮动
.clearfix::after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix:before,clearfix:after {
content:"";
display:table; //转换为块级元素 并且一行显示
}
.clearfix:after {
clear:both;
}
CSS3盒子模型
CSS3中通过box-sizing来指定模型，有2个值:即可指定为content-box、border-box，这样计算盒子大小的方式就发生了改变
- box-sizing:content-box 盒子大小为width+padding+border(以前默认)
- box-sizing:border-box 盒子大小为width
如果盒子模型改为box-sizing:border-box，那padding和border就不会撑大盒子(前提padding和border不会超过width宽度)
BLACKPINK
BLACKPINK
CSS3其他特性
图片变模糊（滤镜filter）
计算函数(calc函数)
calc()函数可以在声明CSS属性值时执行一些计算
括号里面可以使用+ - * / 进行计算
过渡(transition)
transition可以在不使用Flash动画和JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:是从一个状态 渐渐的过渡到另一个状态
经常和:hover一起搭配使用
语法
tansition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：要想变化的CSS属性，宽度、高度 、背景颜色、内外边距都可以。如果想要所有变化过渡，写一个all就可以
- **花费时间：**单位是秒(必须写单位)如1s (.5s代表0.5s)
- **运动曲线：**默认是ease(逐渐慢下来)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out（先加速后减速）
- 何时开始：单位是秒(必须写单位)，设置延迟触发时间，默认是0s
- 给谁做过渡，给谁加过渡属性
进度条案例
小米logo
