HTML5和CSS3-CSDN博客

本文链接：https://blog.csdn.net/Morii1126/article/details/129732758

5.圆角边框（border-radius）

一、HTML5基础

HTML（Hyper Text Markup Language）超文本标记语言

HTML的发展史:

1993-6 超文本标记语言

2000-1-26 XHTML1.0

2013-5-6 HTML5

W3C:

World Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括：

结构化标准语言(HTML、XHTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

基础语法：

<!DOCTYPE html>
<html>
<head lang="en">
  <!--头部-->
    <meta charset="UTF-8">
  <title>T46</title>
</head>
<body>
<!--主体-->
</body>
</html>

元素语法：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

HTML 属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现。

例如：

class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

1.搜索描述

<meta name=”bd”  content="北大">

图像单标签属性
<img src=”图片地址” alt=”图像的替代文字” title=”鼠标悬停提示文字” width=”图片宽度” height=”图片高度”/>
src="图片路径"
width="宽度"	
height="高度"	
alt="图片无法加载替代文字"	
title="提示"

2.基本标签

<h1-6>标题标签
<p>段落标签
<br/>换行标签
<hr/>水平线标签
<strong>字体变粗
<em>文字倾斜
<img>图像格式
src=“图片地址” 
alt=“图像的替代文字” 
title=“鼠标悬停提示文字”  
width= “图片宽度” 
height=“图片高度”
<a>超链接
		href =“链接地址”
		target=“目标窗口位置”  _self自身窗口  _blank新建窗口

3.转义字符

&nbsp;	空格 
&gt;	大于号(>)
&lt;	小于号(《)
&quot;	引号（"）
&copy;	版权符号（@）

4.a链接双标签属性

href="链接路径"		
target="目标窗口位置 默认值_self(在当前窗口打开)  常用值_self、_blank（打开新窗口）"		
href="mailto:2693451077@qq.com"

<a hred=”链接路径” target=”目标窗口位置”>链接文本或图像</a>
<a name=”marker”>目标位置乙</a>
锚链接#

5. 格式化标签

<b> 与<i> 定义粗体或斜体文本

<strong> 或者 <em>意味着你要呈现的文本是重要的

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

<head>	定义了文档的信息
<title>	定义了文档的标题
<link>	定义了一个文档和外部资源之间的关系
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

二、列表、表格与媒体元素

1.无序列表

前有带有（■●）的我们叫无序列表

语法：块元素
<ul>		
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>
<ul>标签标签里面只能是<li>标签
<ul> 声明无序列表
<li> 声明列表项

2.有序列表

前面带有（1、2、3、4）的我们叫有序列表

语法：块元素
<ol>	
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ol>
<ol>标签标签里面只能是<li>标签
<ol> 声明有序列表
<li> 声明列表项

3.定义列表

有标题，和标题的相关内容

语法：块元素
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>

    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>
<dl> 声明定义列表
<dt> 声明列表项
<dd> 声明列表项内容

4.表格

基本结构：行、列、单元格

语法：
<table border=”2”>
    <tr>
        <td>第1个单元格内容</td>
        <td>第2个单元格内容</td>
    </tr>
    <tr>
        <td>第1个单元格内容</td>
        <td>第2个单元格内容</td>
    </tr>
</table>

<table> 表格标签
<tr> 行标签
<th>表示加粗标题
<td> 单元格标签
boreder 表示边框，2表示表格线大小

5.表格的跨列

语法:
<table>
    <tr>
 	   <td colspan=”n”>单元格内容</td>
    </tr>
    <tr>
   		<td>单元格内容</td>
    </tr>
</table>
colspan=”n”所跨的列数n表示跨的列数

6.表格的跨行

语法：
<table>
    <tr>
   		<td rowspan=”n”>内容</td>
    </tr>
    <tr>
        <td>内容</td>
    </tr>	
</table>
rowspan=”n”所跨的行数n表示行数

table快捷方式
table>tr*3>td*3

7.视频元素

语法：
<video src=”视频路径” controls></video>	
<video src=”video/video.webm” controls></video>

controls表示提供播放、暂停、声音的控件
语法：
<video controls>
    <source src=”video/video.webm” type=”video/webm”/>
    <source src=”video/video.mp4” type=”video/mp4”/>
</video>

source 表示引入其他文件，浏览器支持哪个选择哪个
type 表示视频类型
autoplay 属性自动播放
width 播放器宽度
height高度
loop循环播放

8.音频元素

语法：
<audio src=”音频路径” controls></audio>

controls提供播放、暂停、音频的控件

语法：
<audio controls>
    <source src=”music/music.mp3” type=”audio/mpeg”/>
    <source src=”music/music.ogg” type=”audio/ogg”/>
</audio>

source 表示引入其他文件，浏览器支持哪个选择哪个
type 表示视频类型
autoplay 属性自动播放
width 播放器大小

9.页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

显示边距
<style>
    header,section,footer{
        height: 200px;
        border: 1px solid red;
    }
</style>

10.iframe 框架

内联框架，在同一个页面里面展示多个页面

src路径
width设置框架的宽度   属性默认以像素为单位, 但是你可以指定其按比例显示
height设置框架的高
name  给框架再做一个标识

语法1：
<iframe src=”path” width=”500px” height=”236px” name=”mainFrame”></iframe>
path引用页面地址
mainFrame框架标识名

语法2：
在被打开的框架上加name属性：
<iframe name=”mainFrame” src=”path”/>
在超链接上设置target目标长裤属性为希望显示的框架窗口名
<a href=”path” target=”mainFrame”>下边显示第二页</a>

语法3：
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

语法4：
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.runoob.com" target="iframe_a">b

三、表单

表单验证的好处：

减轻服务器的压力
保证数据的可行性和安全性

基础语法

语法：
<form method="post" action="result.html">
    <p>名字：<input name="name" type="text"/></p>
    <p>密码：<input name="pass" type="password"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>
type		input元素类型
name		input元素名称
value		input元素的值
size		input元素的宽
maxlength	input元素的输入长度

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

1.文本框

语法：
<p>名字：<input name="name" type="text"/></p>
text	文本类型

2.密码框

语法：
<p>密码：<input name="pass" type="password"/></p>
password密码类型例“***”

3.单选按钮

语法：
<input name="gen" type="radio" value="男"/>男
<input name="gen" type="radio" value="女"/>女
radio单选按钮框
value值 
checked 单选按钮选中状态
name必须一样要不然选项会选择两个

4.复选框

语法：
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk"/>聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
checkbox 复选框
value值
checked复选框选中状态

5.列表框

语法：
出生日期：
<select name="bmon" id="">
    <option value="">[选择月份]</option>
    <option value="1">一月</option>
    <option value="2">二月</option>
    <option value="3">三月</option>
</select>月
select标签用于显示可供客户选择的列表框
option 标签用于提供选项
selected	默认显示
select至少包含一个option标签

6.按钮

reset按钮、submit按钮、button按钮、image按钮
语法：
<input type="reset" name="butReset" value="reset 按钮"/>
<input type="submit" name="butSubmit" value="submit 按钮"/>
<input type="image" src="路径"/>
<input type="button" name="butButton" value="button 按钮" onclick="alert(this.value)"/>
image	图片按钮
reset	清空所有表单内容
submit	提交按钮，表单提交到action所指定的URL，并传递数据
button	普通按钮
onclick	是表单元素单击时所触发的事件

7.多行文本域

语法：
<textarea name="textarea" cols="40" rows="6">
    自信、活泼、善于思考...
</textarea>
textarea 标签多行文本域
cols		列的宽度
rows		行数
不能用value属性来赋初始值

8.文件域

语法：
<input type="file" name="file"/>
file 实现文件的选择
使用文件域的时候必须制定enctype="multipart/form-data"

9.邮箱

语法：
<input type="email" name="email"/>
email	邮箱的判断，邮箱是否有效

10.网址

语法：
<input type="url" name="userUrl"/>
url	网址的判断，输入的是否为URL格式

11.数字

语法：
<input type="number" name="num" min="0" max="100" step="10"/>
number 规定对数字的限定
min	规定允许的最小值
max	规定允许的最大值
step	规定合法的数字间隔

12.滑块

语法：
<input type="range" name="range1" min="0" max="10" step="2"/>
renge	滑块
min	规定允许的最小值
max	规定允许的最大值
step	规定合法的数字间隔

13.搜索框

语法：
<input type="search" name="sousuo"/>
search	搜索框，输入内容右边有X

14.设置表单的隐藏域

语法：
<input type="hidden" value="666" name="userid"/>
hidden	使用隐藏域传递数据

15.表单的只读与禁用设置

语法：
<p>用户名：<input type="text" name="name" value="张三" readonly/></p>
<p><input type="submit" value="修改" disabled/></p>
readonly	只读
disabled	禁止

16.表单元素的标注

语法：
<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<label for="feamale">女</label>
<input type="radio" name="gender" id="feamale"/>
label 	标注标签
for	指定当鼠标单击标注文本时，焦点对应的表单元素

17.栏表单初级验证的方法

语法：
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
placeholder 为编辑框提供一个提示

语法：
<input type="text" name="userbane" required/>
required	用于规定文本框填写内容不能为空，否则无法提交表单

语法:
<input type="text" name="tel" required pattern="^1[358]\d{9}"/>
pattern		用于验证输入的内容是否与自定义的正则表达式相匹配

post会把我们传递的信息保存在头信息里面
get会把传递的信息显示在地址栏

四、初识的CSS3

什么是 CSS?

CSS 指层叠样式表
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
CSS3规则由两部分构成，即选择器和声明
声明必须放在大括号{}里，并且声明可以是一条或多条
每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾
多个样式定义可层叠为一个

CSS 实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

p
{
color:red;
text-align:center;
}

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

CSS3基础语法结构

语法：
h1{
    font-size: 20px;
    color: red;
}
h1		选择器
font-size	属性
20px		值
color		属性
red		值

1.style标签

语法：
<style type="text/css">
    p{
        font-size: 16px;
        color: red;
    }
</style>

2.行内样式

语法：
<h1 style="color: red;">style属性应用</h1>
<p style="font-size: 14px;color: green">直接在html标签中设置样式</p>
color		字体颜色
font-size	字体大小

3.内部样式表

语法：
<head>
<style type="text/css">
    p{
        font-size: 16px;
        color: red;
    }
</style>
</head>

4.外部样式表

1.链接外部样式表（推荐）

语法：
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

2.导入外部样式表

语法：
<head>
@import url("CSS/common.css");
</head>

3.链接式和导入式的区别

1.<link/>标签属于XHTML范畴，而@import是CSS2.1中特有的
2.<link/>浏览网页时先将外部CSS文件加载到网页中
3.@import 浏览网页时先将HTML网页结构呈现出来

4.样式优先级

行内样式>内部样式>外部样式

行内样式--只对当前一行有效

内部样式表—只对当前页面有效

外部样式表—链接外部样式表、导入外部样式表

就近原则
如果同一个选择器中样式声明层叠，那么后写的会覆盖先写的样式，
既后写的样式优先于先写的样式。

5.CSS3的选择器

最基本的3种选择器，标签选择器、类选择器、ID选择器

1.标签选择器

语法：
p{font-size: 16px;}
p 	标签选择器、HTML标签
font-size 属性
16px	值

2.类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

语法：
.class{font-size: 20px;}
.class	类选择器、类名称
font-size	属性
20px	值

<标签名 class="类名称">内容</标签名>
<!--类样式，在一个页面可以写多个相同名字的类名 选择的时候使用“.”-->

3.ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

语法：
#id{font-size: 24px;}
#id		ID选择器、ID名称
font-size	属性
24px	值

<标签名 id="ID名称">内容</标签名>
<!--ID，在同一个页面一个名字只能写一个，选择的时候用“#”-->

4.三种基本选择器的优先级

ID选择器>类选择器>标签选择器

ID选择器：用#在<style>声明

class选择器:用“.” 在<style>声明

标签选择器：直接在<style>声明

6.CSS3的高级选择器

1.层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

1.后代选择器

语法：
body p{
    background: red;
}
选取body的所有p背景属性为red

2.子选择器

语法：
body>p{
    background: red;
}
选取body同级下面的p标签背景属性为red

3.相邻兄弟选择器

语法：
.active+p{
    background: red;
}
选取.active下面的1个p标签属性为red，自身不变

4.通用兄弟选择器

语法：
.aa~p{
    background: red;
}
选取.aa同级下面的所有p标签属性为red，自身不变

odd 奇数

even 偶数

2.结构伪类选择

（前三先看位置再匹配类型）

结构伪类选择器
选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，(n可以是1、2、3)，关键字为even偶数、odd奇数
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F：nth-of-type	选择父元素内具有指定类型的第一个n元素

（后三先看类型再匹配位置）

1.选择ul下面的第一个li

语法:
ul li:first-child{
    background: red;
}
first-child	选取ul下面的第一个li

2.选择ul下面的最后一个li

语法：
ul li:last-child{
    background: red;
}
last-child		选取ul下面的最后一个li

3.选取ul下面的第n个li

语法：
ul li:nth-child(n){
    background: blue;
}
nth-child(n)	选取ul下面的第n个li

4.选取第n个出现的p

语法：
p:nth-of-type(n){
    background: blue;
}
nth-of-type(n)	选取第n个出现的p

3.属性选择器

属性选择器
选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有attr的E元素，并且定义属性值为val(其中val区分大小写)
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性是包含了val，字符串val与属性值中的任意位置相匹配

1.选取存在属性id的元素

语法：
a[id]{
    background: hotpink;
}

2.选取属性id=first的元素

语法：
a[id=first]{
    background: red;
}

3.选择a标签里面属性为class并且属性值为links的元素

语法：
a[class=links]{
    background: black;
}

4.选取class里包含links字符串的元素

语法：
a[class*=links]{
    background: chartreuse;
}

5.选取href里以http开头的元素

语法：
a[href^=links]{
    background: darkblue;
}

6.选取href里以html结尾的元素

语法：
a[href$=links]{
    background: darkblue;
}

4.新增

五、CSS3美化网页元素

1.span标签的作用

能让某个文字或者某个词语凸显出来

文本在网页中的意义：

(1)有效地传递页面信息

(2)使用 CSS 样式美化过的页面文本，使页面漂亮、美观，吸引用户。

(3)可以很好地突出页面的主题内容，使用户第一眼可以看到页面的主要内容。

(4)具有良好的用户体验。

2.字体样式

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

1.字体类型

font-family: Verdana,"楷体";
font-family: Times, "Times New Roman", "楷体";
通常情况下设置英文跟中文一块的时候，前面加上Times

2.字体大小

font-size: 30px;

3.字体风格

font-style: italic;
normal	默认
italic	斜体
oblique	更加斜体

4.字体粗细

font-weight: 700;
700等同于bold粗体
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100,200,300,400,500	定义由细到粗的字体，400=normal，700=bold

5.font写全部属性

字体属性的顺序依次为：字体风格>字体粗细>字体大小>字体类型

font: italic bold 30px "楷体";
风格-字体粗细-字体大小-字体类型

3.文本样式

1.文本颜色

color: #000033;

2.水平对齐

text-align: center;
center 居中对齐
left 左对齐
right 右对齐
justify	两端对齐

3.首行缩进

text-indent: 50px;

4.设置行高

line-height: 50px

5.文本装饰

text-decoration: none;
none			去掉下划线
underline		下划线
overline		上划线
line-through	删除线
vertical-align	垂直对齐方式
文本阴影：
text-shadow:color  
x轴位移(x-offset)  
y轴位移(y-offset)  
模糊半径(blur-radius)

6.垂直对齐

vertical-align: middle;
middle	居中对齐
top	居上
bottom	居下

7.文本阴影

text-shadow: blue 10px 0px 10px;
第一个参数颜色
第二个右边偏移
第三个下面偏移
第四个模糊半径

4.超链接伪类

1.单击访问前

a{
    text-decoration: none;
    color: #4482d0;
}

a:link{
    color: #009900;
    text-decoration: none;
}

2.鼠标悬浮上

a:hover{
    color: #ff9185;
    text-decoration: underline;
}

3.鼠标单击未释放

a:active{
    color: #009900;
    text-decoration: underline;
}

4.访问后

a:visited{
    color: #43ffc0;
}

5.列表样式

无序列表设置实心圆点（默认）

list-style: disc;

none	去掉无序列表里面的实心圆点
circle	无序列表改空心圆点
square	无序列表改实心方形点
disc    实心圆，默认类型
decimal 数字
image   插入图片

<div>标签，可以把文档分割成独立的，不同的部分

6.背景样式

1.设置背景颜色

background-color: #43ffc0;
transparent透明的为默认值

2.设置背景图片

background-image: url("image/1.jpg");

沿着x进行平铺：
background-repeat: repeat-x;
沿着y进行平铺：
background-repeat: repeat-y;
只显示一次：
background-repeat: no-repeat;

背景图片定位：
background-position:205px 10px;

简写
background: #C00 url("../image/arrow-down.gif") 205px 10px no-repeat;
颜色、图片地址、x y、是否平铺

背景图片大小：
background-size
auto	
perccentage
cover	平铺整个边框
contain	原本属性

背景渐变
background: linear-gradient(to left,orange,blue);
方向 颜色

1)背景图像

使用background-image属性设置背景图像的方式是background-image:url(图片路径);。

在实际工作中，图片路径通常写相对路径:此外，background-image 还有一个特殊的值，即 none表示不显示背景图像，实际工作中这个值很少用。

2)背景重复方式

如果仅设置了background-image，那么背景图像默认自动向水平和垂直两个方向重复平铺。如果不希望图像平铺，或者只希望图像沿着一个方向平铺，则使用 background-repeat属性来控制。该属性有四个值为实现不同的平铺方式。

(1)repeat:沿水平和垂直两个方向平铺。

(2)no-repeat:不平铺，即背景图像只显示一次。

(3)repeat-x:只沿水平方向平铺。

(4)repeat-y:只沿垂直方向平铺。

background-size：背景尺寸

auto(使用背景图片保持原样，默认值)

percentage(使用0%~100%的值)

cover(使整个背景放大填充div)

contain(使背景图片进行了宽高比例的缩放，将背景图片缩放到宽度或者高度正好适应所定义背景的区域)

线性渐变：

-webkit-linear(position,color1,color2)[径向渐变没有方向]

六、盒子模型

计算盒子模型的公式

content-box: 一个盒子的总宽度=margin+border+padding+width

border-box: 一个盒子的总宽度=margin+width

边框：border：粗细样式颜色

围绕在内边距和内容外的边框

border-color边框颜色

border-width边框宽度

border-style边框样式（none无边框，dotted点线边框，dashed虚线边框，solid实现边框）

外边距：margin

清除边框外的区域，外边距是透明的

margin：0auto//让整个盒子居中

内边距：padding

清除内容周围的区域，内边距是透明的

事先定义盒子模型的解析方式：box-sizing:content-box | border-box | inherit

content-box:默认值，盒子的宽度或高度=dorder+padding+(margin)+width/height

圆角边框：

border-radius:length(1,4)[左上，右上，右下，左下]

border-radius:50%成一个圆

圆角边框：

border-radius:length(1,4)[左上，右上，右下，左下]

border-radius:50%成一个圆

盒子阴影：

box-shadow：inset阴影类型 x/y-offset x/y轴阴影偏移量 blur-radius阴影模糊半径 color

1.边框（border）

1.边框颜色（border-color）

border-top-color:red;		设置上边框颜色
border-right-color:red;		设置右边框颜色
border-bottom-color:red;	设置下边框颜色
border-left-color:red;		设置左边框颜色
border-color:red;			四个边框为同一个颜色
border-color:#369 #000;		上下为 #369 左右为#000
border-color:#369 #000 #F00 #00F;	上、右、下、左
顺时针

2.边框粗细（border-width）

border-top-width:5px;			设置上边框粗细为5px
border-right-width:10px;		设置右边框粗细为10px
border-bottom-width:8px:		设置下边框粗细为8px
border-left-width:22px;			设置左边框粗细为22px
border-width:5px;				四边粗细为5px
border-width:20px 2px;			上下边框为20px、左右边框为2px
border-width: 5px 1px 6px;		上边框为5px、左右边框为1px、下边框为6px
border-width:1px 3px 5px 2px;	上、右、下、左

3.边框类型（border-style）

border-top-style:solid;		设置上边框为实线
border-right-style:solid;		设置右边框为实线
border-bottom-style:solid;	设置下边框为实线
border-left-style:solid;		设置左边框为实线
border-style:solid;			设置四个边框均为实线
border-style:solid dotted;	上下边框为实线、左右边框为点线
border-style:solid dotted dashed;	上边框为实线、左右为点线、下边框为虚线
border-style:solid dotted dashed double;	上、右、下、左
实线、点线、虚线、双线
solid实线 	dashed虚线 	常用

4.边框简写（border）

border: 9px #F00 dashed;
没有顺序限制，一般为粗细、颜色、样式

5. border-style 值

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

2.外边距（margin）

margin-top:1px;		设置上外边距为1px
margin-right:2px;		设置右外边距为2px
margin-bottom:2px;	设置下外边距为2px
margin-left:1px;		设置左外边距为1px
margin:3px 5px;		设置上下外边距为3px左右外边距为5px
margin:3px 5px 7px;	设置上为3px、左右为5px、下为7px
margin:3px 5px 7px 4px;		上、右、下、左外边距分别是3、5、7、4
margin: auto 0;	居中

3.内边距（padding）

padding-left:10px;		设置左内边距为10px
padding-right:5px;		设置右内边距为5px
padding-top:20px;		设置上内边距为20px
padding-bottom:8px;	设置下边内距为8px
padding:10px 5px;		设置上下内边距为10px、左右内边距5px
padding:30px 8px 10px;	设置上为30px、左右为8px、下为10px
padding:20px 5px 8px 10px;		设置上、右、下、左内边距分别是20、5、8、10
padding:10px;			设置上右下左内边距为10px

去掉所有内边距外边距
*{
margin:0px;
padding0px;
}

4.box-sizing拯救布局

box-sizing: border-box;
box-sizing: content-box;

5.圆角边框（border-radius）

border-radius:20px				四个交都是圆角值为20px
border-radius:20px 40px;		上左下右20px、上右下左40px；
border-radius:20px 10px 50px;	上左20px、上右下左10px、下右50px
border-radius:20px 10px 50px 30px;上、右、下、左值20、10、50、30
特殊图案
border-radius:50%;			圆形 
border-radius:50px 50px 0 0;	上半圆
border-radius:0 0 50px 50px;	下半圆
border-radius:50 0 0px 0px;	扇形

6.盒子阴影（box-shadow）

box-shadow:inst x-offset y-offset blur-radius color;
inset		阴影类型
x-offset	x轴位移
y-offset	y轴位移
blur-radius	阴影模糊半径
color		阴影颜色
box-shadow:20px 10px 10px red;

七、浮动

内联标签可以包含于块级标签中，成为它的自元素，而返过来则不成立

1.display属性

block			将行内元素设置为块元素特征
inline			将块元素设置为行内元素特征
inline-block	又具有行内元素特征有具有块元的特征
none			隐藏元素

2.float属性

left			向左浮动
right			向右浮动
none		不浮动

3.clear属性

left		左侧不允许浮动
right		右侧不允许浮动
both		在左、右不允许浮动
none	全都允许

4.overflow属性

visible	内容不会被修剪，会出现在盒子外
hidden	内容会被修剪，其余内容不可见
scroll	内容会被修剪，但是浏览器会显示滚动条
auto	如果内容被修剪，则浏览器会希纳斯改显示滚动条以便查看其余内容

/*方法四：after伪类清除浮动*/(推荐)
.clear:after{
    content:'';     /*在clear后面添加内容为空*/
    display: block;/*把添加的内容转化为块元*/
    clear: both;/*清除这个元素的两边浮动*/
}

Inline-block和浮动的优点如下：

display: inline-block 可以让元素排在一行，并且支持宽宽度和高度，代码实现起来方便，添加该属性的元素在标准文档流中，不需要清除浮动。

float 可以让元素排在一行并且支持宽度和高度，可以决定排列方向。

Inline-block和浮动的缺点如下：

display:inline-block 位置方向不可控制，会解析空格

八、定位网页元素

1.position属性

设置top、left、right、bottom设置
static	默认值，没有定位

relative	相对定位	
可将其移至相对于其原来位置的地方，原来的位置遗留空白区域。
1.	相对自身位置进行偏移，反方向移动
2.	没有脱落标准文档流
3.	自身的位置被保留
4.	相对于自身的位置进行偏移


absolute	绝对定位
可位置相对于最近的已定位父元素(一般与用)，如果元素没有已定位的父元素，那么它的位置相对于window。已定位的元素会脱离文档流（相当于浮动），不占据空间。
1.	会脱离文档流，位置不会被保留
2.	父元素没有设置相对定位，会根据浏览进行偏移
3.	父元素有设置相对定位，会相对于父元素进行偏移
应用场景：下拉列表	轮播图 数字气泡

fixed		固定定位
可定位于相对于浏览器窗口的指定坐标。对于浏览器的位置是固定的。
应用场景：广告

2.z-index属性

z-index: 1;		/*层级越高，那么会在最上面进行显示*/
opacity: 0.4;	/*数值越小越透明0~1*/

九、利用CSS3制作网页动画

1.变形transform属性

1.translate位移

语法：
transform: translate(x, y);
x正数往右负数往左，y正数往下负数往上

2.scale缩放

语法：
transform: scale(1.5);
一个值的情况下原图缩放
两个值情况下，宽度和高度进行缩放

3.skew倾斜

语法：
transform: skew(40deg, -20deg);

4.rotate旋转

语法：
transform: rotate(-90deg) scale(2);
可以跟缩放一起用
依据角度旋转

3D变形：transfrom：[transform-function]

transform-function:设置变形函数，可以是一个，也可以是多个，中间以空格分开。常用的

transform-function如下：

translate():平移函数，基于X、Y 坐标重新定位元素的位置。

定义2D转换中的移动，沿着X和Y轴移动元素

translate最大的优点∶不会影响到其他元素的位置

translate中的百分比单位是相对于自身元素的translate:(50%,50%);

对行内标签没有效果

scale():缩放函数，可以使任意元素对象尺寸发生变化。

rotate():旋转函数，取值是一个度数值。

skew():倾斜函数，取值是一个度数值。

2D变形：translate：[tx(px/%),ty(px/%)],tx表示X轴，ty表示Y轴

2D缩放：scale（sx，sy）或scale(sx)

2D倾斜：skew(ax,ay)或skew(ax)

2.过渡

过渡是：能看到我们元素变化的过程。

过渡的触发机制：

1.伪类触发

2.媒体查询

3.JavaScript触发

渐现、渐弱、动画快慢

语法：
transition: background-color 2s ease-in-out 3s;

指定动画过渡的css属性 过渡数据 过渡动画 延迟时间

ease-in-out	速度先加后减
ease		默认由快到慢
linear		匀速执行
ease-in		越来越快
ease-out	越来越慢
第一个秒数，是多长时间完成这个过渡效果
第二个秒数，是等待多长时间完成过渡效果
background-color需要完成的动画效果

3.动画

语法：
设置关键帧
@keyframes lin {
    0%{

    }
    25%{

    }
    50%{
 
    }
    75%{

    }
    100%{

    }
}
调用：
animation: lin 1s linear 2 both;
infinite无限制播放次数
如果不手动设置这几个属性，那么则元素会默认的回到最初的位置
both：动画元素显示在中间位置
forwards：将元素显示最后关键帧的位置
backwards:将元素显示最初的位置

lin:关键帧的名称
2s:执行动画一共多少秒
linear：播放速度
2：播放次数
both：动画元素显示在中间位置